:root {
    --neutral: #f9e9c3;
    --accent: #94e74c;
    --shade: #fa8752;
    --tint: #d1eac1;
    --anchor: #172d08;
    --gray: #5E6E58;}


    @font-face {
        font-family: "Special";
        src:url("../links/RubikDirt-Regular.ttf")}

    
    @font-face {
            font-family: "Bold";
            src:url("../links/Rubik-VariableFont_wght.ttf")}

    @font-face {
            font-family: "Normal";
            src:url("../links/Rubik-VariableFont_wght.ttf")}
    
    @font-face {
            font-family: "Light";
            src:url("../links/Rubik-VariableFont_wght.ttf")}

            h1, h2, h3, h4, h5, h6 {
              font-family: Bold;
              font-weight: 620 !important;
            }
            
            h1 {
              font-size: clamp(2.75rem, 3.2vw, 5rem);
            }
            h2 {
              font-size: clamp(2.75rem, 4vw, 3.5rem);
            }
            h3 {
              font-size: clamp(2.5rem, 4vw, 3rem);
            }
            h4 {
              font-size: clamp(1.9rem, 3.5vw, 2.5rem);
            }
            h5 {
              font-size: clamp(1.75rem, 3vw, 2rem);
            }
            h6 {
              font-size: clamp(.875rem, 2.5vw, 1.5rem);
            }
            
            p {
              font-family: Normal;
              font-size: clamp(1.2rem, 1.5vw, 1.6rem);
              line-height: 1.25;
            }



    .main-content {
      padding-bottom: 2%;
      height: 100%;
      overflow-x: hidden;
    }
    html, body {
      height: 100%;
      margin: 0;
      background-color: var(--neutral);
      
    }




@media (orientation: portrait) {
  .d-flex {
    flex-direction: column !important;
  }
@media (orientation: portrait) {
.squiggly-wrapper {display: none}

  #verticalmenu {
    display: none;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0.5rem 1rem;
    background-color: #f8f9fa;
    gap: 1rem;
  }

  #verticalmenu .nav-item {
    display: inline-block !important;
    margin: 0;
  }

  #verticalmenu .nav-link {
    display: inline-block !important;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: #333;
  }

  .menu-divider {
    display: none;
  }
}
}

@media (orientation: portrait) {#verticalmenu {display: none !important}}
@media (orientation: landscape) {#horizontal-nav {display: none  !important;}}
#horizontal-nav {background-color: var(--anchor) !important;
display: flex;
flex-direction: row !important;
width: 100%;
text-align: center;
margin: auto !important;}


.bi-check-circle-fill {color: var(--neutral) !important;}
.nav-link {font-weight: 700 !important;
color: var(--neutral) !important;
}
.nav-link:hover  {color: var(--accent) !important}

.nav-link.active {background-color: transparent !important;
color: var(--shade) !important;}

.btn-primary {background-color: var(--accent);
border-color: transparent !important;
color: var(--anchor) !important;
font-weight: 900 !important;
margin: auto !important;
}
.btn-primary:hover {background-color: var(--shade);
border-color: transparent !important;}


@media (orientation: landscape) {
    .sidebar {
      position: fixed;
      width: 280px;
      min-height: 100vh;
      background-color: var(--anchor) !important;
      border-right: 5px solid var(--accent);
      a {color:var(--tint); ;
      font-family: light;
}
    }}

    @media (orientation: landscape) {
    .main-content {
      flex: 1;
      margin-left: 280px;
 
      overflow-y: auto;

    }}

    .hero-feature {
        background-color: var(--neutral);
        img {width: 62%;}    

    }



.headline-wrapper {

h1 {font-weight: 900 !important;
  font-size: 2rem;
color: var(--neutral);
-webkit-text-stroke: 3px;
}
text-align: center;} 
#mow-wrapper {background-color: none
   !important;
position: absolute;
right: 0;
width: 15%}

@keyframes slowMove {
  from {
    transform: translatey(0);
  }
  to {
    transform: translatey(100vh);
  }
}

@media (orientation: portrait) {
  #mow-wrapper {display:none}}

@media (orientation: landscape) {
#mow-wrapper {
  position: relative;
  animation: slowMove 30s linear infinite;
  width: 100px;  /* set width to your mower size */
  height: 60px;  /* set height to your mower size */
}

#Mower {
  position: relative;
  z-index: 10;
  width: 100%; /* adjust as needed */
  height: auto;
}

.clipping {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 4px;
  height: 12px;
  background-color: #4CAF50;
  border-radius: 2px 2px 10px 2px;
  opacity: 0.8;
  transform-origin: bottom center;
  animation-name: clip-fly;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* Different delays and horizontal offsets */
.clipping:nth-child(2) { animation-delay: 0s; --x-offset: 10px; }
.clipping:nth-child(3) { animation-delay: 0.5s; --x-offset: -15px; }
.clipping:nth-child(4) { animation-delay: 1s; --x-offset: 20px; }
.clipping:nth-child(5) { animation-delay: 1.5s; --x-offset: -10px; }
.clipping:nth-child(6) { animation-delay: 2s; --x-offset: 5px; }

/* Animate translation + rotation */
@keyframes clip-fly {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(var(--x-offset)) translateY(-20px) rotate(90deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateX(var(--x-offset)) translateY(-40px) rotate(180deg) scale(0.5);
    opacity: 0;
  }
}
}
fadeOut {
  from { opacity: 1; }
  to { opacity: 1; }
}
    #hero-services {background-color: var(--neutral) !important;
    min-height: 25vh;
