.title__line {position: relative; 
  font-family: "Outfit", sans-serif;
  font-size: 35px;
  line-height: 1.2em;
  font-weight: 100;
  color: #5ba653;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0px;

overflow: hidden;
}
.title__line::after{position: absolute; width: 100%; height: 1px; background-color: #fdcd2e; content: "";top: 22px;margin-left: 14px;}

.accordion-box .block .acc-btn {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 0;
    padding-right: 0px;
  padding-right: 30px;
  color: #868686;
  transition: all 500ms ease;
  border-radius: 0px;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}   
 
.accordion-box .block .content {
  position: relative;
  padding: 0 30px 10px 47px;
  background-color: transparent;
  color: #fff;
}

.advantages{ width: auto;}
.advantages p{ margin-bottom: 5px; position: relative;}
.advantages p::before{position: absolute; content: ""; top: 12px; left: -20px; width: 10px; height: 1px; background-color: #d0d0d0;}

.space_bw{
    display: flex;
    justify-content: space-between;
}

.updown{
    animation: updown 10s linear infinite;
}

@keyframes updown {
    0%{
        transform: translateY(0px);
    }
    25%{
        transform: translateY(-20px);
    }
    50%{
        transform: translateY(0px);
    }
    75%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }
}



.img-zoom:hover .gallery-img{
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  transform: scale(1.1);
  transition: all 1.5s ease !important;
}
.img-zoom .gallery-img{
  transition: all 1.5s ease !important;
}
.gallery-image .gallery-con {
  border-radius: 6px;
}
.gallery-image img{
  border-radius: 6px;
  cursor: pointer;
}
.img-zoom{
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  cursor: pointer;
}
.gallery-image .gallery-con .gallery-detail h4 {
  font-size: 15px !important;
  color: #fff !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  text-align: left !important;
} 

.gallery-image  .gallery-con .gallery-detail {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 23px 26px;
  border-radius: 0;
  transform: translateY(20px);
  opacity: 0;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .0)), to(transparent));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0, transparent 100%);
  cursor: pointer;
  z-index: 3;
} 
.gallery-image .gallery-con:hover .gallery-detail {
  opacity: 1 !important;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0) !important;
}
.gallery_flex{
  display: flex;
  justify-content: space-between;
}
.mud_wall1{
  width: 49.7%;
}
.mud_wall2{
  width: 49.7%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sub_img{
  width: 49.45%;
}
.mud_wall3{width: 48.7%;}
.mud_wall4{width: 50.7%;}
.mud_wall5{width: 31.85%;}
.mud_wall6{width: 31.8%;}
.mud_wall7{width: 35.05%;}

.mud_walls_pg .bg-imgfixed {
  background-attachment: fixed !important;
}

.chartBarsWrap {
  /*! padding-left: 37px; */
  overflow: hidden;
  margin-top: -80px;
}
.chartBars {
  position: relative;
  height: 347px;
  margin: 45px auto 30px;
}
.chartBars .bars {
  display: flex;
  justify-content: space-between;
  /*! border-left: 1px solid #bbb; */
  border-bottom: 1px solid #bbb;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.chartBars .bars li {
  display: inline-block;
  flex: 0 1 15%;
  height: 100%;
  margin: 0;
  text-align: center;
  position: relative;
  font-size: 16px;
}
.chartBars .bars li .bar {
  width: 100%;
  position: absolute;
  color: transparent;
  bottom: 0;
  height: 0;
  overflow: hidden;
  outline: 2px solid transparent;
   font-size: 0;
}

.chartBars .numbers {
  width: 63px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: absolute;
  left: -62px;
}
.chartBars .numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 57px;
  position: relative;
  font-size: 13px;
  bottom: 11px;
  right: -9px;
  color: black !important;
}
.chartBars .numbers li:after {
  content: "\00af";
  position: relative;
  right: -6px;
  font-size: 21px;
  top: 8px;
  color: rgba(0, 0, 0, 0.34);
}
.chartBars .numbers li:first-of-type {
  height: 61px;
  margin-top: -5px;
}
.bars li .bar.step1 {
    background: url("../images/services/urban_forest/step1.webp");
  background-repeat: no-repeat;
  background-position: 50% 14%;
  background-size: 94px;
  transition: all 0.6s linear;
}

