/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
/* @media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
} */

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
/* img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
} */

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
/* #root, #__next {
  isolation: isolate;
} */






body {
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  
}

h1, h2, h3, h4{
    line-height: 1.2;
}

div,
.form-discretion{
    padding: 10px;
}

header{
    background-color: white;
}

.border-bottom{
    border-bottom: 15px solid rgb(198, 40, 40);
}



/* phone number in header */
#header-container-1 div svg{
    height: 30px;

}

#header-container-1 div a{
    color: rgb(198, 40, 40);
    font-size: 35px;
    font-weight: 700;
}

#header-container-1 div:first-child{
    padding: 5px 0 0 0;

    align-self: center;
}



a{
    text-decoration: none;

}
/* header logo image */

.logo{
    /* position: relative; */
}

.logo{
    /* height: 125px; */
    width: 250px;
    position: absolute;
    top: 10px;
    left: 20px;
    bottom: auto;
    right: auto;
    transform: translate(-5%, -70%);
    max-width: 100%;
    /* max-height: 100%; */


}



#header-container-2 .logo-container{
    position: relative;
    width: 16%;
    
}

.header-2-links{
    display: flex;
    flex-wrap: wrap;
    /* gap: 200px; */
    /* align-items: end; */

}

.flex-1{
    flex: 1;
    text-align: center;
}





#header-container-1{
    display: flex;
    width: 100%;
    justify-content: end;
    padding-top: 0;
}

#header-container-1 div:nth-child(2){
    padding-top: 0;
}

#header-container-1 a:hover{
    color: rgb(21, 101, 192);
}

@media screen and (max-width: 1200px) {
    #header-container-1 {display: none;}
}

#header-container-2 .header-2-links{
    padding: 0;
}

.header-2-links a{
    color: rgb(37, 37, 37);
}

#header-container-2{
    /* display: flex; */
    /* height: 70px; */
    /* position: relative; */
    /* justify-content: space-between; */
}

/* mobile header under 1200px */

.mobile-header{
    display: flex;
    justify-content: space-between;
    display: none;
    margin: .7em .5em;
    margin: 1.7em .5em;
    padding: 0;

}

/* .mobile-header div{
    flex: 1;
} */

.mobile-header > div > a > .mobile-logo{
    width: 225px;
    position: absolute;
    top: 10px;
    left: 20px;
    bottom: auto;
    right: auto;
    transform: translate(-5%, 5%);
    max-width: 100%;

}


@media screen and (max-width: 500px) {
    .mobile-header > div > a > .mobile-logo{
        width: 160px;
        transform: translate(-10%, 18%);
    }

    .mobile-header{
        margin: 1.5em .5em;
    }
    
}

@media screen and (max-width: 330px) {
    .mobile-header > div > a > .mobile-logo{
        width: 140px;
        transform: translate(-13%, 30%);
    }
}


.mobile-header svg{
    height: 20px;
}

.flex{
    display: flex;
}

.flex-align-center{
    display: flex;
    align-items: center;
    
}

.contact-menu-container{
    gap: 5px;
    align-items: center;
}

.contact-menu-container button{
    border: none;
    background-color: rgb(198, 40, 40);
    border-radius: 50px;
    padding: .4em .8em;
    color: white;
    fill: white;
    cursor: pointer;
}

.contact-menu-container > .dropdown > button{
    padding: .6em .9em;
}

.contact-menu-container > button,
.contact-menu-container > .dropdown > button,
.hero-text > div > a,
.form-container button,
.mobile-services-list > a,
.mulch-mowing-container button,
.contact-menu-container > .dropdown > div > a{
    box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);

}

.contact-menu-container > button:active,
.contact-menu-container > .dropdown > button:active,
.hero-text > div > a:active,
.form-container button:active,
.mobile-services-list > a:active,
.mulch-mowing-container button:active,
.contact-menu-container > .dropdown > div > a:active{
    transform: scale(0.98);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}


.contact-menu-container > button > a > span{
    color: white;
}

@media screen and (max-width: 1200px){
    #header-container-2{ display: none;
    }
    .mobile-header {display: flex;}
    
}






a span{
    font-weight: 900;
    font-size: 1.08rem;
}



#hero-image-container{
    height: 700px;
    padding: 0;
    position: relative;
    border-top: 10px solid rgb(21, 101, 192);
    border-bottom: 10px solid rgb(21, 101, 192);
    
    /* margin-bottom: 100px; */


}

@media screen and (max-width:600px) {
    #hero-image-container{
        height: 515px;
    }
    
}

#hero-image-container img{
    object-fit: cover;
}

