/* 
Template Name: GardenTico
Description: GardenTico is a horticulture and landscaping related single page html template.
Author: Gaurish Technologies
Version: 1.0 
*/

/* 
==========CSS Index==========

1. Default CSS
2. Welcome Bar CSS
3. Header CSS
4. Home Section CSS
5. About Section CSS
6. Services Section CSS
7. Project Section CSS
8. Team Section CSS
9. Contact Section CSS
10. Footer CSS
11. Scroll To Top CSS 

============================*/

/* 1. Default CSS Start */
:root {
  --surface-color: #fff;
  --curve: 40;

}
body {
  position: relative;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
/* Default CSS End */
/* 2. Welcome Bar Styling Start*/
.welcome-text {
  font-weight: 700;
  text-align: center;
  color: white;
}
#welcome-bar {
  background: linear-gradient(90deg, rgba(2, 102, 55, 1) 22%, rgba(140, 196, 63, 1) 67%);
  margin-bottom: unset;
  border-radius: unset;
  border: unset;
  border-color: transparent;
  z-index: 1021;
}
/*Welcome Bar Styling End*/
/* 3. Header Styling Start*/
/*Logo*/
nav {
  overflow: hidden;
}
nav.header {
  position: sticky;
  top: -1px;
  z-index: 11;
  background-color: white;
  box-shadow: 0 1px 6px rgb(0 0 0);
}
.logo {
  width: 150px;
  height: 80px;
}
/*Menu*/
.nav-link {
  color: black;
  font-weight: bold;
}
/*Menu Mobile Icons*/
#menu-close-icon {
  display: none;
}
.fa-bars {
  font-size: 25px;
  color: #8bc83e;
}
.fa-xmark {
  font-size: 25px;
  color: #8bc83e;
}
/*Menu On Hover*/
nav div ul li a {
  position: relative;
}
nav div div ul li a:after {
  content: '';
  background: linear-gradient(90deg, rgba(2, 102, 55, 1) 22%, rgba(140, 196, 63, 1) 67%);
  width: 0;
  height: 3px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: all .36s ease 0s;
}
.nav-link:focus,
.nav-link:hover {
  color: #8bc83e;
  transition: all .960s ease 0s;
}
nav div div ul li a:hover:after {
  width: 100%;
}
/*Menu On Active*/
.nav-link.scrollto.active {
  color: #8bc83e;
  transition: all 1.56s ease 0s;
}
nav ul li a.active {
  position: relative;
}
nav ul li a.active:after {
  content: '';
  background: linear-gradient(90deg, rgba(2, 102, 55, 1) 22%, rgba(140, 196, 63, 1) 67%);
  width: 0;
  height: 3px;
  border-radius: 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: all 1.36s ease 0s;
}
nav ul li a.active:after {
  width: 100%;
}
/*Menu Social Icons*/
ol li a i {
  color: black;
  float: left;
}
.list-group .list-group-item {
  border: unset;
}
/*Menu Social Icon Nav For Tablet View*/
/*Header Styling End*/
/* 4. Home Section Styling Start*/
/*Banner Section Styling Start*/
.banner-heading-one {
  font-family: Quicksand;
  font-size: 38px;
  line-height: 50px;
  color: black;
  margin: 0;
  font-weight: 700;
  padding-top: 38%;
  text-shadow: 0px 5px 16px rgba(0, 0, 0, 0.78);
}
.banner-heading-two {
  font-family: Quicksand;
  text-transform: uppercase;
  line-height: 63px;
  font-weight: 700;
  color: black;
  font-size: 40px;
  text-shadow: 0px 5px 16px rgba(0, 0, 0, 0.78);
}
#banner-text-and-button a{
  text-decoration: none;
}
.bho-first {
  background-color: #8cc642;
  color: white;
}
.bht-sec {
  background-color: #016a39;
  color: white;
}
.bho-first::selection {
  background-color: #016a39;
  color: white;
}
.banner-heading-one::selection {
  background-color: black;
  color: white;
}
.banner-heading-two::selection {
  background-color: black;
  color: white;
}
.bht-sec::selection {
  background-color: #8cc642;
  color: white;
}
.contact-button {
  list-style-type: none;
}
.contact-button li {
  --c: black;
  color: black;
  font-size: 16px;
  border: 0.3em solid #016a39;
  border-radius: 0.5em;
  width: 12em;
  height: 3em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 2.5em;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
}
.contact-button li span {
  position: absolute;
  width: 25%;
  height: 100%;
  background-color: #8cc642;
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}
.contact-button li:hover {
  color: white;
}
.contact-button li:hover span {
  transform: translateY(0) scale(2);
}
.contact-button li span:nth-child(1) {
  --n: 1;
}
.contact-button li span:nth-child(2) {
  --n: 2;
}
.contact-button li span:nth-child(3) {
  --n: 3;
}
.contact-button li span:nth-child(4) {
  --n: 4;
}
/*Banner Section Styling End*/
/*Process Cards Styling Start*/
.process-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 4rem 5vw;
  padding: 0;
  list-style-type: none;
}
.process-card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: calc(var(--curve) * 1px);
  overflow: hidden;
  text-decoration: none;
  border: 2px solid #8cc642;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  transition: box-shadow 1s;
}
.process-card-image {
  width: 100%;
  height: auto;
}
.process-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border: 2px solid #8cc642;
  border-radius: calc(var(--curve) * 1px);
  background-color: #8cc642;
  transform: translateY(100%);
  transition: .2s ease-in-out;
}
.process-card:hover {
  box-shadow: -8px -9px 5px 0px rgba(126, 217, 87, 0.75);
}
.process-card:hover .process-card-overlay {
  transform: translateY(0);
  border: 2px solid #8cc642;
}
.process-card-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 2em;
  border-radius: calc(var(--curve) * 1px) 0 0 0;
  background-color: white;
  transform: translateY(-100%);
  transition: .2s ease-in-out;
  box-shadow: 0px 0px 29px 0px rgba(0, 128, 55, 1);
}
.process-card:hover .process-card-header {
  transform: translateY(0);
}
.process-card-title {
  font-family: Quicksand;
  font-size: 18px;
  margin: 0 0 .3em;
  color: black;
  font-weight: bold;
}
.process-card-description {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
  color: white;
  font-family: "Quicksand";
  overflow: hidden;
  font-size: 17px;
  font-weight: 400;
}
/*Process Cards Styling End*/
/*Home Section Styling End*/
/* 5. About Section Styling Start*/
.leaf {
  font-size: 75px;
}
.sub-content {
  width: 75%;
  color: white;
}
.about-staff-image {
  border-top-left-radius: 200px;
  border-bottom-right-radius: 200px;
  transform: scaleX(-1);
  box-shadow: 0px 0px 0px 5px white;
}
#about {
  background-color: black;
}
.qualified-staff {
  color: white;
  font-size: 35px;
  color: #8bc642;
  font-family: "Arial Black", Gadget, sans-serif;
  text-shadow: 0px 0px 0 rgb(114, 173, 41),
    -1px 1px 0 rgb(89, 148, 16),
    -2px 2px 0 rgb(63, 122, 0),
    -3px 3px 0 rgb(38, 97, 0),
    -4px 4px 0 rgb(13, 72, 0),
    -5px 5px 0 rgb(-12, 47, 0),
    -6px 6px 0 rgb(-38, 21, 0),
    -7px 7px 0 rgb(-63, -4, 0),
    -8px 8px 0 rgb(-88, -29, 0),
    -9px 9px 8px rgba(255, 255, 255, 1),
    -9px 9px 1px rgba(255, 255, 255, 0.5),
    0px 0px 8px rgba(255, 255, 255, .2);
}
#main-about {
  background-color: black;
}
.about-section-title {
  color: #8bc642;
  font-weight: 800;
  font-size: 25px;
  text-transform: uppercase;
}
.about-section-sec-title {
  color: white;
  font-size: 36px;
  line-height: 46px;
  font-weight: 700;
}
hr {
  width: 350px;
  border-top: 5.9px solid #00ff10;
  overflow: hidden;
}
.about-points {
  display: block;
  margin: 0 auto;
  max-width: 40rem;
  padding: 1rem;
}
ol.about-points-start {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}
ol.about-points-start>li {
  background: white;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  counter-increment: gradient-counter;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}
