.topMenu{
    background-color: var(--bg);
    color: var(--card);
    padding: 7px 0;
    font-size: 12px;
}
.social img{
    width: 16px;
    height: 16px;
    margin-right: 1rem;
}
header{
    background-color: #fcfcfc;
    padding: 0px 0;
    box-shadow: 0 0 transparent, 0 0 transparent, 0 4px 6px rgba(30, 30, 30, .02), 0 8px 16px rgba(30, 30, 30, .02);
}
header .menu a{
    color: inherit;
    text-decoration: none;
    padding: 0rem 1rem;
    font-weight: 600;
}
header .menu a.active{
    border: var(--bg) solid 2px;
        padding: 7px 20px 6px 20px;
    border-radius: 26px;
}
header .menu a:hover{
    color: var(--bg);
}
header .menu a:last-child{
    padding-right: 0px;
}
.carousel-item{
    min-height: 500px;
    background-color: #333;
}
.services{
    background-color: var(--grabg);
    padding: 5rem 0;
}
.mainThumb{
    display: block;
    background: no-repeat center center;
    background-size: cover;
    border-radius: 12px;
    overflow: hidden;
    position: a;
}
.overlay{
    height: 500px;
    background-image:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1));
    position: relative;

}
.viewMore{
    position: absolute;
    border: #fff solid 2px;
    color: #fff;
    right: 1.5rem;
    top: 1.5rem;
    padding: .5rem 1rem;
    border-radius: 20px;
    display: flex;
    font-size: 12px;
    opacity: .5;
    transition: ease all .3s;
}
.viewMore img{
    width: 12px !important  ;
    margin-left: 10px;
}
.overlay:hover .viewMore{
    opacity: 1;
    background-color: var(--bg);
    transition: ease all .3s;   
}
.overlay h3{
    position: absolute;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: var(--card);
    bottom: 20px;
    font-size: 16px;
    margin: 0px;
    font-weight: normal;
}
.copyright{
    background-color: var(--bg);
    color: var(--card);
    font-size: 10px;
    padding: .75rem;
}
footer h3{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: .75rem;
}
footer .links a{
    text-decoration: none;
    color: var(--dark);
    display: block;
    padding: .5rem 0;
    color: var(--secondaryT);
}
footer p{
    line-height: 30px;
}
.environment{
    background-color: var(--pri);
}
.carousel-caption{
    left: inherit;
    right: inherit;
    bottom: inherit;
    top: 20%;
    text-align: left;
}
.carousel-caption h5{
    font-size: 1.75rem;
    max-width: 600px;
    text-align: left;
}
.carousel-caption h5 span{
    font-size: 4rem;
    max-width: 600px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    color: #D1D537;
}
.carousel-control-next, .carousel-control-prev{
    width: 8%;
}
.carousel-control-next-icon, .carousel-control-prev-icon{
    width: 1.25rem;
    height: 1.25rem;
}
.whitebtn{
    color: var(--card);
    border-color: var(--card);
}
.whitebtn span, .redbtn span, .blutBtn span{
    width: 26px;
    height: 26px;
    text-align: center;
    display: inline-block;
    background-color: var(--bg);
    border-radius: 16px;
    line-height: 24px;
    margin-left: .5rem;
}
.redbtn{
    color: #a51c07;
    border-color: #a51c07;
}
.redbtn span{
    background-color: #a51c07;
}
.blutBtn{
     color: #fff;
    border-color: #fff;
}
.blutBtn span{
    background-color: #16407c;
}
.carousel-indicators button{
    width: 10px !important;
    height: 10px !important;
    border-radius: 5px !important;
}
.leaf{
    width: 100px;
    height: 100px;
    display: inline-block;
    background: url(../img/leaf.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: -30px;
    top: -10px;
}
.ani1 {
    -webkit-animation: mover2 2s infinite  alternate;
    animation: mover2 2s infinite  alternate;
    display: block;
}

.leaf2{
    width: 100px;
    height: 100px;
    display: inline-block;
    background: url(../img/leaf2.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    bottom:-0px;
    left: -20px;
}
.ani2 {
    -webkit-animation: mover3 2s infinite  alternate;
    animation: mover3 2s infinite  alternate;
    display: block;
}
/* Animations */
@-webkit-keyframes mover1 {
    0% { transform: translateX(-50px); }
    100% { transform: translateX(-80px); }
}
@keyframes mover1 {
    0% { transform: translateX(-50px); }
    100% { transform: translateX(-80px); }
}
/* Animations */
@-webkit-keyframes mover2 {
    0% { transform: translateX(0px); }
    100% { transform: translateX(30px); }
}
@keyframes mover2 {
    0% { transform: translateX(0px); }
    100% { transform: translateX(30px); }
}
/* Animations */
@-webkit-keyframes mover3 {
    0% { transform: translatey(0px); }
    100% { transform: translatey(30px); }
}
@keyframes mover3 {
    0% { transform: translatey(0px); }
    100% { transform: translatey(30px); }
}
.item2{
    max-width: 50%;
}
.indusMain{
    background:#c9e0f3
}
.indusMain .carousel-caption h5{
    color: #333;
}
.indusMain .carousel-caption h5 span{
    color: #a51c07;
}
.engineer{
    background: url(../img/wastewater-treatment-upd.webp) no-repeat center center;
    background-size: cover;
}
.esg{
    background: url(../img/bg_esg.png)#0a2611 no-repeat left top;
}
.esgCaption{
    top: 30%;
}
.mainLogo{
    position: relative;
    top: 10px;
    background: #fcfcfc;
    z-index: 1;
    padding: 0 16px 10px 16px;
    border-radius: 12px;
}
.managedsystem{
    background-color: #917cd7
}
.managedsystem h5 span{
    color: #16407c;
}
.banner{
    box-shadow: 0 0 transparent, 0 0 transparent, 0 4px 6px rgba(30, 30, 30, .02), 0 8px 16px rgba(30, 30, 30, .02);
}

.about{
    padding: 5rem 0;
}
.abouticon{
    text-align: right;
}
.aboutText{
    width: 75%;
}
.aboutText span{
    font-weight: 600;
    color: #A51C07;
}
.owl-nav{
    position: absolute;
    top: -55px;
    right: 0px;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
    width: 30px;
    height: 30px;
    border: #ccc solid 1px !important;
    margin-left: 10px;
    font-size: 18px !important;
}
.services h3{
    margin-bottom: 2rem;
}
.mainContact .call{
    background: var(--suc);
    padding: 2rem;
    color: var(--card);
    position: relative;
}
.mainContact .call img, .mainContact .email img{
    position: absolute;
    right: 2rem;
    width: 75px;
}
.mainContact .email{
    background: var(--pri);
    padding: 2rem;
    color: var(--card);
    position: relative;
}
.mainContact .address{
    background: var(--bg);
    padding: 2rem;
    color: var(--card);
}
.mainContact h3{
        font-size: 1.25rem;
    padding: 5px 15px;
    margin-bottom: 1rem;
    display: inline-block;
    border: #fff dotted 1px;
    border-radius: 5px;
}
.mainContact h2{
    font-size: 1.5rem;
}
.mainContact a{
    color: var(--card);
}
.mainContact .address h2{
    font-size: 1.4rem !important;
    line-height: 28px
}
.owl-dots{
    display: none;
}
.mMenu{
    display: none;
}
.mobileMenu a{
    display: block;
    color: inherit;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    padding: 1rem 0;
    border-bottom:  solid 1px #e9e9e9
    
}
.inner{
    min-height:160px;
    display: flex;
    align-items: center;
    color: #fff;
}
.redBg{
    background-color: #a51c07;
}
.inner.redBg{
    border-bottom: solid 3px #fff;
}
.redBg h2.title{
    font-size: 3rem;
}
.innerAbout img{
    max-width: 500px;
}
.innerAbout h1{
    font-size: 2.5 rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.innerAbout h3  {
    font-size: 1.25rem;
}
.innerAbout p  {
    color: #757575;
}
.innerAbout ul{
    color: #757575;
    line-height: 1.75rem;
}
.eq_inner{
   display: flex;
  width: 100%;
  justify-content: center;
}

.eq_inner .half{
    display: flex;
    align-items: center;
    width: 50%;
}
.eq_inner .half.content{
    background-color:var(--bg);
    color: #fff;
    padding: 4rem 5rem 4rem 5rem;
    min-height: 660px;
}
.eq_inner .half.content.redBg{
    background-color: #a51c07 !important;
}
.eq_inner .half.content p, .eq_inner .half.content ul{
    font-size: 14px;
}
.half.content ul{
    padding: 0 0 0 17px;
}
.eq_inner .half.content h1{
    color: #dfc33a;
    font-weight: 600;
}
.eq_inner .half.content h3{
    font-size: 1.25rem;
    font-weight: 600;
    color: #dfc33a;
}
.eq_inner .half.content h2  {
    font-size: 1.5rem;
    font-weight: 600;
}
.eq_inner .half.content b{
    font-weight: 600 !important;
}
.imageContent{
    text-align: right;
}
.imageContent img{
    max-width: 100%;
    max-height: 100%;
}
.greenBtn, .greenBtn:hover{
    background-color: #D1D537;
    color: #072d1b;
    border: #fdff9f solid 1px;
    font-size: 16px;
    padding: 1rem 2rem !important;
    border-radius: 2rem !important;
    animation: blink 1s linear infinite;
}




@keyframes blink {
  0%, 100% {background-color:#D1D537;}
  50% {background-color: #ea8c07;}
}


@media (max-width: 576px) {
  /* Styles for screens 576px and wider */
  .aboutText{
    width: 100%;
    text-align: center;
    padding: 2rem;
  }
  .abouticon img{
    max-width: 100%;
  }
  .carousel-caption h5 span{
    font-size: 2.5rem;
  }
  .carousel-caption{
    width: 100%;
  }
  .carousel-caption, .carousel-caption h5{
    text-align: center;
  }
  .carousel-item{
    min-height: 450px;
  }
  .carousel-item img.float-end{
    display: none !important;
  }
}

@media (max-width: 992px) {
  /* Styles for screens 992px and wider */
  .menu{
    display: none;
  }
  .mMenu{
    display: block;
  }
  footer h3{
    margin-top: 2rem;
  }
  .eq_inner{
    display: block;
  }
  .eq_inner .half{
    width: 100%;
    min-height: 300px;
  }
  .eq_inner .half.content{
    padding: 2rem 2rem 2rem 2rem;
  }
}
@media (min-width: 1200px) {
  /* Styles for screens 1200px and wider */
}