.hover-underline-animation{
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after{
    content: '';
    position: absolute;
    width: 50%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 25%;
    background-color: black;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after{
    transform: scaleX(1);
}

.hover-underline-animation.left::after{
    transform-origin: bottom right;
}

.hover-underline-animation.left:hover::after{
    transform-origin: bottom left;
}

@media screen and (max-width: 700px) {
    .hover-underline-animation:after{
        /* background-color: none;
        transition: none; */
        display: none;
    }
}

/* .link{
    padding: 0;
    background-color: white;
    border: none;
    font-weight: 900;
} */

.dropdown{
    position: relative;
    display: inline-block;
}

.dropdown-menu{
    display: none;
    
    position: absolute;
    min-width: 160px;
    z-index: 1;
    top: calc(100% + .1rem);
    left: 18%;
    /* padding: .75rem; */
    padding: 10px;
    box-sizing: content-box;
    border-radius: .25rem;
    background-color: rgb(198, 40, 40);
    color: white;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .6);
}

@media screen and (min-width:2000px) {
    .dropdown-menu{
        left: 24%;
    }
}

@media screen and (min-width: 2300px) {
    .dropdown-menu{
        left: 29%;
    }
}



.contact-menu-container .dropdown{
    padding: 0;
}

.contact-menu-container .dropbtn svg{
    pointer-events: none;
}

.mobile-dropdown-content{
    display: none;
    position: absolute;
    left: -280%;
    top: calc(100% + .3rem);
    min-width: 200px;
    overflow: auto;
    z-index: 1;
    background-color: rgb(21, 101, 192);
    border-radius: 35px;
    text-align: center;

}

.mobile-dropdown-content a{
    display: block;
    color: white;
    font-weight: bold;
    padding: .5em .6em;
    margin: .8em 0;
    border-radius: 45px;
    background-color: rgb(198, 40, 40);
}

/* 
.dropdown.active > .link + .dropdown-menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
} */

html{
    /* overflow-y: scroll; */
    scroll-behavior: smooth;
}

ul.dropdown-menu{
    list-style-type: none;
    /* display: flex;
    flex-direction: column;
    align-items: start; */
}

ul.dropdown-menu li{
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
}

ul.dropdown-menu li a:hover{
    color: rgb(37, 37, 37);
}

ul.dropdown-menu li:last-child{
    padding-bottom: 0;
    margin-bottom: 0px;
    border-bottom: none;
}



.dropdown-menu a{
    color: white;
}

.dropbtn{
    background-color: white;
    color: black;
    border: none;
    font-weight: 900;

}

.show {display: block;}





.hero{
    width: 100vw;
    height: 100%;
    filter: brightness(80%);
   
}

.mobile-hero{display: none;}

@media screen and  (max-width:600px){
    .desktop-hero{display: none;}
    .mobile-hero{display: block;}
}


.estimate-button:hover,
.phone-number-button:hover{
    background-color: rgb(21, 101, 192);
}

.hero-text h1{
    line-height: 1.2;
    font-size: clamp(3rem, .75rem + 10vw, 6rem);
    text-shadow: 1px 1px rgb(198, 40, 40);
    font-weight: bold;
    color: white;
    -webkit-text-stroke: 2px rgb(198, 40, 40);
    paint-order: stroke fill;
    
} 

/* min 3rem max 6rem */
/* min 22.5 max 52.5rem */

/* slope 3 / 30= 0.1 */
/* yaxis = .75 */
/* preffered = .75rem + 10*/


@media screen and (max-width: 500px) {
    .hero-text h1{
    -webkit-text-stroke: 1px rgb(198, 40, 40);

    }    
}


.hero-text{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* color: white; */
    width: 100%;
    text-align: center;
    /* display: flex;
    flex-direction: column;
    align-items: center; */

}

@media screen and (max-width: 1100px) {
    .hero-text{
        top: 50%;
    }
}

/* .hero-text div:nth-child(2){
    display: flex;x
} */

/* .hero-text h1{
    width: 100%;
} */

.hero-text div,
.banner div{
    gap: 1em;
    display: flex;
    justify-content: center;
}

.hero-text div a,
.banner div a {
     background-color: rgb(198, 40, 40);
     color: white;
     /* font-size: 1.2rem; */
     border-radius: 20px;
     border: none;
     padding: .4em 1.5em;
     /* text-align: center; */
     display: flex;
     justify-content: center;
     align-items: center;
}

/* .banner a button{
    display: inline;
} */

.hero-text div a svg,
.banner div a svg{
    height: 23px;
    fill: white;
    /* padding: 2px 0 0 0; */
    /* transform: translate(0, 3px); */
    margin-right: .3em;

}

/* .hero-text > div:nth-child(2) svg{
    transform: translate(0, 4.5px);
} */




@media screen and (max-width:600px) {
    .hero-text div a span,
    .banner div a span{
        font-size: .9rem;
        font-weight: 500;

    }

.hero-text div a,
.banner div a{
        padding: .4em 1.3em;
        /* margin: .3em; */
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;


}
.hero-text div a svg,
.banner div a svg
{
    height: 1.3rem;
    transform: translate(0, 0);

}

.hero-text{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-text h1{
        padding-bottom: 1rem;
    }

    .hero-text div,
    .banner div{
        display: flex;
        flex-direction: column;
        gap: .8rem;
    }

    .banner {
        text-align: center;
    }

  
}







/* .hero-text a:nth-child(2) button div, */
/* .hero-text > a:nth-child(3), */
/* .banner a button div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 5px;

} */

.hero-text a:nth-child(3){
    padding: .3em .8em;
}







/* .estimate-button{
    
}  */

.second-div-form-container{
    padding: 0 0 6em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    position: relative;

}

@media screen and (max-width: 1000px) {
    .second-div-form-container{
        padding: 0 0 4.5em 0;
        flex-direction: column;
    }
}

@media screen and (max-width: 500px) {
    .second-div-form-container{
        gap: 0;
        padding: 0;
    }
}



.map-image-container{
    margin: 0 50px 0 50px

}

.second-div-form-container{
    margin: 100px 50px 0 50px
    
}

@media screen and (max-width: 1200px) {
    .second-div-form-container{
        margin-top: 3em;

    }
}



@media screen and (max-width: 500px) {
    .second-div-form-container{
        margin: 4.5em 0 0 0;

    }
    
}









.second-div,
.third-div{
    padding: 4.5em 18.75em 6.25em 18.75em;
    text-align: center;
}

.third-div{
    font-weight: bold;
    margin: 0 50px;
    position: relative;
}


@media screen and (max-width: 1350px) {
    .third-div{
        padding: 4.5em 9em 6.25em 9em;
    }
}

@media screen and (max-width: 1100px) {
    .third-div{
        padding: 4.5em 4.5em 6.25em 4.5em;
    }
}



@media screen and (max-width: 1100px){
    .third-div{
        padding: 0 2em 0 2em;
        margin: 3.5em 0 5em 0;
    }

    .vertical-line{
        display: none;
    }
}

.second-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 6em 4.6875em;
    gap: 10px;

}

.company-desc{
    text-align: center;
    padding: 6.25em 18.75em 5em 18.75em;
}

.company-desc{
    margin: 0 3.125em ;
}

@media screen and (max-width: 1200px) {
    .company-desc{
        padding: 3em 9em;
        margin: 0 1.5em;
    }

    
}

@media screen and (max-width: 750px) {
    .company-desc{
        padding: 1.5em 4.5em;
        margin: 0 .75em;
    }

    
}

@media screen and (max-width: 500px) {
    .company-desc{
        padding: 1.5em 2em 0 2em;
        margin: 2em 0 3.5em 0;
    }
}






.company-desc svg,
 .tree-container .tree-outline{
    height: 40px;
    
    fill: red;
}


.company-desc h1{
    font-size: clamp(1.8rem, 1.2750075rem + 2.3333vw, 2.5rem);
    margin: 1.25em 0 .625em 0;
    line-height: 1.2;
    
}

@media screen and (max-width: 500px) {
    .company-desc h1{
        margin-top: .75em;
    }
}


/* min-font 1.8 max-font 2.5 */
/* 22.5 52.5 */
/*  .7 / 30 = .0233333333*/
/* 1.2750075 */
/*  */



.company-desc p{
    font-weight: bold;
}

.second-div p,
.third-div p,
.company-desc p{
    font-size: 1.125rem;
}

@media screen and (max-width: 840px){
    .second-div p,
    .third-div p,
    .company-desc p{
    font-size: 1rem;
    font-weight: 400;
}
    
}

.second-div{
    color: white;
    background-color: gray;
    position: relative;

}

@media screen and (max-width: 500px){
    .second-div{
        color: black;
        background-color: white;
    }
}

.child{
    flex: 1;
}



.third-div h2{
    line-height: 1.2;
    /* padding-bottom: .8em; */
    margin-bottom: .8em;
}

.third-div h2{
    /* font-size: clamp(1.8rem, 1.2750075rem + 2.3333vw, 2.5rem); */
    font-size: 2rem;
    
}










.second-div h2{
    font-weight: 900;
    text-shadow: 1px 1px rgb(21, 101, 192);
    -webkit-text-stroke: 2px rgb(21, 101, 192); 
    paint-order: stroke fill;
}

.second-div h2{
    font-size: 2.6rem;
}

@media screen and (max-width: 500px){
    .second-div{
        padding: 0;
    }
    .second-div h2{
        padding: 2.5em .75em 1em .75em;
        /* border-bottom: 3px solid rgb(21, 101, 192); */
        font-size: 1.8rem;
        line-height: 1.3;
        gap: 0;
        -webkit-text-stroke-width: 0;
        text-shadow: none;
    }

    .second-div p{
        padding: 0 2em 3.5em 2em;
    }



    
}

@media screen and (max-width: 370px) {
    .second-div h2{
        font-size: 1.5rem;
    }
}





.star-bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    fill: rgb(21, 101, 192);
}

