:root {
    --black: #080809;
    --white: #fff;
    --logo-color: rgb(36 135 228);
    --logo-color: rgb(0 49 155);
    --logo-bg: grey;
}

body {
    font-family: "Roboto", sans-serif;
}

::-moz-selection {
    background-color: black;
    color: #fff;
}

::selection {
    background-color: black;
    color: #fff;
}


ul,
li {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
font-family: "Roboto", sans-serif;
  font-weight: 600;
}

a:focus,
a:hover {
    text-decoration: none;
}

p {

    color: rgb(7 26 67);
    font-family: "Oxygen", sans-serif;
    margin-bottom: 15px;
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
}

svg,
img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}


/* **********************************************************************/
/* **********************************************************************/
/* **********************************************************************/
/* **********************************************************************/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--logo-color);
    border-radius: 6px;
    border: 2px solid white;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* **********************************************************************/
/* **********************************************************************/
/* **********************************************************************/
/* **********************************************************************/





/* fixed-wtsapp-btnn */
.fixed-wtsapp-btnn {
    color: white;
    background-color: var(--logo--orange);
    background-color: rgb(44, 107, 178);
    border-radius: var(--border-radius);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    z-index: 100;
    text-decoration: none;
}

.fixed-wtsapp-btnn {
    bottom: 20px;
    background: #81d742;
    border: 1px solid #81d742;
}

.fixed-wtsapp-btnn i {
    font-size: 25px;
}

.fixed-wtsapp-btnn:hover {
    color: #81d742;
    border: 1px solid #81d742;
    background-color: white;
    transition: 0.4s;
}



/* **********************************************************************/
/* **********************************************************************/

h5 {
    font-size: 30px;
    /* font-weight: bold; */
    color: var(--logo-color);
    margin-bottom: 15px;
}

span.under-line {
    height: 1px;
    width: 100px;
    background-color: var(--logo-color);
    margin: 10px 0 20px 0;
    display: inline-block;
}




/* **********************************************************************/

/* header-top */
.header-top {
    width: 100%;
    padding: 10px 0;
}

.header-top .container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-top .logo {
    /* height: 90%; */
}


/* header-contact */
.header-contacts {
    display: flex;
    gap: 25px;
}

.header-contact {
    display: flex;
    gap: 10px;
}

.header-contact i {
    color: var(--logo-color);
}

.header-contact a {
    color: var(--logo-color);
    text-decoration: none;
}





/* header-bottom */
.header-bottom {
    height: 50px;
    width: 100%;
    background-color: rgb(36 135 228);
    background-color: var(--logo-color);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header-bottom .container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-bottom nav ul {
    display: flex;
    gap: 40px;
}

.header-bottom nav ul li {
    list-style-type: none;

}

.header-bottom nav ul li a {
    color: white;
    text-decoration: none;
    text-transform: capitalize;
    font-family: "Oxygen", sans-serif;
}


.para_big{
        color: rgb(7 26 67);
    font-family: "Oxygen", sans-serif;
    margin-bottom: 15px;
        font-size: 20px;
}


/* **********************************************************************/
/* banner */
/* #banner {
    padding: 0;
    height: 500px;
    width: 100%;
   
    background-image: url(../images/banner/banner2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#banner .banner-txt {
    height: 100%;
    width: 100%;
    background-color: rgb(0 0 0 / 70%);
}

#banner .banner-txt .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#banner .banner-txt h1 {
    color: white;
    text-align: center;
    margin-bottom: 10px;
}

#banner .banner-txt p {
    color: white;
}
 */



/*==============================================================
	banner Style start
==============================================================*/
.banner-wrap{
	height: auto;
	position: relative;
	overflow: hidden;
}
.shape{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.shape svg{
	width: 100%;
}
.banner-slider{
	height: 100%;
}
.banner-slider > .banner-slide{
	display: none;
}
.banner-slider > .banner-slide:first-child{
	display: block;
}
.slick-initialized .banner-slide{
	position: relative;
	height:500px;
	/* padding-bottom: 300px; */
	display:-webkit-flex !important;
	display:flex !important;
	-webkit-align-items:center;
	align-items:center;
}

.banner-slider .slick-arrow{
	position: absolute;
	right: 25px;
	bottom: 50px;
	font-size: 0;
	background: #ffffff;
	border: 0;
	width: 50px;
	height: 50px;
	z-index: 12;
	cursor: pointer;
	border-radius: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.12);
}
.banner-slider .slick-arrow:before{
	    font-family: 'remixicon' !important;
	font-size: 30px;
	text-align: center;
	line-height: 50px;
	color: rgba(0,33,71,1);
}
.banner-slider .slick-arrow.slick-prev{
	right: 95px;
}
.banner-slider .slick-arrow.slick-prev:before{
	content: "\ea60";
}
.banner-slider .slick-arrow.slick-next{
	right: 25px;
}
.banner-slider .slick-arrow.slick-next:before{
	content: "\ea6c";
}
.hero-image{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center center;
}
.banner-wrap .container{
	position: relative;
	z-index: 12;
}
.hero-overlay{
	background: #081c2d;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .5;
}
.hero-content{	
	color: #ffffff;
}
.hero-content p{
	font-size: 20px;
	line-height: 32px;
	max-width: 600px;
	color: rgba(255,255,255,0.9);
	letter-spacing: 0.010em;
}
.hero_big{
  color: #FFF;
  font-size: 34px;
}
.blog-detail-banner .hero-content{
	max-width: 900px;
}
.blog-detail-banner .hero-content h1{
	font-size: 53px;
}
.hero-content h3{
	font-size: 16px;
	color: rgba(255,255,255,.6);
	text-transform: uppercase;
	letter-spacing: 3px;
	position: relative;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 12px;
	margin-left: 6px;
}
.hero-content h1{
	font-size: 63px;
	line-height: 1.333;
	margin-bottom: 18px;
	color: #e6e8f6;
	font-weight: 400;
	max-width: 760px;
  font-family: "Source Sans 3", sans-serif;
}
.hero-content .cta-btn{
	padding-top: 30px;
}
.hero-content .cta-btn .cta-link.cta-outline-white:hover{
	background: #ffffff;
	color: rgba(0,33,71,1);
}
/*==============================================================
	banner Style end
==============================================================*/ 



/* **********************************************************************/
/* marquee - overlay fade method (solid background) */
#marque {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 20px 0;
    background: #eef1f5;
}