ol.about-points-start>li::before,
ol.about-points-start>li::after {
  background: linear-gradient(135deg, #83e4e2 0%, #a2ed56 100%);
  border-radius: 1rem 1rem 0 1rem;
  content: "";
  height: 3rem;
  left: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}
ol.about-points-start>li::before {
  align-items: flex-end;
  content: counter(gradient-counter);
  color: #1d1f20;
  display: flex;
  font: 900 1.5em/1 "Montserrat";
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}
/* Counter Element */
.about-counter {
  color: #8bc541;
  width: 200px;
  height: 200px;
  text-align: center;
  border-radius: 100%;
  padding: 55px 32px 40px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.about-counter:before,
.about-counter:after {
  content: "";
  background: #fff;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  box-shadow: 0px 1px 0px 9px rgba(0, 0, 0, 0.75);
  transform: translateX(-50%)translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.about-counter:after {
  background: linear-gradient(90deg, rgba(2, 102, 55, 1) 22%, rgba(140, 196, 63, 1) 67%);
  width: 100%;
  height: 100%;
  box-shadow: none;
  transform: translate(0);
  top: 0;
  left: 0;
  z-index: -2;
  clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%);
}
.about-counter .about-counter-icon {
  color: #8cc43f;
  background: black;
  font-size: 33px;
  line-height: 70px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 0.3s;
}
.about-counter .about-counter-icon i.fa {
  transform: rotateX(0deg);
  transition: all 0.3s ease 0s;
}
.about-counter:hover .about-counter-icon i.fa {
  transform: rotateX(360deg);
}
.about-counter h3 {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 3px;
}
.about-counter .about-counter-value {
  font-size: 30px;
  font-weight: 700;
}
.about-counter-value-increment-icon {
  font-size: 30px;
  font-weight: 800;
}
/*About Us Section CSS End*/
/*  6. Services Section CSS Start */
#services {
  border-top: 2.5px solid #8cc43f;
  overflow: hidden;
}
.services-title {
  color: #8cc43f;
  font-weight: 800;
}
.services-discription {
  color: #8cc43f;
  font-weight: 600;
}
.services-content .item {
  background: #ffffff none repeat scroll 0 0;
  border-left: 2px solid #00a01d;
  -moz-box-shadow: 0 0 10px #cccccc;
  -webkit-box-shadow: 0 0 10px #cccccc;
  -o-box-shadow: 0 0 10px #cccccc;
  box-shadow: 0 0 10px #cccccc;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.services-content.text-center .item {
  /* background: #ffffff none repeat scroll 0 0; */
  border: medium none;
  padding: 45px 0;
  /* padding: 45px 40px 64px; */
}
.services-content.text-center .item img {
  background: #00a01d none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #ffffff;
  /* font-size: 40px; */
  height: 200px;
  position: relative;
  text-align: center;
  width: 200px;
  z-index: 1;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  margin-bottom: 20px;
}
.services-content.text-center .item img::after {
  border: 2px solid #00a01d;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 90px;
  left: -5px;
  position: absolute;
  top: -5px;
  width: 90px;
  z-index: -1;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}
.services-content .services-content-row.services-content-row-two .services-content-section {
  margin-bottom: 30px;
}
.services-content .item .service-content {
  padding: 0 20px;
}
.services-content .item h4 {
  font-weight: 600;
  text-transform: capitalize;
}
.services-content .item p {
  margin: 0;
  font-size: 18px;
}
.services-content .item iimg,
.services-content .item h4,
.services-content .item p {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}
.services-content .item::after {
  background: #00a01d none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  width: 100%;
  z-index: -1;
}
.services-content .item:hover::after {
  left: 0;
}
.services-content .item:hover i,
.services-content .item:hover h4,
.services-content .item:hover p {
  color: #ffffff !important;
}
.services-content.text-center .item:hover i::after {
  border-color: #ffffff !important;
}
.services-content.text-center .item:hover i {
  background-color: #ffffff !important;
  color: #00a01d !important;
}
/* Services Section CSS End */
/* 7. Projects Section CSS Start */
.project-title {
  color: #8cc43f;
  text-align: center;
  font-weight: 800;
}
.project-filter-button {
  font-size: 18px;
  border: 1px solid #8cc43f;
  border-radius: 5px;
  text-align: center;
  color: #8cc43f;
  margin-bottom: 30px;

}
.project-filter-button:hover {
  font-size: 18px;
  border: 1px solid #8cc43f;
  border-radius: 5px;
  text-align: center;
  color: #ffffff;
  background-color: #8cc43f;
}
.project-filter-button:active {
  background-color: #8cc43f;
  color: #ffffff;
}
.project-filter-button:focus {
  background-color: #8cc43f;
  color: #ffffff;
}
.project-gallery {
  margin-bottom: 30px;
}
.project-discription {
  color: #8cc43f;
  font-weight: 600;
}
.project-tile {
  height: 365px;
  background-color: rgba(2, 102, 55, 1);
  display: inline-block;
  position: relative;
  transition: all 0.4s ease-out;
  overflow: hidden;
  color: white;
  font-family: 'Roboto';
}
.project-tile img {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all 1.2s ease-out;
}
.project-tile .text {
  padding: 30px;
}
.project-tile h2 {
  margin: 20px 0 0 0;
}
.project-tile p {
  margin: 20px 0 0 0;
  transition-delay: 0.4s;
}
.project-tile:hover {
  box-shadow: 0px 35px 77px -17px rgb(0, 0, 0);
  transform: scale(1.05);
}
.project-tile:hover img {
  opacity: 0.2;
}
/* Projects Section CSS End */
/* 8. Team Section CSS Start */
#team {
  padding: 4px 0;
}
.team-heading h6 {
  font-size: 32px;
  font-weight: 800;
  color: #8cc43f;
}
.team-single-box {
  border-top: 5px solid rgba(2, 102, 55, 1);
  border-bottom: 5px solid rgba(2, 102, 55, 1);
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff
}
.team-first-box {
  border-left: 5px solid rgba(140, 196, 63, 1);
}
.team-last-box {
  border-right: 5px solid rgba(140, 196, 63, 1);
}
.team-info-area {
  padding: 0 20px 45px;
}
.team-img-area {
  overflow: hidden;
  padding: 15px 0 15px;
}
.team-img-area img {
  margin: 0 auto;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  max-width: 230px
}
.team-single-box:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.team-info-area a {
  display: inline-block;
  margin: 25px 0 0;
  background-color: rgba(140, 196, 63, 1);
  color: #fff;
  padding: 10px 35px;
  border-radius: 4px;
}
.team-move-animation {
  position: relative;
  -webkit-animation: move-animation 2s ease-in-out infinite;
  animation: move-animation 2s ease-in-out infinite;
}
@keyframes move-animation {
  0% {
    top: 3px;
  }

  50% {
    top: -3px;
  }

  100% {
    top: 3px;
  }
}
/* Team Section CSS End */
/* 9. Contact Section CSS Start */
.contect-container {
  background: linear-gradient(212deg, rgba(2, 102, 55, 1) 56%, rgba(140, 196, 63, 1) 100%);
}
.form_create {
  padding: 5rem 0;
}
.form_create .left_side_container {
  align-items: center;
  display: flex;
  padding: 0 5rem;
}
.form_create .left_side_container .left_inner_section {
  color: white;
}
.form_create .right_side_container h2{
  font-weight: 900;
}
.form_create .right_side_container input,
.form_create .right_side_container textarea {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 100%;
  font-size: 0.8rem;
}
.form_create .right_side_container button {
  border-radius: 20px;
  border: 1px solid rgba(140, 196, 63, 1);
  background-color: rgba(140, 196, 63, 1);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  cursor: pointer;
  display: block;
  margin: auto;
}
.form_create.right_side_container button:hover {
  opacity: 0.7;
}
.right_side_container input:focus,
.contact-container textarea:focus {
  outline: 1px solid rgba(140, 196, 63, 1);
}
/*contact-section css end*/
/* 10. footer-section css start*/
.footer-content-container {
  width: 100%;
  padding: 100px 20px 20px 20px;
  background: black;
  color: #f8f9fa;
  letter-spacing: 1.2px;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  margin: unset;
}
.footer-map iframe {
  width: 100%;
  height: 100%;
}
.footer-contact h5 {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}
.footer-contact h5::before {
  position: absolute;
  content: "";
  width: 50%;
  border: 1px solid;
  bottom: -9px;
  left: 0;
  color: #00a01d;
}
.footer-contact h5::after {
  position: absolute;
  content: "";
  width: 50%;
  border: 1px solid;
  bottom: -9px;
  right: 0;
}
.footer-contact table i {
  margin-right: 15px;
}
.footer-contact table td a {
  text-decoration: none;
  color: white;
}
.Copyright_line a{
  color:#00ff10
}
/*footer-section css end*/
/* 11. scroll-btn css start*/
.scroll-btn img {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  z-index: 5;
}
/*scroll-btn css start*/