.star-padding{
    padding: 10px;
    box-sizing: content-box;
}

.star-bottom-left{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 40px;
    fill: rgb(21, 101, 192);


}

.star-top-left{
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    fill: rgb(21, 101, 192);


}

.star-top-right{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    fill: rgb(21, 101, 192);

}

@media screen and (max-width: 500px) {
    .second-div svg{
        display: none;
    }

    
}

/* .star-color{
    fill: rgb(21, 101, 192);
} */



.form-container{
    /* padding: 100px 300px; */
    background-color: rgb(21, 101, 192);
    color: white;
    /* margin: 0 50px; */
    position: relative;
}


.vl{
    border-left: 2px solid rgb(198, 40, 40);
    height: 250px;
    position: absolute;
    left: 0;
    top: 25%;
    padding: 0;

}

.vl-2{
    border-left: 2px solid ;
    height: 450px;
    position: absolute;
    left: 5%;
    top: 20%;
    padding: 0;

}

.vl-3{
    border-left: 2px solid rgb(21, 101, 192);
    height: 700px;
    position: absolute;
    left: 10%;
    top: 15%;
    padding: 0;

}

.vl-4{
    border-left: 2px solid rgb(21, 101, 192);
    height: 700px;
    position: absolute;
    right: 10%;
    top: 15%;
    padding: 0;

}

.vl-5{
    border-left: 2px solid;
    height: 450px;
    position: absolute;
    right: 5%;
    top: 20%;
    padding: 0;


}

.vl-6{
    border-left: 2px solid rgb(198, 40, 40);
    height: 250px;
    position: absolute;
    right: 0;
    top: 25%;
    padding: 0;

}



.third-div div:nth-child(2){
    padding: 0;
}



.third-div ul{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 45px 45px 0 45px;
    margin-top: 20px;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    .third-div ul{margin-top: 0;}
}



.third-div li{
    list-style: none;
    font-size: 15px;
    padding: 5px;
    /* margin: 10px 0; */
    /* box-sizing: content-box; */
}

.third-div button{
    /* width: 100%; */
    text-align: left;
    /* height: 5rem; */
    padding: 1em 2em;
    border: none;
    background-color: rgb(198, 40, 40);
    color: white;
    border-radius: 40px;

}

.third-div button:hover{
    background-color: rgb(21, 101, 192);
}

.third-div li .services-title{
    -webkit-text-stroke: 1px black ;
    paint-order: stroke fill;

}


.star-container{
    align-self: center;
    padding: 0;
    display: flex;
    /* align-items: center;  */
}

