html,
body{
    height: 100%;
}

img{
    max-width:100%;
    opacity: 85%;
}


#cover{
    background: url('img/stone-road.jpg')  no-repeat ;
    background-size: cover;
    color:white;
    height:100%;
    text-align: center;
    display: flex;
    align-items: center;
}

#cover-caption{
    width: 100%;
}

.display-3
{
    text-shadow: 0 0 5px #0b1704;
    font-family: "Anton", sans-serif;
    font-size: 3rem;
}

.carousel-caption h3{
  -webkit-text-stroke-width: 0.3px;
  -webkit-text-stroke-color: black;
  
  
}
.carousel-caption p{
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: black;
  -webkit-text-fill-color: white;
  backdrop-filter: blur(5px);
  
}
  
    /*desktop screen*/

    @media (min-width: 1025px) {
      .display-3{
        font-size:4rem;
      }
      .covertext{
        font-size:2rem;
      }
    }


/*cardtitle and subtitle*/
.card-title{
  font-family: "Anton", sans-serif;
  font-size: 2.5rem;
}

.card-subtitle{
  font-family: "Barlow Condensed", sans-serif;
  font-size:1.5rem;
}
.card-text{
  font-family: "Barlow Condensed", sans-serif;
  font-size:2rem;
}



.covertext{
    text-shadow: 5px 5px 10px #ffffff;
    color:white;
    background-color: green;
    opacity: blur;
    font-family: "Barlow Condensed", sans-serif;
    font-style: Bold;
    
}
#home{
    color: white;
}
#services{
    color: white;
}
#work{
    color: white;
}
#contact{
    color: white;
}

#titlecaption{
  font-size:10rem;
}

/*Buttons styles*/
#getquotebtn{
    background-color: #36442e; 
}
#getquotebtn:hover{
    background-color: #729e5c; 
}

#learnmorebtn{
background-color: #36442e; 
color:#ffffff;
font-family: "Barlow Condensed", bold;
font-size:1.5rem;
}
#learnmorebtn:hover{
  background-color: #729e5c; 


}

.conabout{
  background-image: url('img/contentsection.png');
  background-size: cover;
  background-position: center;
  
  height:10vh
}


.infoser{
  background-color: #1a350b;
  color: white;
  align-items: center;
  text-align: center;
  font-size: 2em;
  position: absolute;

}
.infoser p{
 align-items: center;
 text-align: center;
 margin-top: 15px;
 font-family: "Barlow Condensed", bold;

}

/*Btn back menu*/
.btn-sm{
  background-color: white;
  font-size: 2em;
}

#btnupabout,
#btnupbest{
  background-color: green;
  font-size: 2em;
  color: white;
}

#btnupbest:hover,
#btnupabout:hover{
  background-color: #729e5c; 
}

#btnupbest{
align-items: center;
text-align: center;
align-content: center;
margin-left: 750px;
margin-top: 20px;

}
/*Phone screen*/
@media (max-width: 767px) {
#btnupbest{
margin-left: 190px;
margin-top: 20px;
}
}

/*Tablet screen*/
@media (min-width: 768px) and (max-width: 1024px) {
#btnupbest{
margin-left: 450px;
margin-top: 20px;

}
}








/*--------------*/

/*Carousel style*/
/* desktop screen*/
@media (min-width: 1025px) {
.carousel-caption{
  bottom:450px;
  padding-left: 100px;
  padding-right: 100px;
}
}

@media (min-width: 1025px) {
.carousel-caption h3{
  font-size:100px;
  font-weight:500;
}
}
@media (min-width: 1025px) {
.carousel-caption p{
  font-size:50px;
}
}

/*Tablet screen*/
@media (min-width: 768px) and (max-width: 1024px) {
  .carousel-caption{
    bottom:200px;
    padding-left: 100px;
    padding-right: 100px;
}
.carousel-caption h3{
  font-size:80px;
  font-weight:500;
}
.carousel-caption p{
  font-size:40px;
}

}