/* make sure the track sits behind the overlays */
#marque .marquee-track {
    display: flex;
    width: max-content;
    animation: scroll-left 40s linear infinite;
    position: relative;
    z-index: 1;
}

#marque::before,
#marque::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 140px;
    /* adjust fade width */
    z-index: 10;
    /* sit above the logos */
    pointer-events: none;
}

/* left fade (white -> transparent) */
#marque::before {
    left: 0;
    width: 200px;
    /* increased from 100px */
    background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
}

/* right fade (white -> transparent) */
#marque::after {
    right: 0;
    width: 200px;
    /* increased from 100px */
    background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
}


#marque .marque-img {
    flex: 0 0 auto;
    margin: 0 40px;
}

#marque img {
    max-height: 60px;
    display: block;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* keep your duplication strategy */
}





/* **********************************************************************/
/* about */

.sec-pad{
    padding: 80px 0;
}
#about h5 {
    /* font-size: 40px; */
    /* font-weight: 600; */
    width: 70%;
}

#about .abt-img {
    height: 400px;
    width: 100%;
    background-image: url(https://images.unsplash.com/photo-1605608800690-9e496dfdac1c?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




/* about-card */
.about-card {
    min-height: 230px;
    margin: 20px 0 20px 0;
}

.about-card i {
    display: inline-block;
    font-size: 50px;
    color: var(--logo-color);
    margin-bottom: 5px;
}

.about-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--logo-color);
}

.about_bottom{
    padding: 40px 0;
}
.title h3{
        font-family: "Oxygen", sans-serif;
    margin-bottom: 40px;
    color: #00319b;
}



/* abt-highlights */
.abt-highlights {
    text-align: center;
    margin: 50px 0 0 0;
}

.abt-highlights .col-md-3 {
    border-right: 1px solid var(--logo-color);
}

.abt-highlights .col-md-3:last-child {
    border-right: 0px solid var(--logo-color);
}

.abt-highlights h3 {
    display: inline-block;
    font-size: 50px;
    margin-bottom: 10px;
}

.abt-highlights .abt-count-icon {
    color: var(--logo-color);
    font-size: 30px;
}

.image_box{
    position: relative;
}
.image_box img{
        position: relative;
}
.experience{
        position: absolute;
    /* top: 88px; */
    z-index: 9;
    text-align: center;
    background: #00319b;
    border-radius: 15px 15px 15px 15px;
    padding: 20px 15px;
    width: 200px;
    bottom: 73px;
    right: 378px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.about{
    position: relative;
    padding: 40px 0;
}
.years h5{
    color: #FFF;
    font-size: 21px;
}
.certi{
        font-family: "Oxygen", sans-serif;
    margin-bottom: 40px;
    color: #00319b;
}
/* **********************************************************************/
/* services */

#services {
    background: #eef1f5;
}