.star-container svg{
    height: 20px;
}

.mobile-services-list{
    display: none;
}

.desktop-services-list > a > button{
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    .services-desc{display: none;}
    .third-div li{text-align: center;}
    .third-div ul{gap: .8em;}
    .third-div button{
        padding: .5em 1em;
    }

   
}

@media screen and (max-width: 600px) {
    ul.desktop-services-list{display: none;}
    .mobile-services-list{
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* padding: 45px 45px 0 45px; */
    margin-top: 2.5em;
    font-weight: bold;

}
.mobile-services-list div:nth-child(odd){
    background-color: rgb(198, 40, 40);
    color: white;
    padding: .9em;

}

.mobile-services-list{
    padding: 0;
}



#services-div{
    padding: 0;
    margin-bottom: 3.5em;
}

.third-div p,
.third-div h2{
    padding: 0 .5em 0 .5em;
}




}


/* .star-container-2{
    display: flex;
    justify-content: center;
    margin-top: 100px;
}

.star-container-2 svg{
    height: 50px;
} */


/* .red-star{
    fill: rgb(198, 40, 40);
} */

.blue-star{
    fill: rgb(21, 101, 192);
}

.contact-style{
    margin: 50px;
    /* color: black; */
}

@media screen and (max-width: 900px) {
    .contact-style{
        margin: 0;
    }
}

form{
    font-weight: bolder;

}

legend{
    font-size: 2rem;
}

.input-name-container .padding-right,
.input-container div .padding-right{
    /* padding-right: 10px; */
}


.input-container div{
    display: flex;
    gap: 10px;
    padding: 5px 0;
}

.input-container div div{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.input-container hr{
    margin: 10px 0 0 0;
    border: 1px solid rgb(21, 101, 192);
}

.input-container .hr-color-red{
    border: 1px solid rgb(198, 40, 40);
}

@media screen and (max-width: 600px) {
    .input-city-zip-container{
        display: flex;
        flex-direction: column;
    }
}


#mobile-last-name-input{
    display: none;

}

/* adjust form container to column */

@media screen and (max-width: 600px) {
    .input-name-container{
        display: flex;
        flex-direction: column;
    }
}



form input{
    font-weight: 400;
}



textarea{
    resize: vertical;
    font-weight: 400;
}

.required{
    color: red;
}

.form-discretion{
    padding: 10px;
}

.form-container button{
    padding: 5px 10px;
    margin: 10px;
    border-radius: 10px;
    border: none;
    font-weight: bold;
    color: white;
    background-color: red;
    cursor: pointer;
}




.fourth-div{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* gap: 20px; */
    margin-top: 0;
    padding-bottom: 50px;
}
.fourth-div-mobile{
    display: none;
}




@media screen and (max-width: 1350px) {
   

    .fourth-div{
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;

    }

     .fourth-div-desktop{
        display: none;
    }
}

@media screen and (max-width: 540px) {
    .fourth-div-mobile > div:nth-child(n + 4){
        display: none;
    }
}

.fourth-div div{
    display: flex;
    align-items: center;
    gap: 20px;
}

.vl-container{
    padding: 0;
    display: flex;
    align-items: center;
}

/* .vl-4th-container{
    border-left: 2px dashed rgb(21, 101, 192);
    height: 15px;
    padding: 0;
} */

.fourth-div-star{
    height: 40px;
}



.fourth-div svg{
    fill: rgb(198, 40, 40);
}

@media screen and (max-width: 1650px) {
    .fourth-div svg{display: none;}
}

.fourth-div div{
    padding: 0;
}
/* .fourth-div div:nth-child(odd){
    flex: 10;
    height: 250px;

} */

/* .fourth-div div:nth-child(even){
    flex: 1;
    /* display: flex;
    justify-content: center; 
    
}*/


.fourth-div img{
    height: 250px;
    width: 250px;
    border-radius: 50%;
}

.mulch-mowing-container{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0 6.25em 6.25em 6.25em;
    padding-top: 100px;
}



@media screen and (max-width: 1200px) {
    .mulch-mowing-container{
        flex-direction: column;
        text-align: left;
        margin: 0em 5em 6.25em 5em;


    }

    .mulch-mowing-container > div{
        padding: 10px;
}
    
}

@media screen and (max-width: 700px) {
    .mulch-mowing-container{
        text-align: center;
    }
      .mulch-mowing-container > div{
        padding: 0;
}
}

@media screen and (max-width: 925px) {
    .mulch-mowing-container{
        padding-top: 0;
        margin: 5em 0 2em 0;

    }

}

@media screen and (max-width: 600px) {
    .mulch-mowing-container{
        margin-top: 3.5em;
    }
}


@media screen and (max-width: 500px) {
    .mulch-mowing-container{
        padding: 0;
        /* margin-top: 2em; */
    }
}

/* .mulch-mowing-container > div{
    padding: 0;
} */



.mulch-mowing-container h2{
    font-weight: 800;
}


.mulch-mowing-container div img{
    width: 100%;
    height: 600px;
    object-fit: cover;
}

@media screen and (max-width:500px) {
    .mulch-mowing-container div img{
    height: auto;
};

}



.mulch-mowing-container div{
    flex: 1;
    box-shadow: 3px 3px 10px rgb(227, 227, 227);
}

.mulch-mowing-container p{
    padding-top: 20px;

}

.mulch-mowing-container button{
    border: none;
    padding: .7em;
    background-color: rgb(198, 40, 40);
    border-radius: 30px;
    margin: 20px 0;
    font-weight: bold;
    cursor: pointer;
}




.mulch-mowing-container button:hover{
    background-color: rgb(21, 101, 192);
}