/*Phone screen*/
@media (max-width: 767px) {

  .carousel-caption{
    bottom:50px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .carousel-caption h3{
    font-size:35px;
    font-weight:20;
  }


  .carousel-caption p{
    font-size:20px;
  }


}





p{
  font-family: "Barlow Condensed", sans-serif;
}

h1,h3{
  font-family: "Anton", sans-serif;
  font-size: 3rem;
}
h3{
  margin-top: 10%;
}
#about{
  
  text-align: center;
  margin-top: 50px;
  
}

/*phone responsive mulch img*/

@media(max-width:767px){
.conmulch{
  margin-bottom: 5%;
}

}

/*tablet responsive mulch img*/

@media (min-width: 768px) and (max-width: 1024px) {
  .conmulch{
    display: flex;
    flex-direction: row-reverse;
  }
  
  }





/* Base style */
.nav-fill .nav-link {
    background-color: #36442e;
    margin: 4px;
    border-radius: 5px;
    color: #333;
    transition: background-color 0.2s ease;
  }
  
  /* Active (selected) tab */
  .nav-fill .nav-link.active {
    background-color: #729e5c !important;
    color: white !important;
  }
  
  /* Hover effect */
  .nav-fill .nav-link:hover:not(.active):not(.disabled) {
    background-color: #0d2302;
  }
  
  /* Click/press (active state while clicking) */
  .nav-fill .nav-link:active {
    background-color: #729e5c !important; /* darker blue when clicking */
    color: white;
  }
  
  /* Focus (e.g., clicked or tabbed to) */
  .nav-fill .nav-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(82, 10, 76, 0.5); /* optional visual feedback */
  }

  .nav-fill .nav-link.active:hover {
    background-color: #729e5c; /* Keep the same as .active */
    color: white; /* Optional: keep text color consistent */
  }

  .card-title{
    color:green; 
  }
  .card-subtitle{
    color: #767d65;
  }

  .display-2{
    color:green;
  }
  .feature-content{
    background-color: #36442e;
  }

  #mulchimg{
    margin-top: 6%;
    margin-bottom: 5%;
  }

    .lead1{
      color: #ffffff;
      font-size: 1.3em;
      font-weight: 500;
    }
 
    .ima{
      height: 120px;
      width:180px;
      cursor: pointer;
  }
  
  @media (min-width: 991px) and (max-width:2200px) {
    #titlemulch{
      margin-top: 10%;
}
}

.logo{
  align-items: center;
  margin-top: 5%;
}


.anim{
  margin-top: 35%;
}
 #what-we-do{
  margin-top:2%;
  
 }
 @media (min-width: 330px) and (max-width:767px) {
  #what-we-do{
    margin-top: 5%;
  }
 }
 .display-2{
  align-items: center;
  text-align: center;
  font-family: "Anton", sans-serif;
 }
 .lead{
  font-family: "Barlow Condensed", sans-serif;
  font-style: Bold;
  font-weight: 500;
  font-size: 2rem;
  color: #36442e;

 }

/*MULCH SERVICE*/
 .conmulch{
    margin-top: 80px; 
 }

/*RESPONSIVE phone*/
 @media(max-width:767px){

  .conmulch{
    margin-top: 60px;
 }
 }

/*------------------/*

 /*btn more info mulch*/
 #morinfobtn{
  background-color:white ; 
color:#36442e;
font-family: "Barlow Condensed", bold;
font-size:1.5rem;
text-align: center;
align-items: center;
margin-top: 20px;
margin-left: 355px;
margin-bottom: 30px;
width: 50%;
 }
 
 #morinfobtn:hover{
  background-color:#729e5c;
  color:#09160e;
 }

 /*phone responsive btn moreinfo mulch*/

@media(max-width:767px){
  #morinfobtn{
    text-align: center;
   align-items: center;
   margin-left: 100px;
   margin-top: 10px;
   margin-bottom: 40px;
  }
  
  }

  /*tablet responsive mulch btn*/

@media (min-width: 768px) and (max-width: 1024px) {
  #morinfobtn{
    text-align: center;
   align-items: center;
   margin-left: 215px;
   margin-top: 35px;
   margin-bottom: 50px;
  }
}


/*Social media about us Style*/

.contfollowus{
  align-items: center;
  text-align: center;
  background-color: #1a350b;
  width: auto;
  align-content: end;
 

  
}



.contfollowus .social_icon{


  align-items: center;
  text-align: center;
  margin-left: -40px;
  color: white;
  
}