.bars li .bar.step2 {
  background: url("../images/services/urban_forest/step2.webp");
  background-repeat: no-repeat;
  background-position: 51% 15%;
  background-size: 161px;
  transition: all 1.5s linear;
}

.bars li .bar.step3 {
  background: url("../images/services/urban_forest/step3.webp");
  background-repeat: no-repeat;
  background-position: 50% 1%;
  background-size: 161px;
   transition: all 2.5s linear;
}

.bars li .bar.step4 {
  background: url("../images/services/urban_forest/step4.webp");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 148px;
   transition: all 3.5s linear;
}

.bars li .bar.step5 {
  background: url("../images/services/urban_forest/step5.webp");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 175px;
   transition: all 4.5s linear;
}

.bars li .bar.step6 {
  background: url("../images/services/urban_forest/step6.webp");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 180px;
  transition: all 5.5s linear;
}

.chartBars .bars li b {
  color: #5ba653;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
}
.step1_line{
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: #000;
  bottom: 22.5%;
  left: -4px;
  transform: rotate(-16deg);
}
.step2_line{
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: #000;
  bottom: 32.1%;
  left: -32px;
  transform: rotate(-6deg);
}
.step3_line{
  content: "";
  position: absolute;
  width: 214px;
  height: 5px;
  background-color: #000;
  bottom: 47.2%;
  left: -66px;
  transform: rotate(-24deg);
}
.step4_line{
  content: "";
  position: absolute;
  width: 214px;
  height: 5px;
  background-color: #000;
  bottom: 66.6%;
  left: -63px;
  transform: rotate(-13deg);
}


.brentwood_thum1{width: 49.7%;}
.brentwood_thum2{width: 49.7%;}
.brentwood_thum3{width: 100%;}

.koshambh_thum1{width: 100%;}
.koshambh_thum2{width: 47.95%;}
.koshambh_thum3{width: 51.45%;}

.project1_thum1{width: 50.95%;}
.project1_thum2{width: 48.45%;}
.project1_thum3{width: 46.35%;}
.project1_thum4{width: 52.9%;}
.project1_thum5{width: 100%;}

.project2_thum1{width: 31.5%;}
.project2_thum2{width: 35.75%;}
.project2_thum3{width: 31.5%;}

.vh_thum_100{width: 100%;}

.umargam_thum1 {
  width: 32.80%;
}

.umargam_thum2{
  width: 66.50%;
}
.nhsrcl_thum{width: 100%;}
.nhsrcl_thum1{width: 49.7%;}

.agriculture_college_thum1{width: 49.70%;}
.agriculture_college_thum2{width: 49.70%;}
.w_thum1{
  width: 50.25%;
}
.w_thum2{
  width: 49.15%;
}
.h400{
  max-width: 100%;
  height: 400px;
}
.w_t1{
  width: 34.25%;
}
.w_t3{
  width: 30%;
}
.h260{
  height: 260px;
}

@media screen and (max-width:767px){
  .title__line {
    font-size: 24px;
  }
  .title__line::after {
    top: 15px;
  }
  .gallery_flex {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
.nhsrcl_thum{width: 100%;}
.nhsrcl_thum1{width: 100%;}

.chartBarsWrap {
  margin-top: -125px;
  overflow-x: scroll;
}
 .right_view {
    font-size: 12px;
    margin-top: 5px;
    letter-spacing: 0.2px;
    margin-bottom: 0 !important;
  }
  .right_view i{
    margin-left: 5px
  }
  .chartBars .bars li {
  display: inline-block;
  flex: 0 1 18%;
  }

}

@media screen and (min-width: 600px) {
  .bar:before {
    font-size: 2em !important;
  }
  .chartBars3 .bar:before {
    font-size: 1.5em !important;
  }
}