@media screen and (max-width: 600px) {
    .mulch-mowing-container button:hover{
        background-color: rgb(198, 40, 40);
    }
}

.mulch-mowing-container button span{
    color: white;
}

.mulch-mowing-container button svg{
    height: 20px;
    fill: white;
    padding-right: 3px;
}

.mulch-mowing-container button span{
    display: flex;
    align-items: center;

}

.mobile-footer{
    display: none;
}


footer > .desktop-footer{
    background-color: rgb(21, 101, 192);


    border-top: 8px solid rgb(198, 40, 40);
    border-bottom: 8px solid rgb(198, 40, 40);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* gap: 200px; */
    padding: 4em;
    /* margin:  0 0 0; */
    /* -webkit-text-stroke: 3px rgb(198, 40, 40);
    paint-order: stroke fill; */


}

footer > div.contact-footer{
    border-top: 8px solid gray;
    border-bottom: 8px solid gray;

}





@media screen and (max-width: 700px) {
    footer > .desktop-footer{display: none;}
    .mobile-footer{display: flex;}
    footer > .mobile-footer{
        flex-direction: column;
        align-items: center;
        /* text-align: center; */
        background-color: rgb(198, 40, 40);
        border-top: .9em solid gray;
        padding: 1.3em;
        border-bottom: none;
        gap: .5em;
        /* margin: 0 0 4em 0; */
    }

    footer > .mobile-footer > a{
        padding: .4em 3.5em;
        background-color: rgb(21, 101, 192);
        border-radius: 30px;
    }

    .mobile-footer > div{
        flex: 1;
    }

    .mobile-footer div:nth-child(odd){
        flex: 1;
    }

    footer > div.about-mobile-footer{
        border-top: .9em solid white;
    }



    /* footer > .mobile-footer > a > span{
        color: ;
    } */
    /* footer > div > div{
        border-bottom: 2px solid gray;
    } */
    
}

.mobile-footer{
    /* background-color: rgb(198, 40, 40); */
}

.mobile-footer > a{
    background-color: white;
}

.mobile-footer svg{
    fill: gray;
}

.mobile-footer div:nth-child(even){
    /* background-color: rgb(198, 40, 40); */
    /* display: block; */
}




footer > div > div{
    flex: 1;
}

footer div a span{
    color: white;


}


@media screen and (max-width: 700px) {
    .mobile-footer a span{
        font-weight: 600;
    }
}

.mobile-footer div:first-child{
    padding-top: .75em;
}


.under-footer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    row-gap: 15px;
    background-color: rgb(21, 101, 192);
    padding: 6.25em;
    border-bottom: 8px solid rgb(198, 40, 40);
    border-top: 8px solid rgb(198, 40, 40);


}

.contact-under-footer{
    border-top: none;
    border-bottom: 8px solid gray;

}

.under-footer svg{
    height: 100px;
    fill: rgb(227, 227, 227);
}

@media screen and (max-width: 1200px) {
    

    .under-footer{
        padding: 6.25em 0;
    }

}

@media screen and (max-width: 1000px) {
    .under-footer svg{
        height: 70px;
    }
}

@media screen and (max-width: 700px ) {
    .under-footer{
        grid-template-columns: 1fr;
        padding: 0;
        border-top: .9em solid gray;
        border-bottom: .9em solid gray;
        
        /* background-color: white; */
        /* margin-top: 1em; */

    }

    .under-footer-email{
        grid-row: 2 / 3;

    }

    .under-footer-phone{
        grid-row: 4 / 5;
    }

    .under-footer svg{
        height: 60px;
        /* fill: red; */
    }


    

    .under-footer{row-gap: 0;}
    .under-footer{padding: 1em;}

    .about-under-footer{
        border-top: .9em solid white;
        border-bottom: .9em solid white;

    }

    .under-footer div{
        padding: 0;
    }

    .under-footer svg:nth-child(2),
    .under-footer svg:nth-child(3){
        margin-top: 2rem;
    }

   
    
}





.under-footer div{
    text-align: center;
}

.under-footer a{
    text-decoration: underline;
    color: white;

    font-weight: bold;
}

.under-footer p{
    /* color: rgb(227, 227, 227); */
    font-weight: bold;
    color: white;
    -webkit-text-stroke: 3px rgb(198, 40, 40);
    paint-order: stroke fill;
}

@media screen and (max-width: 700px) {
    /* .under-footer p, */
    .under-footer a{
        /* color: black; */
    }

    .under-footer{
        gap: 10px;
        padding: 2em 0 2em 0;
    }
}



.map-image-container{
    padding: 0;
    display: flex;
    justify-content: center;
}

.map-image{
    margin: 100px 100px ;
    width: 100%;
    object-fit: cover;
    max-width: 1750px;
}

@media screen and (max-width: 925px) {
    .map-image{
    margin: 2em 100px 3em 100px;

    }
}

.map-mobile{display: none;}

@media screen and (max-width: 600px) {
    .map-desktop{display: none;}
    .map-mobile{ display: flex;}
    .map-image-container{margin: 0 .5em;}
    .map-image{margin: 2.5em 0 4em 0;}

}




.divider{
    margin: 0 auto;
    width: 200px;
    border: 1px dashed rgb(21, 101, 192);
}

@media screen and (max-width: 500px) {
    .divider{width: 100px;}
}

.margin-top{
    margin-top: 115px;
}

.fixed-container{
    position: fixed;
    display: flex;
    gap: 15px;
    flex-direction: column;
    top: 7%;
    right: 1%;
}

.fixed-container button{
    border: none;
    background-color: rgb(198, 40, 40);
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 13px;
    transition: all 0.4s;
}

.fixed-container button:hover{
    transform: scale(1.3);

}





