/*Global----------------------------------------------------------------*/
:root{
    font-size: 18px;
}
html{
    scroll-behavior: smooth;
}
.hidden{
    display: none;
}
.display-md{
    display: none;
}
.container {
    display: inline-block;
    cursor: pointer;
}
.center{
    text-align: center;
} 
.flex{
    display: flex;
    gap:var(--gap,1rem);
} 
img{
    display: block;
    width:100%; 
}
.img-shadow{
    -moz-box-shadow:4px 8px 15px rgba(62, 53, 21,.45);
    -webkit-box-shadow:4px 8px 15px rgba(62, 53, 21,.45);
    box-shadow: 4px 8px 15px rgba(62, 53, 21,.45);
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #3E3515;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
background-color:#E4E1CF;
}
  
.change .bar2 {opacity: 0;}

.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
background-color:#E4E1CF;
}
.tagline{
    color:#B50404;
    display: none;
    font-size: 1rem;
}

.button{
    background-color: #B50404;
    padding:.5em 2em;
    color:#E4E1CF;
    text-decoration: none;
    border:3px solid #EB224C;
}
.button:hover{
    background-color: #EB224C;
    border:3px solid #B50404;
    
}
.button2{
    background-color: rgb(0, 155, 75);
    padding: .75em 2em;
    color:#E4E1CF;
    text-decoration: none;
    border-radius: .5em;
    border:2px solid #E4E1CF;
    font-size: 1rem;
    
}
.button2:hover{
    background-color: #e0ab27;
    border:2px solid #e0ab27;
    color: #E4E1CF;
    font-weight: 600;
    font-size: 1rem;
    filter: drop-shadow(4px 12px 10px rgb(0, 42, 20,.4));
}
h3{
    font-size: clamp(1.5rem, 3vw,2.2rem);
}
p{
    line-height:2em;
}
body{
    font-family: 'Open Sans', sans-serif;
    margin:0; padding:0;
    background-color:#f8f5ed;
    box-sizing: border-box;
    overflow-x: hidden;
}
.sr-only{
    display: none;
}