#services .title {
    text-align: center;
}

#services .service-card {
    height: 300px;
    padding: 15px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* water-treatment */
#services .water-treatment {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgb(0 0 0 / 75%)), url(https://images.unsplash.com/photo-1521207418485-99c705420785?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.1.0);
}

/* effluent-treatment */
#services .effluent-treatment {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgb(0 0 0 / 75%)), url(https://images.unsplash.com/photo-1593410007149-d56f28d22493?q=80&w=1331&auto=format&fit=crop&ixlib=rb-4.1.0);
}

/* sewage-treatment */
#services .sewage-treatment {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgb(0 0 0 / 75%)), url(https://images.unsplash.com/photo-1705708551758-76b153fa536e?q=80&w=1332&auto=format&fit=crop&ixlib=rb-4.1.0);
}

/* wastewater-recycling */
#services .wastewater-recycling {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgb(0 0 0 / 75%)), url(https://images.unsplash.com/photo-1591076749332-648a7b97873f?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0);
}

/* chemicals-treatment */
#services .chemicals-treatment {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgb(0 0 0 / 75%)), url(https://images.unsplash.com/photo-1562411403-f583472c8e87?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0);
}

/* plant-management */
#services .plant-management {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgb(0 0 0 / 75%)), url(https://images.unsplash.com/photo-1533077162801-86490c593afb?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0);
}


/* services i  */
#services .service-card i {
    color: white;
    background: var(--logo-color);
    padding: 10px;
    font-size: 30px;
}

/* services a */
#services a {
    color: white;
    text-decoration: none;
}

#services a:hover i {
    background-color: rgb(36 135 228 / 50%);
    transition: 0.3s;
    border-radius: 30px;
}

#services h3 {
    margin-bottom: 5px;
}

#services p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.775);
}






/* **********************************************************************/
/* testimonials */
#testimonials .title {
    text-align: center;
}

#testimonials .item {
    padding: 0 25px;
    text-align: center;
}

#testimonials .item i {
    color: var(--logo-color);
    font-size: 25px;
}

#testimonials h6 {
    margin-top: 15px;
    color: var(--logo-color);
}







/* **********************************************************************/
/* footer */
footer {
    background: rgb(0 34 109);
    padding: 50px 0 0 0;
}
footer .under-line{
    background-color: white;
    margin: 10px 0 20px 0;
}


/* logo */
footer .logo {
    height: 100px;
}




/* nav  */
footer h3 {
    color: white;
    font-size: 20px;
}

footer ul li {
      list-style-type: circle;
    color: #FFF;
    font-family: "Oxygen", sans-serif;
    padding-bottom: 10px;
}

footer ul li a {
    text-decoration: none;
    color: white;
    text-transform: capitalize;
    font-size: 15px;
}


.footer h4{
    font-family: "Oxygen", sans-serif;
font-size: 20px;
    line-height: 1.4;
}






/* footer-contact */
footer .contact-info-box {
    margin-bottom: 10px;
    color: white;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex; */
    gap: 15px;
}

footer .contact-info a {
    color: white;
    text-decoration: none;
}

.contact-info-box h5{
        font-size: 24px;
    color: #FFF;
    font-weight: 400;
    margin-bottom: 10px;
}


/* **********************************************************************/
/* copy-rights */
.copy-rights {
    color: white;
    padding: 15px 0;
    border-top: 1px solid #7592d2;
    margin-top: 20px;
}

.copy-rights a {
    color: white;
}

.copy-rights .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* footer-top */
.footer-top{
    background: url(../images/client_bg.png);
    background-position: top;
    background-size: cover;
        background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
        padding-top: 14em !important;
    padding-bottom: 0!important;
}