.fixed-container svg{
    height: 25px;
    fill: white;
}


@media screen and (max-width: 1200px) {

    .fixed-container {display: none;}
    
}

.star-divider-container{
    display: flex;
    justify-content: center;
}

.star-divider{
    height: 50px;
}

.services-margin-top{
    margin-top: 4rem;
}

@media screen and (max-width: 500px) {
    .services-margin-top{
        margin-top: 0;
    }

}


/* about page */

@media screen and (max-width: 450px) {
    .about-divider{border: 1px dashed gray;}
}

.about-header{
    border-bottom: 1em solid rgb(21, 101, 192);
}




.margin-bottom{
    margin-bottom: 100px;
}



.about-div-1 > div:first-child > div > a{
    border: none;
    border-radius: 20px;
    padding: .65rem .8rem;
    text-align: center;
}

.about-div-1 > div:first-child > div > a:first-child,
.about-div-1 > div:first-child > div > a:nth-child(2){

    margin-right: 3px;
}

.button-blue,
.button-gray,
.about-div-2{
    color: white;
}

.button-red{
    background-color: rgb(198, 40, 40);
    color: white;

}

.button-gray{
    background-color: gray;
}

/* .about-header{
    margin: 20px 0;
    font-size: 40px;

} */

.about-div-1{
    padding: 8em 12.5em 3.125em 15.625em;

    /* background-color: rgb(198, 40, 40); */
    font-weight: bold;
    display: flex;
    gap: 3em;
}
/* 
@media screen and (max-width: 800px) {
    .about-div-1{
        padding: 1.5em 2em;
    }
} */

.about-div-1 h1{
    margin: 45px 0 25px 0;
    font-size: 40px;
    line-height: 1.2;
}


.about-div-1 div{
    padding: 0;
}

.about-logo{
    /* height: 125px; */
    width: 250px;
}



.about-div-1 div:nth-child(2){
    align-self: center;

}



@media screen and (max-width: 1100px) {
    .about-div-1{flex-direction: column;}
}


@media screen and (max-width: 1000px) {
    .about-div-1{
        padding: 5em 9em 1em 9em;
    }

    .about-div-1 h1,
    .about-div-1 p{
        text-align: center;
    }
}




@media screen and (max-width: 650px) {
    .about-div-1{
        padding: 4em 3em .5em 3em;
    }

    .about-div-1 p{
        font-weight: 400;
    }
}


@media screen and (max-width: 500px) {
    .about-div-1{
        padding: 4em 1.5em .5em 1.5em;
    }

    .about-logo{ width: 160px;}
}






.about-div-2{
    /* background-color: rgb(21, 101, 192); */
    margin: 9.375em 6.25em 7.8125em 6.25em;
    display: flex;
    font-weight: bold;

}

@media screen and (max-width: 950px) {
    .about-div-2{margin: 6em 4.5em 4em 4.5em;}
}

@media screen and (max-width: 750px) {
    .about-div-2{margin: 4em 3.25em 4em 3.25em;}
}

@media screen and (max-width: 600px) {
    .about-div-2{margin: 2em .5em 4em .5em;}
}

@media screen and (max-width: 450px) {
    .about-div-2{margin: 2em 0 0 0;}
    .about-div-2{font-weight: 400;}
}

.about-div-2 div:first-child{
    background-color: rgb(21, 101, 192);
}

.about-div-2 div{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    position: relative;
}

.about-div-2 ul{
    text-align: left;
}

.about-div-2 ul > li{
    padding-bottom: .5rem;
}

.about-div-2 svg{
    fill: rgb(198, 40, 40);
}


.about-div-2 div:first-child{
    padding: 3rem 2rem;
}


.about-div-2 h2,
.about-div-3 h2{
    font-size: 40px;
    margin-bottom: 20px;
    line-height: 1.2;
}

@media screen and (max-width:1200px) {
    .about-div-2 div:first-child{
        background-color: white;
        color: black;
    }

    .about-div-2{
        margin-top: 0;
    }
}

@media screen and (max-width: 500px) {
    .about-div-2 div:first-child{
        background-color: rgb(21, 101, 192);
        color: white;
        margin-top: 2em;
    }
}


.about-div-3 h2{
    text-shadow: 1px 1px rgb(21, 101, 192);
    -webkit-text-stroke: 2px rgb(21, 101, 192);
    paint-order: stroke fill;
}

@media screen and (max-width: 1200px) {
    .about-div-3 h2{
        text-shadow: none;
        -webkit-text-stroke-width: 0;

    }
}

.about-div-2 ul,
.about-div-3 p{
    font-size: 17px;
    padding: 0 50px;
}

@media screen and (max-width: 1200px) {
    .about-div-2 div:first-child{padding: 2em;}
}

@media screen and (max-width: 450px) {
    .about-div-2 div:first-child{
        padding: 2em 0 2em 0;
        margin-bottom: 3.5em;
    }
}


.fourth-div{
    margin-top: 150px;
    margin-bottom: 50px;
}

@media screen and (max-width: 800px) {
    .fourth-div{margin: 2em 0;}
}


.about-div-3{
    text-align: center;
}


.about-div-2 div,
.about-img-container,
.about-div-3 div{
    flex: 1;
}

.about-img-container{
    padding: 0;
    max-height: 800px;
}

.about-div-2 img,
.about-div-3 img{
    height: 100%;
    width: 100%;
}

@media screen and (max-width:1300px) {
    .about-div-2 img,
    .about-div-3 img{
    max-width: 100%;
}
}



@media screen and (max-width: 450px) {
    .about-div-2 img{display: none;}
    .about-div-3 img{display: none;}
}

.about-div-3{
    margin: 125px 100px 100px 100px;
    display: flex;
}