/*Primary Header */
header{
    justify-content: space-between;
    position: fixed;
    top:0;
    width:100%;
    z-index: 100;
}
.logo{
   width:clamp(150px,20vw,300px);
   padding-right:3em;
   filter:drop-shadow(4px 8px 15px rgba(62, 53, 21,.45)); 
}
/*Primary Navigation */
.primary_navigation{
    list-style: none;
    padding: 0;
    margin:0; 
}
.mobile-nav-toggle{
    display:none;
}
.primary_navigation a{
    margin-inline-end: 1em;
    text-decoration: none;
}
.primary-header-container{
    padding:.5em;
    background: #3E3515;
    background:linear-gradient(to top, #c3bfb2 0%, #fffbe7 100%);
    filter: drop-shadow(0 4px 7px rgba(90, 77, 30, 0.4));
}
.hero{
    background-image:url(../images/hero_entry-414x761-small.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 85vh;
    position: relative;
}

.hero-container{
  
    width:100%;
    height:auto;
    position: absolute;
    bottom:0;
}
.overlay-content{
    padding:0 2em;
    
}
.headline{
    color:#f8f5ed;
    filter: drop-shadow(2px 2px 8px rgba(62,53,21,.9));
    font-size: clamp(1.9rem, 5vw, 3rem);
    width:100%;max-width:900px;
    
}
.hero-res{
    background-image:url(../images/hero_rear-414x761-small.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: min(85vh, 1200px);
    position: relative;
    top:0;
}
.hero-com{
    background-image: url(../images/hero_grass-414x761-small.jpg);
}
.overlay-content-container{
    width:100vw;
    height:50%;
    position: absolute;
    bottom: 0;
}
.overlay-content-res{
    position: absolute;
    bottom: 0;
    margin:0 max(1.5em, 10%);
    margin-bottom:2em;
}

.overlay_btn,.submit{
    margin-bottom:4em;
    
}

.banner{
    background-image: linear-gradient(to bottom, rgb(0, 155, 75)0%, rgb(0, 71, 35)100%);
 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.banner h3{
    color:#E4E1CF;
}

.about,.work,.services {
    padding:max(1em, 5vw);
    max-width: 2000px;
    margin:0 auto;
}
.about{
    margin-bottom: 3em;
}
.main_container{
    padding-bottom:max(1em, 4vw);
}
.about_left{
    margin:0 auto;
    padding-bottom:2em;
    width:100%;
    max-width:715px;
}
.about_right{
    display: flex;
 
}
.about_right img{
    height: auto; width: 100%;
    margin:0 auto;
    max-width: 750px;

}   

.services h3, .work h3{
    max-width: min(100%,700px);
    margin: 0 auto;
    padding:max(1em,5vh) 0;
    text-align: center;
}
.about_left h3{
    text-align: center;
}

h4{
    color:#f8f5ed;
}
.service_p{
    max-width: min(100%, 800px);
    margin:1.5em auto;
    
}

/*Service Icons*/
.service_icons{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0; 
}
.service_icons li{
    padding:.5em;
    list-style: none;
}
.service_icons li a{
    text-decoration: none;
}
@media (hover:none){
    .icon{
        width:100%; height:10vh;
        padding:0;
        margin:0 auto;
        background-image: url(../images/JMC-icon_residential-1.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .icon:hover{
        background-image: url(../images/JMC-Icon_residential_hover-2.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    
    }
    .icon-commercial{
        padding:0;
        margin:0 auto;
        background-image: url(../images/JMC-icon_commercial.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
     
    }
    .icon-commercial:hover{
        background-image: url(../images/JMC-icon_commercial_hover.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    }
    .icon-hardscape{
        padding:0;
        margin:0 auto;
        background-image: url(../images/JMC-icon_hardscape.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    
    }
    .icon-hardscape:hover{
        background-image: url(../images/JMC-icon_hardscape_hover.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    
    }
    .icon-snow{
        width:100%; height:10vh;
        padding:0;
        margin:0 auto;
        background-image: url(../images/snowflake.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .icon-snow:hover{
        animation: spin 10s linear infinite;
    }
    @keyframes spin{
        0%{
            transform: rotate(0deg);
          
        }
        25%{
            transform: rotate(90deg);
        }
        50%{
            transform: rotate(180deg);
           
        }
        75%{
            transform: rotate(270deg);
        }
        100%{
            transform: rotate(360deg);
            
        }   
    }
}
@media (pointer:coarse){
    .icon{
        background-image: url(../images/JMC-Icon_residential_hover-2.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    
    }

    .icon-commercial{
        background-image: url(../images/JMC-icon_commercial_hover.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    }

    .icon-hardscape{
        background-image: url(../images/JMC-icon_hardscape_hover.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    
    }

    .icon-snow{
        animation: spin 10s linear infinite;
    }
    @keyframes spin{
        0%{
            transform: rotate(0deg);
          
        }
        25%{
            transform: rotate(90deg);
        }
        50%{
            transform: rotate(180deg);
           
        }
        75%{
            transform: rotate(270deg);
        }
        100%{
            transform: rotate(360deg);
            
        }
    
       
    }
}
@media (hover:hover){
    .icon{
        width:100%; height:10vh;
        padding:0;
        margin:0 auto;
        background-image: url(../images/JMC-icon_residential-1.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .icon:hover{
        background-image: url(../images/JMC-Icon_residential_hover-2.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;

    }
    .icon-commercial{
        padding:0;
        margin:0 auto;
        background-image: url(../images/JMC-icon_commercial.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    
    }
    .icon-commercial:hover{
        background-image: url(../images/JMC-icon_commercial_hover.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;
    }
    .icon-hardscape{
        padding:0;
        margin:0 auto;
        background-image: url(../images/JMC-icon_hardscape.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;

    }
    .icon-hardscape:hover{
        background-image: url(../images/JMC-icon_hardscape_hover.png);
        background-position:bottom;
        background-repeat: no-repeat;
        margin:0 auto;

    }
    .icon-snow{
        width:100%; height:10vh;
        padding:0;
        margin:0 auto;
        background-image: url(../images/snowflake.png);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .icon-snow:hover{
        animation: spin 10s linear infinite;
    }
    @keyframes spin{
        0%{
            transform: rotate(0deg);
        
        }
        25%{
            transform: rotate(90deg);
        }
        50%{
            transform: rotate(180deg);
        
        }
        75%{
            transform: rotate(270deg);
        }
        100%{
            transform: rotate(360deg);
            
        }
    }
}
.icon_frame{
    color:#3E3515;
    background-image: linear-gradient(to bottom, rgb(255, 254, 246)0%, rgb(234, 231, 224)100%);
    border: 2px solid rgb(235, 231, 221);
    border-radius: 10px;
    filter:drop-shadow(4px 10px 10px rgba(62, 53, 21,0.2));
    padding:.5em 1em;
}
.icon_frame:hover{
    border: 2px solid  rgb(235, 231, 221);
    border-radius: 10px;
    filter:drop-shadow(2px 2px 4px rgba(62, 53, 21,0.6));
    background-image: linear-gradient(to top, rgb(255, 254, 246)0%, rgb(235, 231, 221)100%);
}


.icon_frame p{
    font-size: 1.2rem;
    margin:0;
}

.icon_frame:hover{
    color:#B50404;
    font-weight: 600;
}

.service_list_title{
    font-size: clamp(1.3rem, 2vw,1.7rem);
    text-align: center;
}
.service_list{
    width:80%;
    max-width: 800px;
}
.service_list li{
    padding:.5em;
}
.icon_frame p{
    text-align: center;
}
.testimonies{
    background-image: linear-gradient(to bottom, rgb(33, 36, 26)0%, rgb(64, 71, 52)40%,rgb(64, 71, 52)60%,rgb(33, 36, 26)100%);
}
.testimonies h3{
    color:#E4E1CF;
    text-align: center;
    padding:2em 0 1.5em 0;
    max-width:80%; 
    margin: 0 auto;
}
.carousel_row{
    align-self: center;
    height:500px;
    justify-items: center;
    overflow:hidden;
}
.lg-screen-testimonies{
    display: none;
}
.carousel{
    position: relative;
    margin:0 auto;

    height:400px;
    width:100%;
}
.carousel_track-container{
    height:100%;
    position: relative;
}
.carousel_track{
    
    list-style: none;

    margin:0 auto;
    padding:0;

    width:100%; max-width:1400px;

    transition: transform 250ms ease-in;
   
}
.carousel_slide{
   position: absolute;
   top:0;
   bottom:0;
   width:100%;


}
.hidden{
    display: none;
}

.card{
    background-image: linear-gradient(to top, rgb(255, 254, 246)0%, rgb(225, 220, 210)100%);
    width:min(200px, 70%);height:300px;
    filter:drop-shadow(4px 10px 15px rgb(5, 5, 4));
    margin:0 auto;
    line-height: 1em;
    padding:2em;
}

.card p{
    line-height: 1.5em;
}
.rating-stars{
    text-align: center;
    color:#e0ab27;
    font-size: 1.5em;
}
.carousel_button{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    background: transparent;
    border:0;
    cursor: pointer;
    z-index: 1001;  
}

.carousel_button--left{
    left:10px;
}

.carousel_button--right{
    right:2%;   
}
.carousel_nav{
    display: flex;
    justify-content: center;
}
.carousel_indicator{
    border:0;
  
    width:35px;
   
    background-color:rgba(255, 251, 231,.5); 

    cursor: pointer;
}
.carousel_indicator.current-slide{
    background-color:#009B4B;

}
.is-hidden{
    display: none;
}


.work p{
    margin:0 auto;
    padding-bottom:2em;
    width:100%;
    max-width:715px;
}
.photo_grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:1em;
    padding:min(1em, 3vw);
    max-width: 900px;
    margin:0 auto;
}
.photo_grid img:hover, .photo_grid img:active{
    transform: scale(1.1);
    cursor: pointer;
}


.img1{
    grid-column: 1/2;
    grid-row: 1/2;
}
.img2{
    grid-column: 2/3;
    grid-row: 1/2;
}
.img3{
    grid-column:1/2;
    grid-row: 2/3;
}
.img4{
    grid-column: 2/3;
    grid-row: 2/3;
}
.img5{
    grid-column: 1/2;
    grid-row: 3/4;
}
.img6{
    grid-column: 2/3;
    grid-row: 3/4;
}
.img7{
    grid-column: 2/3;
    grid-row: 1/2;
}
.modal{
    display: none;
    position: fixed;
    z-index: 1;
   
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color:rgba(0,0,0,.7);
}
.modal-content{
    margin:10em auto;
    padding:0;
    width:90%;
    max-width: 900px;
    position: relative;
    filter: drop-shadow(4px 4px 15px rgba(0,0,0,.8));
    
}
.close{
    color:#fffbe7;
    position: relative;
    padding:16px;
    float:right;
    font-size: 2em;
    font-weight: bold;
    z-index: 1001;
}
.close:hover, .close:focus{
    background-color: #404734;
    padding:16px;
    text-decoration: none;
    cursor: pointer;
}
.modal-slide{
    display: none;
    width:100%; height:auto;
}
/* Next & previous buttons */
.modal-prev,
.modal-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width:25px;
  padding: 16px;
  color: #fffbe7;
  font-weight: bold;
  font-size: 2em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.modal-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.modal-prev:hover,
.modal-next:hover {
  background-color: #404734;
}
.modal_caption{
    color:#fffbe7;
    text-align: center;
    background-color:#404734;
    padding-top:1em;
    font-size: 1rem;
}



.success-img-placeholder{
    max-width:125px;max-height:125px;
   width:100%;
    margin:0 auto;
}
.success_content{
    width:100%;
    max-width: 600px;
    margin:0 auto;
    padding:max(6em, 7vw) 0; 
}

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


.success{
    min-height: 60vh;
}
.contact-form{
    padding:max(1em, 5vw);
    max-width: 2000px;
    margin:4em auto;
}


.footerLogo{
    filter: drop-shadow(2px,2px,3px rgba(224, 172, 38,.4));
    margin: 0 auto;
    width:clamp(125px,18vw,250px);
}
footer{
    background-image: linear-gradient(to bottom, rgb(64, 71, 52)0%, rgb(33, 36, 26)100%);
    color:#fffbe7;
    overflow-x: hidden;
    margin-bottom: 0;padding-bottom: 0;
}
footer h3{
    text-align: center;
}
.footer_top{
    padding:max(1em, 3vw);
}
.footer_bottom{
    padding:max(1em, 2vw);

}
.contact_footer{
    width:min(100%,75vw);

}

.form_info{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding-bottom:2em;
}
form{
    width:100%;
    max-width:600px;
    margin:0 auto;
}
#name, #email, #number, #subject, #message{
   
    width:90%;
    padding:1em 1em;
    margin:-1em 0 2em 0;
    background-color:#fffbe7;
    box-shadow: inset 1px 1px 4px 4px #b1afa5;
    border:1px solid rgba(61, 52, 21,.7);
    color:#3E3515;
    font-size: 1rem;
    border-radius: 5px;
    
}
#name:hover, #email:hover, #number:hover, #subject:hover, #message:hover{
    outline: 2px solid #009B4B;
    outline-offset: -6px;
    
}
#name:focus,#email:focus, #number:focus,#subject:focus, #message:focus{
    outline: 2px solid #009B4B;
    outline-offset: -4px;

}

.textarea, textarea{
    font-family:  'Open Sans', sans-serif;
    border:none;
    font-weight: 500;
}
.submit{
    margin:0 auto;
    box-shadow: 0 0 0 0;
    padding:.5em 2em;
    font-size: 1rem;
}
.submit_container{
    width: fit-content;
    margin:0 auto;

}
  input[type='checkbox'] {
    display: none;
  }

  .lbl-toggle {
    display: block;
  
    font-size: 1rem;
    text-align: center;
  
    padding: .75em 2em;
    color: #f8f5ed;
    background: transparent;
    border:2px solid #f8f5ed;
    border-radius: .5em;
    cursor: pointer;
  
  
    
    transition: all 0.25s ease-out;
    max-width:250px;
    margin:0 auto;
    margin-bottom:2em;
  }
  
  .lbl-toggle:hover,.lbl-toggle:checked {
    background-color: #e0ab27;
    border:2px solid #e0ab27;
    font-weight: 600;
    filter: drop-shadow(4px 12px 10px rgb(0, 42, 20,.7));
   
  }
  
  .lbl-toggle::before {
    content: ' ';
    display: inline-block;
  
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
  
    transition: transform .2s ease-out;
  }

  .toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
    
  }
  
  .collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
  }
  
  .toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 110vh;
  }
.bi{
    cursor: pointer;
}
.social, .link, .contact_footer{
    list-style: none;
   
}
.link li{
    padding:.5em;
}
.link{
   margin:0;padding:1em 0;
}
.link li a{
    text-decoration: none;
    color:#E4E1CF;
   
}
.link li a:hover{
   color:#B50404;
   font-weight: 600;
}
.social{
    align-self: center;
    
}
.social li{
    display: inline;
    padding-inline-start: 2em;
    
}
.mailto{
    text-decoration: none;
    color:#E4E1CF;
}
.center_footer{
    display: flex;
    justify-content: space-between;
    margin:0 auto; padding:0;
    max-width: 800px;
  
}
.phone{
    text-decoration: none;
    color:#E4E1CF;
}
.phone-dark{
    text-decoration: none;
    text-emphasis: none;
    color:#404734;
}
.address{
    text-align: center;
   margin-bottom: 1em;
}
.contact_footer{
    padding:0;width:100%;
}
.contact_footer li{
    padding:.5em 0;
    text-align: center;
}
.footer_hr{
    border:1px solid #404734;
    width:70%;
   
}
.banner-sm{
    display: block;
}
.banner-lg{
    display: none;
}


/*Slider________________________________________________________*/
.slider{
    width:100%;
    max-width:800px;
    height:auto;
    overflow: hidden;
    margin:0 auto;
}

.slides{
    width: 500%;
    height: auto;
    display: flex;
   
}
.slides input{
    display: none;
}
.slide{
    width: 20%;
    transition: 2s;
}
.slide img{
    width:100%;
    max-width:800px;
    height: auto;
}
.slider-navigation__manual{
    position: absolute;
    width:100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
}
.manual-btn{
    border:2px solid #3E3515;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}
.manual-btn:not(:last-child){
    margin-right:40px;
}
.manual-btn:hover{
    background:#3E3515;
}
#radio1:checked ~ .first{
    margin-left:0;
}
#radio2:checked ~ .first{
    margin-left:-20%;
}
#radio3:checked ~ .first{
    margin-left:-40%;
}
#radio4:checked ~ .first{
    margin-left:-60%;
}
#radio5:checked ~ .first{
    margin-left:-80%;
}
.slider-navigation__auto{
    position: absolute;
    display: flex;
    width:100%;
    max-width: 800px;
    margin-bottom: -2.3em;
    justify-content: center;
    align-self: flex-end;
}
.slider-navigation__auto div{
    border:2px solid #3E3515;
    padding: 5px; 
    margin-top: 1.5em;
    border-radius: 10px;
    transition: 1s;
}
.slider-navigation__auto div:not(:last-child){
    margin-right:40px;
}
#radio1:checked ~ .slider-navigation__auto .slider-auto__btn1{
    background: #3E3515;
}
#radio2:checked ~ .slider-navigation__auto .slider-auto__btn2{
    background: #3E3515;
}
#radio3:checked ~ .slider-navigation__auto .slider-auto__btn3{
    background: #3E3515;
}
#radio4:checked ~ .slider-navigation__auto .slider-auto__btn4{
    background: #3E3515;
}
#radio5:checked ~ .slider-navigation__auto .slider-auto__btn5{
    background: #3E3515;
}


/*Residential_________________________________________________________________________*/
.about_res_content,.hardscape{
    max-width: min(100%, 800px);
    margin:0 auto;
    padding:max(1em, 4vw);
} 
.hardscape{
    margin-bottom: 5em;
}
.photo_grid-res{
    display: grid;
    grid-template-columns: .5fr .5fr;
    grid-gap:1em;
    justify-self: center;
    max-width:1200px;
    padding:max(1em,5%);
    margin: 0 auto;
}
.grid-cta{
    display:none;
}

@media only screen and (min-width:600px) {
    .primary-header-tagline{
        display: none;
        color:#B50404;
    }
    .primary_navigation a{
        color:#404734;
    }
    .logo{
     
        justify-self: center;
        align-self:center;
    }
    .hero{
        background-image: url("../images/hero_entry-728x776-medium.jpg");
    }
    .hero-res{
        background-image: url("../images/hero_rear-728x776-medium.jpg");
    }
    .hero-com{
        background-image: url("../images/hero_grass-728x776-medium.jpg");
    }
    .overlay-content-res{
        text-align: right;
        position: absolute;
        right:1em;
        bottom:1em;
    }
    .banner-lg{
        display: block;
    }
    .banner-sm{
        display: none;
    }
   .service_icons{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        margin:0 auto;
   }
   
   .service_list{
        column-count:2;
        margin:0 auto;
        width: fit-content;
        padding-bottom:max(2em, 3vw);
      
   }
   .service_list li{
        margin:0 auto;
        padding-bottom: 1em;
   }


}
@media (max-width: 1070px){
    .primary_navigation{
       
        position: fixed; top:0;
        z-index: 1000;
        inset:0 0 0 45%;
        flex-direction: column;
        
        padding:min(30vh,10rem) 2em;
        height:100vh;width: 100%;
        background-color: #009B4B;
        transform: translateX(200%);
        transition: transform 350ms ease-in;
       
        }
        .primary-header-container{
            width:100%;
        }
        .primary_navigation li{
            padding:.5em;
        }
        .primary_navigation li:hover{
            padding:.5em;
            background-color: #e0ab27;
        }
        .primary_navigation li a{
            color:#E4E1CF;
            font-weight: 600;
            font-size:1.5em;
        }

        .primary_navigation a:hover{
            background-color: #e0ab27;
        }
        .primary-header-container{
            padding:0.5em 1.5em;
        }
      
        .mobile-nav-toggle{
            display: block;

            position: absolute;
            top:1em;
            right:2em;
            z-index: 9999;

            border:0;
        }
        .primary_navigation[data-visable='true']{
            transform: translateX(0%);
        }
       /* .mobile-nav-toggle[aria-expanded='true']{
            
        }*/   
}



@media only screen and (min-width:1070px){
    .primary-header{
        justify-content: center;
        inset: inherit;
        height:4em;
        inset-block-start: 2em;
        background-color:transparent;
        margin-top:1em;
    }
    .primary-header-container{
        justify-content: space-around;
        width:100%; 
    }
    .primary-header-tagline{
        display: block; 
        align-self:center;
    }
    .primary_navigation li a{
       font-weight: 600;
       color:#3E3515;
    }
    nav{
        align-self: center;
    }
    .logo{
        margin-top:-1.5em;
    }
  
    nav ul li a:hover{
        color:#B50404;
        font-weight: 700;
    }
    .hero{
        margin-top:0;
        height:89vh;
        background-image: url(../images/hero_entry-1920x1080-large.jpg);
    }
    .hero-res{
        background-image: url(../images/hero_rear-1920x1080-large.jpg);
    }
    .hero-com{
        background-image: url(../images/hero_grass-1920x1080-large.jpg);
    }
   .hero-container{
        max-width:500px;
        margin: max(1em, 6%) max(1em, 10%);
        background-color:rgba(62, 53, 21,.3);
   }

    .banner{
        background-color:#009B4B; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .banner h1{
        color:#E4E1CF;
    }
    

   
    .sm-screen-carousel{
        display: none;
    }
    .lg-screen-testimonies{
        display: flex;
        width:100%;
        max-width: 1600px;
        margin:0 auto;
    }
    .cards{
        display: inline-flex;
        padding-bottom:2em;
    }
    .cards li{
        list-style: none;
    }
    .photo_grid{
        display:grid;
        grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
        grid-gap:2em;
      
    }
    .hidden{
        display: block;
    }
    .img1{
        grid-column: 1/3;
        grid-row: 1/2;
       
    }
    .img2{
        grid-column:3/5;
        grid-row: 1/2;
    }
    .img3{
        grid-column: 3/5;
        grid-row: 2/3;
    }
    .img8{
        grid-column: 1/3;
        grid-row: 2/3;
    }
    .img4{
        grid-column: 1/2;
        grid-row:3/4;
    }
    .img5{
        grid-column: 2/3;
        grid-row:3/4;
    }
    .img6{
        grid-column: 3/4;
        grid-row:3/4;
    }
    .img7{
        grid-column: 4/5;
        grid-row:3/4;
        display: block;
    }
    
    #name, #email, #number, #subject, #message{
        width:94%;
     
    }
    form{
        display: grid;
        max-width:1200px;
    }
    
    .form_left{
        grid-column: 1/2;
        padding-right:1.5em;
    }
    .form_right{
        grid-column: 2/3;
        padding-left: 1.5em;
    }
    
    .submit_container{
        grid-column: 1/3;
    }
    .contact_footer li{
        text-align: right;
    }


/*Residential_________________________________________________________________________*/
   
.photo_grid-res, .photo_grid-com{
    grid-template-columns: repeat(3,minmax(300px, 1fr));
    grid-template-rows: 1fr 1fr;
    margin:0 auto;
    max-width:1200px;
}
res-img1{
    grid-column: 1/2;
    grid-row: 1/2;
}
res-img2{
    grid-column: 2/3;
    grid-row: 1/2;
}
res-img3{
    grid-column: 1/2;
    grid-row: 2/3;
}
res-img4{
    grid-column: 2/3;
    grid-row: 2/3;
}







.grid-cta{
    grid-column: 3/4;
    grid-row: 1/3;
    background-color:#009B4B;
    display: flex;
    align-items: center;
}
.cta_content{
    display: flex;
    flex-direction: column;
    gap:1.2em;
   
    
    

    
}
.cta-button-container{
    padding:1em 0;
    width:fit-content; 
    margin:0 auto;
}
.grid-cta h3, .grid-cta p{
    color: #E4E1CF; 
    text-align:center;
    margin:0;
   
}
.cta_title{
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    width:75%;
    align-self: center;
}
.cta_details{

    padding:0 1.3em;

   
}
.cta_hr{
    width:70%;
    margin:0 auto;padding:0;   
    color: #E4E1CF; 
    margin: 1em auto;
}
.hardscape{
    margin-bottom:4em;
}
.footer_bottom{
    display: flex;
    justify-content: space-evenly; 
    align-items: center;
    margin:0 auto;
    max-width: 1600px;
}
.contact_footer{
    width:fit-content;
    text-align: right;
}
.center_footer{
    display: block;
    text-align: center;
}
.social{
    padding:0em;
}
.social li{
    padding-inline-end:1em;
}
.footerLogo{
    margin:0;
}

    
}
@media only screen and (min-width:3000px){
    .hero{
       
        background-image: url(../images/hero_entry-3440x1440-xlarge.jpg);
    }
    .hero-com{
        background-image: url("../images/hero_grass-3440x1440-xlarge.jpg");
    }
}