.contfollowus h3{
  align-items: center;
  text-align: center;
  font-size: 2em;
  margin-top: 20px;
  color:white;
  
  
}




.about-text .social_icon{
  
  display:flex;
  justify-content: center;
  align-items: center;
  margin:10 px 0;
  
  
  
}

.about-text .social_icon li{
list-style: none;
}
.about-text .social_icon li a{
font-size: 2em;
color: white;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
}
.about-text .social_icon li a:hover{
transform: translate(-10px);
}

/*--------------*/



.bestserv{
  margin-top: 40px;
  margin-bottom: 50px;
}
/*Phone screen bestserv*/

@media(max-width:767px){
  .bestserv{
margin-top: 6px;
}
}




.bestserv h1{
  color:#72b847;
  font-size: 5em;
}
/*Phone screen H1 discount offer*/

@media(max-width:767px){
  .bestserv h1{
    font-size: 3em;
  }
}

@media(max-width:767px){
.bestserv .discountservices{
  width:auto
  

}

}


/*get discount btn*/
#getdiscount{
   background-color:#36442e ; 
color:white;
font-family: "Barlow Condensed", bold;
font-size:1.5rem;
text-align: center;
align-items: center;

width: 50%;
}


/*Phone screen  discount btn*/

@media(max-width:767px){
#getdiscount{
  text-align: center;
  align-items: center;
 margin-left: 180px
}

}



.separator{
  background-color: #1a350b;
background-image: url('img/growing-separator.png');
 height:90vh ;
   background-position: right;
   background-size: cover;
 margin-top: 10px;
 margin-bottom: 0px;
 width: auto;
 align-items: left;
 text-align: left;
 
}



/*Phone screen  highQuality*/

@media(max-width:767px){
  .separator{
  background-color: #1a350b;
background-image: url('img/mobileSpacePlants.png');
background-position: top;
    height: 50vh;
}

}


/*Gallery*/

.ourwork h1{
  margin-top: 10px;
  align-items: center;
  text-align: center;
  color: #303f29;
  font-family: "Barlow Condensed", bold;
  font-size: 8em;

}
.ourwork p{
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2em;
  align-items: center;
  align-content: center;
  text-align: center;
}




#gallery{
  margin-bottom: 100px;
  background-color: #4b5845;
}

/*Phone screen  gallery*/

@media(max-width:767px){
#gallery{
  margin-bottom: 100px;
}
}


/*FOOTER STYLE*/

.logofooter img{
width:25%;
height:auto;
align-items: center;
text-align: center;
}
 /*phone responsive logo footer*/

 @media(max-width:767px){
  .logofooter img{
    width:80%;
    height:auto;
  }
 }


footer{
  position: relative;
  width: 100%;
  background: #36442e;
  min-height: 100px;
  padding: 20px 50px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
footer .social_icon,
footer .menu{
  position:relative;
  display:flex;
  justify-content: center;
  align-items: center;
  margin:10 px 0;
  flex-wrap: wrap;
}

footer .social_icon li,
footer .menu li{
  list-style: none;
}
footer .social_icon li a
{
  font-size: 2em;
  color: white;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
footer .social_icon li a:hover{
  transform: translate(-10px);

}
footer .menu li a{
  font-size: 1.1em;
  color: white;
  margin: 0 10px;
  display: inline-block;
  text-decoration: none;
  opacity: 0.75;
}
footer .menu li a:hover{
  opacity: 1;
}
footer p {
  color:white;
  text-align:center;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 1.1em;
}

footer .wave{
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(img/wave.png);
  background-size: 1000px 100px;
}
footer .wave#wave1{
  
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWave 4s linear infinite;

}
footer .wave#wave2{
  
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animateWave_02 3s linear infinite;

}
footer .wave#wave3{
  
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWave 3s linear infinite;

}
footer .wave#wave4{
  
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animateWave_02 4s linear infinite;

}
@keyframes animateWave{
  0%
  {
    background-position-x: 1000px ;
  }
  100%
  {
    background-position: 0px;
  }
}
@keyframes animateWave_02{
  0%
  {
    background-position-x: 0px ;
  }
  100%
  {
    background-position: 100px;
  }
}