@media screen and (max-width: 1200px) {
    .about-div-3{
        margin-top: 4em;

    }    
}

.about-div-3 div:nth-child(2){
    /* background-color: rgb(198, 40, 40); */
    
}

.about-div-3 > div:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    font-weight: bold;
    position: relative;
    background-color: gray;
    color: white;
}

@media screen and (max-width: 1200px) {
    .about-div-3 > div:nth-child(2){
        background-color: white;
        color: black;
    }
}





.about-div-2,
.about-div-3{
    padding: 0;
}

@media screen and (max-width: 950px) {
    .about-div-3{margin: 1em 4.5em 6em 4.5em;}
}

@media screen and (max-width: 750px) {
    .about-div-3{margin: 2em 3.25em 4em 3.25em;}
}

@media screen and (max-width: 600px) {
    .about-div-3{margin: 2em .5em 0 .5em;}
}

@media screen and (max-width: 450px) {
    .about-div-3{
        margin: 3em 0 0 0;
    }

    .about-div-3 > div:nth-child(2){
        font-weight: 400;

    }

}

@media screen and (max-width: 1200px) {
    .about-div-3 div:nth-child(2){
        padding: 2em;
        margin-bottom: 4em;
    }
}

@media screen and (max-width: 450px) {
    .about-div-3 div:nth-child(2){padding: 0 0 2em 0;}
    .about-div-3 p {
        padding: .8em;
    }
    .about-div-3 h2{
        margin: 0 0 .5em 0;
    }
}

div.about-div-3-mobile{display: none;}

@media screen and (max-width: 1200px) {
    .about-div-3-desktop{display: none;}

    div.about-div-3-mobile{display: block;}

    .about-div-2,
    .about-div-3{
        flex-direction: column;
        /* gap: 2em; */
    }

    .about-div-2{
        gap: 3em;
    }

    .about-div-2 svg,
    .about-div-3 svg{
        display: none;
    }    

    .about-div-2 img,
    .about-div-3 img{
        max-height: 500px; 
    }
}

@media screen and (max-width: 450px){
    .about-div-2{
        gap: 0;
    }
}





/* mowing page */
.services-card,
.services-card-2{
    display: flex;
    align-items: center;
    padding: 0 6.25em 0 6.25em;
    /* background-color: rgb(21, 101, 192); */
    /* color: white; */

}

@media screen and (max-width: 1400px) {
    .services-card,
    .services-card-2{
        padding: 3em 3em 0 3em;
    }
}

@media screen and (max-width: 500px) {
    .services-card-2,
    .services-card{
        padding: 3em 1.5em 0 1.5em;
    }
   

}

/* .services-card-2 > div:nth-child(3){
        display: none;
    } */

    @media screen and (max-width: 1100px) {
        .banner > svg{
            display: none;
        }
    }

@media screen and (max-width: 1200px) {
    .services-card{
        flex-direction: column;
    }

    .services-card-2{
        flex-direction: column-reverse;

    }

    /* .services-card-2 > div:nth-child(1){
        display: none;
    }

    .services-card-2 > div:nth-child(3){
        display: block;
    } */
}



.services-header{
    border-bottom: 15px solid rgb(21, 101, 192);
}



.services-card div,
.services-card-2 div{
    flex: 1;
    /* justify-self: end; */
    padding: 50px;
}

.services-card div:first-child{
    padding: 25px 0 50px 0;
}

.services-card div:first-child > *{
    /* margin: 1em 0; */
}


@media screen and (max-width: 1100px) {
    .services-card div:first-child{
        padding: 0;
    }
}

/* .services-card  */
div.service-buttons-container{
    padding: 0;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    /* gap: 3px; */
    /* align-items: center; */
}



.service-buttons-container a{
    border: none;
    border-radius: 20px;
    padding: .45rem .8rem;
    font-weight: bold;
}



.services-card div:nth-child(2){
    display: flex;
    justify-content: center;
    padding: 50px 0 50px 50px;
    

}

@media screen and (max-width: 1200px) {
    .services-card div:nth-child(2),
    .services-card-2 div:nth-child(1){
        padding: 50px 0;
    }


}


.services-card img,
.services-card-2 img{
    width: 500px;
    /* height: 500px; */
    box-shadow: 3px 3px 10px rgb(33, 33, 33);
    
}

@media screen and (max-width: 800px) {
    .services-card img,
    .services-card-2 img{
    width: 500px;
    /* height: 400px; */
}
    img.img-taller{
        width: 450px;
        /* height: 500px; */

}
}

@media screen and (max-width: 600px) {
    .services-card img,
    .services-card-2 img{
    width: 400px;
    /* height: 300px; */
}
}

@media screen and (max-width: 500px) {
    .services-card img,
    .services-card-2 img{
    width: 350px;
    /* height: 250px; */
}

}

@media screen and (max-width: 370px) {
    .services-card img,
    .services-card-2 img{
    width: 300px;
    /* height: 200px; */
}
}



.services-card h1{
    padding: 35px 0 20px 0;

}

.services-card h2,
.services-card p,
.services-card-2 h2,
.services-card-2 p{
    padding-bottom: 10px;
}

@media screen and (max-width: 500px){
    .services-card p{
        padding-bottom: 25px;
    }
    
}

.services-card p,
.services-card-2{
    font-weight: 500;
    font-size: 15px;
}


.banner{
    background-color: rgb(198, 40, 40);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 75px;
    border-bottom: 12px solid gray;
    border-top: 12px solid gray;
}

@media screen and (max-width: 700px) {
.banner{
    padding: 50px 0;
    gap: 10px;
}
}

.banner  > div > a {
    background-color: rgb(21, 101, 192);
    color: white;
}