color: var(--anchor);
h2 {font-weight: 500 !important}
}

        .hero-more {background-color:var(--neutral);
          img {width: 100%;

        border-radius: 15px;}
          border-radius: 15px !important;
        
    
        }

.services {padding-top: 1.7%;
  padding-bottom: 1.7%;
  background-color: var(--shade);
  width: 100%;
  border-radius: 15px;
  margin: 0 auto;
color: var(--neutral);
h3 {font-size: 2rem
}}



.text-wrapper {text-align: left;}

#text1 {
  position: relative;
  z-index: 2 !important;
  
}


.subheader-wrapper-right {position: relative;
  z-index:5 !important;
  color: var(--anchor);

}
.text-wrapper {font-weight: 100;
padding: 20%;}



.subheader-wrapper-left {position: relative;
  z-index:5 !important;
  color: var(--anchor)
}
#imgwrapper1 {position: relative;
z-index: 0;
padding: 2%;
  background-color: none;
  border: solid 4px var(--shade);
  border-radius: 15px;}

#imgwrapper2 {position: relative;

z-index: 0;
padding: 2%;
  background-color: none;
  border: solid 4px var(--shade);
  border-radius: 15px;}



.testimonials {background-color: var(--anchor);
margin: 0 auto;
position: relative;
padding: 5%;
border-radius: 25px;
color: var(--neutral);
.bi {color: var(--neutral);
  width: 200px!important;}}

.testimonials:before {
  content: '';
  position: absolute;
  width: 100%;
  left: 15px;
  bottom: 15px;
  height: 100%;
  border: solid 5px var(--accent);
  margin: 0 auto;
  border-radius: 25px;
}
 
.nav-wrapper {position: relative;
z-index: 1 !important;}
.nav {
z-index: 5;
text-align: center;}
.nav-wrapper:before {
  content: '';
  position: absolute;
  width: 105%;
  height: 155%;
  top: -50%;
  z-index: -1 !important;
  background-color: var(--anchor);
  border: 0px !important;
  ;}

  #mow-wrapper {position: relative;
  z-index: 0 !important;
margin: 0 auto;}
  #mow-wrapper:before {content: '';
  background-color: var(--accent);
width: 90%;
top: -2500%;
height: 1600px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
z-index: -1 !important;
position: absolute;}

/* service page styles */

.service-section-top{
  padding-right: 0px !important;
p {color: var(--neutral)}}

    #service-top-image-wrapper {position: relative;
    border-radius: 25px;
  right: -5%;
    }
    
  #service-top-image-wrapper:before {
    content:"";
    position: absolute;
    width: 102%;
    right: 2%;
    top: 2%;
    height: 102%;
    border: 5px var(--shade) solid;
    border-radius: 20px;

  }
      #service-top-image {
    border-radius: 15px;}


    .service-list {

  
      h3 {font-size: 2.2rem;
        color: var(--shade) !important;
      }
    }
       .service-offer {background-color: none;
        padding-right: 2% !important;
        z-index: 3;


      h2, p {color: var(--anchor)
       }
       p{font-weight: 200;}
    
     
      text-align: left !important;    
 
      }
#service-text-wrapper {position: relative;
  

h1 {color: var(--shade)}
p {font-weight: 200;
    padding-bottom: 2%;
}}
      .services-lead-copy {position: relative;}
      #squiggle {
        fill: var(--accent) !important;
        position: absolute;
    scale: 200% !important;
    z-index: 0;
  top: 106%;
  rotate: 20deg;
      }

      .squiggle2 {
        position: fixed;;
      }

     

   .examples-section {
    position: relative;
    padding-top: 5%;
    
    padding-bottom: 0px !important;

    .col {margin: 0px !important;
  padding: 4px !important;
}

  
.img-fluid {border-radius: 10px;
  
}}
.examples-section::before {content:'';
position: absolute;
width: 96%;
height: 92%;
background-color: none;
top: 10%;
left: 3.5%;
border: solid 5px var(--shade);
border-radius: 20px;}

@media (orientation: portrait) {
  .examples-section::before {top: 1.5%;
  height: 97%;
  width: 90%;
left: 6.5%;}}

.services-page {position: relative;}
.services-page::before {content:"";
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 100% 0%, 100% 20%, 50% 28%, 0 20%);

left: 0%;
background-color: var(--anchor);
}


  @media (min-width: 831px) and (max-width: 1200.9px) {
      .services-page::before {clip-path: polygon(0 0, 100% 0%, 100% 5%, 50% 5.5%, 0 5%);}}
  @media (max-width: 830px) {
      .services-page::before {clip-path: polygon(0 0, 100% 0%, 100% 30vh, 50% 31vh, 0 30vh);}}
        @media (max-width: 650px) {
      .services-page::before {clip-path: polygon(0 0, 100% 0%, 100% 38vh, 50% 40vh, 0 38vh);}}
              @media (max-width: 576px) {
      .services-page::before {clip-path: polygon(0 0, 100% 0%, 100% 43vh, 50% 50vh, 0 43vh);}}

  .contact-info {font-weight: 900 !important;
    color: var(--shade) !important;}
.contact-page {
  padding: 5%;

  height: 100vh !important;
  background-image: urL("../links/garden14.jpg");
  background-size: cover;
  position: relative;
  z-index: 0;
}
.form-container {
  position: relative;
  z-index: 3 !important;;
  h3 {color: var(--accent);
}
  border: solid 4px var(--neutral);
  padding: 15px;
  border-radius: 20px;
}

.contact-page::before {content:"";
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100vh;
background-color: var(--anchor);
z-index: 2;
opacity: .85
;}
.form-label {font-weight: 900 !important;
color: var(--neutral);}

.contact-button:active {background-color: var(--accent) !important;}