.footer-top-contact{
    background: #FFF;
    width: 90%;
    margin: 0 auto;
        border-radius: 6px;
    padding: 8px 8px 0;
    background: #FFFFFF;
    box-shadow: 0px 7px 18px rgba(24, 16, 16, 0.1725490196);
    position: relative;
    z-index: 999;

}
.footer-top-left{
        padding-left:70px;
padding-top: 50px;
    padding-right: 20px;
}
footer{
    /* margin-top: -80px; */
}
.footer{
    /* padding-top: 85px; */
}
.footer-contact{
    margin-bottom: 15px;
}
.footer-top-location h6{
        color: #ffffff;
    background: #00319b;
    font-size: 22px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.cnct-text h6{
    padding-bottom: 8px;
}
.cnct-text i{
    padding-right: 5px;
}
.footer-contact h4{
        font-size: 26px;
    color: #00319b;
    margin-bottom: 15px;
}
.title{
    text-align: center;
}
.public_sector h4 , .industrial h4{
            font-size: 26px;
    color: #00319b;
    margin-bottom: 15px;
    text-align: center;
    margin-bottom: 30px;
}
.client_img{
        border: 1px solid #7b9fed;
    margin-bottom: 10px;

}
.services{
    padding: 40px 0;
}

.service-left h2{
        font-size: 50px;
    font-weight: 700;
    color: #00319b;
    margin-bottom: 30px;
}
.service-content-img {
   margin: 30px auto;
   text-align: center;
}
.service-list li{
    padding-top: 5px;
    padding-bottom: 5px;
       font-size: 18px;
    font-weight: 600;
    color:#101418;
    list-style-position: inside;
        font-family: "Oxygen", sans-serif;
}

.abt-img{
        height: 400px;
    width: 100%;
    background-image: url(https://images.unsplash.com/photo-1605608800690-9e496dfdac1c?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* page banner */

.page-banner {
    background: url(../images/page-title.jpg);
       position: relative;
    width: 100%;
    padding: 30px 0px 215px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.page-banner::after{
    position: absolute;
    content: '';
    background: url(../images/wave-1.png);
    width: 100%;
    height: 143px;
    left: 0px;
    bottom: 0px;
    background-repeat: repeat-x;
}

/* .page-banner-bg {
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgb(0 40 121 / 90%);
    padding: 10% 0%;
    height: 300px;
} */

.page-title h2 {
    font-size: 60px;
    color: #00319b;
    text-transform: capitalize;
    padding-bottom: 15px;
}

.page-title span {
    color: #070707;
}
.page-title a {
   
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    text-transform: capitalize;
    text-decoration: none;
        font-family: "Oxygen", sans-serif;
}

.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 200px;
  overflow-x: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.theme_bg{
    background: #0077C0;
}

.color_white {
    color: #fff;
}

.mb_30 {
    margin-bottom: 30px;
}
.fw_bold {
    font-weight: 700;
}
.fs_30 {
    font-size: 30px;
}
.flexbox_1
 {
    display: flex;
    flex-wrap: wrap;
}

.mb_45 {
    margin-bottom: 45px;
}
.bg_white {
    background-color: #fff;
}

.b_radius_5 {
    border-radius: 5px;
}
.mr_20 {
    margin-right: 20px;
}
.lh_60 {
    line-height: 60px;
}
.h_55 {
    height: 55px;
}
.w_55 {
    width: 55px;
}
.fs_30 {
    font-size: 30px;
}
.pb_1 {
    padding-bottom: 1px;
}

.pt_40 {
    padding-top: 40px;
}
.px_30 {
    padding-left: 30px;
    padding-right: 30px;
}
.icon i{
    color: #0077C0;
}
h6{
color: #00b1eb;
    margin-bottom: 20px;
    font-weight: 500;
    font-size:18px;
    font-family: "Oxygen", sans-serif;
}
a{ text-decoration: none;}
.map_location{
        background: #eee;
    padding: 15px;
}
.map_location h3{
    color: #00319b;
    margin-bottom: 10px;
    font-size: 24px;
}

.content_box{
        box-shadow: 0px 0px 30px 0px rgba(99.99999999999997, 70, 214, 0.14);
    padding: 30px;
    margin-bottom: 30px;
}

.dd-description{
        color: rgb(7 26 67);
    font-family: "Oxygen", sans-serif;
    margin-bottom: 15px;
}

dt {
    font-weight: 700;
    font-size: 26px;
}

.service-img{
    height: 400px;
    width: 100%;
    background-image: url(../images/service-img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 40px 0;
}
.related_services{
    background: #eff4f8;
    margin-bottom: 40px;
    padding: 40px 0;}

.related_service_grid{
    border: 1px solid #eeeeee;
    border-radius: 5px;
    margin: 0px 0px 30px 0px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    background: #FFF;
}
.related_service_grid p{
    margin: 5px;
    font-size: 15px;
    color: #00319b;
    text-align: center;
    font-weight: 600;
}

/* **********************************************************************/
/* **********************************************************************/
/* **********************************************************************/
/* **********************************************************************/