.banner > svg{
    height: 50px;
    position: absolute;
    fill: rgb(21, 101, 192);
}

.banner > svg:first-child{
    left: 15%;
    top: 40%;
}

.banner > svg:nth-child(2){
    top: 40%;
    right: 15%;
}

.banner p{
    color: white;
    font-weight: bold;
    font-size: 30px;
}


@media screen and (min-width: 1900px){
    .services-card-2 > div:first-child{
        display: flex;
        justify-content: center;
    }
}


.services-card-2 {
    margin-top: 75px;
}
 
@media screen and (max-width: 1000px) {
    .services-card-2{
        margin: 0;
    }
}

@media screen and (max-width: 800px) {
    .services-card-2 div:nth-child(2){
        padding: 50px 0 0 0;
        text-align: center;
    }


        


    .services-card-2 div:nth-child(2) > p{
        font-size: 1em;
        font-weight: 500;
    }
    
}

@media screen and (max-width: 500px){
    .services-card-2 div:nth-child(2){
        padding: 0;
    }
}


.services-card-2 p{
    font-size: 18px;
}

.services-card-2 h2{
    font-size: 2.5rem;
}

@media screen and (max-width: 500px) {
    .services-card-2 h2{
        font-size: 2rem;
    }
}



.image-container{
    background-color: gray;
    margin: 75px 0 0 0;
    /* padding: 0 0 50px 0; */
    text-align: center;
}

.about-image-container{
    margin-bottom: 100px;
}

@media screen and (max-width: 800px){
    .image-container{
        margin: 0;
    }

    .fourth-div{
        padding-bottom: 50px;
    }
}

.image-container svg{
    fill: rgb(21, 101, 192);
}



.image-container > div{
    margin: 0;
    padding-top: 50px;
}

.image-container h2{
    padding-top: 50px;
    padding-bottom: 10px;
    color: white;
    font-size: 30px;
}

.image-container p{
    color: white;
    font-weight: 700;
    padding: 0 .5em;
}

@media screen and (max-width: 500px) {
    .image-container p{
        font-weight: 500;
    }
}



.image-container > div.fourth-div img:hover{
    opacity: 50%;
}

@media screen and (max-width: 500px) {
    .image-container > div.fourth-div img:hover{
        opacity: 100%;
    }

}

.tree-container{
    display: flex;
    justify-content: center;    
    margin-top: 50px;
}

.tree-container .tree-outline{
    height: 60px;
}


.text-align-center{
    text-align: center;
}

.trusted-service-h2{
    font-size: 2em;
    padding: 10rem 0 1.5rem 0;
}

@media screen and (max-width: 800px) {
    .trusted-service-h2{
        padding-top: 5rem;
    }


}

.trusted-service-p{
    text-align: center;
    padding: 1.5rem 20rem 10rem 20rem;
    font-weight: 700;
}

@media screen and (max-width: 1200px) {
    .trusted-service-p{
        padding: 1.5em 15em 10em 15em ;
    }
}

@media screen and (max-width: 1000px){
    .trusted-service-p{
        padding: 1.5em 10em 10em 10em;
    }
}

@media screen and (max-width: 800px) {
    .trusted-service-p{
        padding: 1.5em 5em 5em 5em;
    }

   
    
}

@media screen and (max-width: 550px) {
    .trusted-service-p{
        padding: 1.5em 2.5em 5em 2.5em;
        font-weight: 500;
    }
}

@media screen and (max-width: 400px) {
    .trusted-service-p{
        padding: 1.5em 1em 5em 1em;
    }
}

.color-red{
    color: rgb(198, 40, 40);
}


/* mulching page */

.services-card > div > h2{
    line-height: 1.2;
}


/* leaf clean up page */
img.img-taller{
    width: 550px;
    /* height: 600px; */
}

@media screen and (max-width: 800px) {
    img.img-taller{
        width: 450px;
        /* height: 500px; */

}
}

@media screen and (max-width: 600px) {
    img.img-taller{
        width: 350px;
        /* height: 400px; */
    }

}

@media screen and (max-width: 500px) {
    img.img-taller{
        width: 300px;
        /* height: 350px; */
    }

}



/* trimming page */

img.img-taller-2{
    width: 550px;
    /* height: 700px; */
}


@media screen and (max-width: 800px) {
    img.img-taller-2{
        width: 450px;
        /* height: 600px; */
    }  
}

@media screen and (max-width: 600px) {
        img.img-taller-2{
            width: 350px;
            /* height: 500px; */
        }

}

@media screen and (max-width: 500px) {
        img.img-taller-2{
            width: 300px;
            /* height: 450px;/ */
        }

}



.gallery-buttons{
    margin: 3em 1.5em;
}


@media screen and (max-width:500px) {
    .gallery-buttons{
        margin: 2em 1em;
}

}

.gallery-container{
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    grid-auto-rows: 400px ;
    gap: 10px;
    /* column-gap: 10px; */

    /* padding: 0; */
}

.gallery-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and  (max-width: 500px){
    .gallery-container{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 400px;

    }
}

.coming-soon-header{
    font-size: 5em;
    text-align: center;
    margin-bottom: 1em;
}

.logo-hidden{
    display: none;
}

.dialog-container{
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */

}

dialog{
    /* text-align: center; */
    /* background-color: red; */
    padding: 3rem 4rem;
    border: 2px solid gray;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

dialog::backdrop{
    /* background-image: linear-gradient(150deg, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); */
    background-image: linear-gradient(150deg, rgb(198, 40, 40), rgb(227, 227, 227), rgb(21, 101, 192));
    opacity: .7;
}

dialog > button{
    color: white;
    background-color: rgb(198, 40, 40);
}

dialog > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5em;

}