@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif !important;
    overflow-x: hidden !important;
}

a {
    color: inherit !important;
    text-decoration: none !important;
}

li {
    list-style: none;
}

/*------ header  ------*/
.header {
    position: fixed;
    width: 100%;
    z-index: 10;
}

.social_head i {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background: #13acd8;
    font-size: 18px;
    margin-right: 10px;
    color: #ffffff;
    transition: all 0.3s ease 0s;
    border-radius: 50%;
}
.social_head i:hover {
    color: #fff;
    background: #1abc9c;
    border-radius: 50px;
    transform: rotate(360deg);
    transition: all 0.3s ease 0s;
}

.header_social {
    border-bottom: solid 0.001rem #ffffff;
    position: relative;
    padding: 0.5rem 0rem;
    /* display: none; */
    background: #ffffffd4;
    margin: 10px;
}

.header_social .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.3rem;
}

.header_social .social a i {
    font-size: 1.6rem;
    margin-right: 5px;

}
.header_social a i {
    color: #ffffff;
    font-size: 18px;
    /* padding-right: 2px; */
}
.header_social a {
    transition: all 0.3s ease 0s;
}

.header_social a:hover {
    color: #fff !important;
    transition: all 0.3s ease 0s;
}

header {
    width: 100%;
    color: #fff;
    z-index: 3;
    /* padding: 0.5rem 0rem; */
    /* background: #9c9c9c3d; */
    backdrop-filter: blur(1px);
}

.header_main {
    position: sticky;
    top: 0;
    padding: 0.5rem 0rem;
    z-index: 4;
    transition: all 0.5s;
}

.header_main.scrolled {
    top: 0;
    background: white;
    color: black;
    transition: all 0.5s;
}

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

.nav_logo.home,
.nav_logo-w.home {
    display: none;
}

.nav_main .nav_li {
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    flex-direction: row;
    gap: 0rem 1rem;
    list-style: none;
    flex-wrap: wrap;
}

.nav_main .nav_li {
    position: relative;

}

ul.nav_li a,
ul.nav_li div {
    padding: 10px;

}

.nav_main a {
    transition: all 0.3s ease 0s;
    padding: 0px 5px;
}

.nav_main a:hover {
    color: #1abc9c !important;
    transition: all 0.3s ease 0s;
}

.services_nav {
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

.services_nav li:hover {
    color: #1abc9c !important;
    transition: all 0.3s ease 0s;
}

.sub_nav {
    color: black;
    position: absolute;
    list-style: none;
    transition: 0.2s ease-in-out;
    list-style: none;
    padding: 10px 15px;
    display: none;
    /* padding: 10px 0px; */
    border-radius: 5px;
    /* margin-top: 21px; */
    padding: 0px;
    overflow: hidden;
    padding-top: 18px;
    z-index: 5;
}

.services_nav:hover .sub_nav {
    display: block;
}

.services_nav .sub_nav li {
    border-bottom: solid #bebdbd4a 1px;
    padding: 12px 12px;
    background: white;
}

.none {
    display: none !important;
}

.block {
    display: block !important;
}


/***** toggle button****/
.toggle_bt {
    display: flex;
    flex-direction: column;
    gap: 5px 0px;
    transition: 0.3s ease-in-out;
    /* display: none; */
    position: relative;
    display: none;
}

.toggle_bt span {
    width: 37px;
    height: 4px;
    background-color: rgb(131, 131, 131);
    transition: 0.3s ease-in-out;
}

.toggle_bt.\.toggle_active :nth-child(1) {
    transform: rotate(135deg);
    margin-bottom: -10px
}

.toggle_bt.\.toggle_active :nth-child(2) {
    margin-top: 15px;
    display: none;
}

.toggle_bt.\.toggle_active :nth-child(3) {
    transform: rotate(45deg);
    top: 5px;
}

/*------- Home-Banner -------- */

.home_banner {
    height: 100dvh;
    background-color: #1818184c;
    margin: 10px;
    border-radius: 30px;
}

.home_banner video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    left: 0;
    z-index: -1;
    border-radius: 30px;
}

.banner_text {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-content: center;
    height: 100%;
    text-align: center;
    justify-content: center;
    color: white;
    /* margin: 0 auto; */
    width: 100%;
    top: 0%;
    right: 0;
}

.banner_text h1 {
    font-weight: 700;
    font-size: 3.2rem;
    margin: 0;
}

.banner_text h2 {
    margin: 1.2rem 0rem 2rem 0rem;
    font-weight: 300;
}

.banner_text a {
    border: 2px solid #fff;
    padding: 10px 20px;
    border-radius: 10px;
}

.banner_text a:hover {
    color: #B9B4B0 !important;
    background: #fff;
    border: solid #fff;
}

/* --who-we-are-- */

.welcome {
    padding: 58px 77px 90px 77px;
    /* background-image: url(../images/who-we-bg.webp); */
    background: #F0F8FF;
    background: linear-gradient(180deg, rgba(240, 248, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background-size: cover;
    background-position: center;
}

.welcome h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0d416b;
    margin-bottom: 8px;
}

.welcome p {
    margin-bottom: 16px;
    color: #5a5a5a;
    text-align: justify;
    font-size: 15px;
}

.welcome button {
    background-color: #00b881;
    color: #fff;
    padding: 6px 14px;
    border-radius: 5px;
    border: none;
    transition: all 0.3s ease 0s;
}

.welcome button:hover {
    background-color: #2098D1;
    transition: all 0.3s ease 0s;
}

.img-responsive {
    width: 100%;
}


/*  ---Products--- */
#products {
    margin: 5rem 0rem;
}

.product_title {
    border-bottom: solid 1px #e0e0e0;
    font-weight: 600;
    margin-bottom: 40px;
    padding-bottom: 8px;
}

.product_card {
    display: flex;
    flex-direction: column;
    /* height: calc(100% - 1.5rem); */
    border: solid 1px #e0e0e0;
    margin-bottom: 20px;
    justify-content: space-between;
    border-radius: 20px;
}

.product_home .product_card {
    margin: 10px;
    border-radius: 20px;
}
.product_card .product-details {
    background: aliceblue;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}
.product_img img {
    width: 100%;
    object-fit: contain;
    height: 280px;
}

.product_img {
    position: relative;
    max-height: 280px;

}

.overlay_color1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000ad;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    transition: all 0.5s ease-in 0s !important;
}

.overlay_color1 a {
    padding: 10px 20px;
    background-color: #13ACD8;
    transition: all 0.3s;
}

.overlay_color1 a:hover {
    background-color: hsl(150, 100%, 40%);
    transition: all 0.3s !important;
}

.product_img:hover .overlay_color1 {
    display: flex !important;
    transition: all 0.5s ease-in 0s !important;
}


.product_data {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: start;
    gap: 0rem 0.5rem;
}

.product_info {
    padding: 10px;
    font-size: 1rem;
    font-weight: 400;
    max-width: 50%;
    overflow-wrap: anywhere;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 75px;
}

.product_price {
    padding: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #069a4f;
}

.product_purchase {
    gap: 0rem 0.5rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
}

.order_now,
.order_social {
    width: 50%;
}

.order_now button,
.order_social button {
    width: 100%;
    border: none;
    padding: 0;
    color: white;
    height: 100%;
    text-transform: uppercase;
}

.product_purchase .order_now button a,
.product_purchase .order_social button a {
    width: 100%;
    display: block;
    padding: 0.6rem 0.5rem;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 0rem 0.4rem;
    flex-wrap: wrap;
}

.product_purchase .order_now button a {
    background-color: #13acd8;
    border: solid #13acd8;
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}

.product_purchase .order_now button a:hover {
    background-color: #17beec;
    border: solid #17beec;
    color: #ffffff !important;
    transition: all 0.3s ease 0s;
}


.product_purchase .order_social button a {
    background-color: #00cc66;
    border: solid #00cc66;
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}

.product_purchase .order_social button a:hover {
    background-color: #08e175;
     border: solid #08e175;
    color: #ffffff !important;
    transition: all 0.3s ease 0s;
}

.more_products {
    display: grid;
    /* align-items: center; */
    justify-content: center;
    margin-top: 1.5rem;
}

.more_products button {
    border: none;
    background: #2098D1;
    top: 112px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    padding: 18px 0px;
    padding-left: 25px;
    border-radius: 5px;
    padding-right: 25px;
    transition: all 0.3s ease 0s;
}

.more_products button:hover {
    background-color: #00cc66;
    transition: all 0.3s ease 0s;
}

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


.threeone {
    background: #2098D1;
    color: #fff;
}

ul.squares li h4 {
    font-size: 15px;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 20px;
    transition: 0.5s;
    text-transform: uppercase;
}

.titlefont {
    font-family: "proxima_novalight";
}

/* .bg-blue-origin {
    background: #2098D1;
} */

.blue_items {
    background: #0bbd6d;
    background: linear-gradient(116deg, rgba(11, 189, 109, 1) 0%, rgba(19, 157, 212, 1) 100%);
    border-radius: 35px;
    margin-bottom: 7rem;
}

.blue_items ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    text-align: center;
    color: #fff;
    margin-bottom: 0%;
    /* flex-wrap: wrap; */
}

.blue_items ul li {
    width: 100%;
    border-right: 1px solid #ffffff6b;
    padding: 30px 0px;
    margin: 20px 0px;
}

.blue_items ul li:hover {
    background-color: #feffff62;
}

.blue_items ul li:hover img {
    transition: all 0.65s;
    transform: rotateY(360deg);
}

.blue_items ul li:last-child {
    border-right: 0px;
}

.blue_items img {
    margin-bottom: 1.5rem;
    transition: all 0.65s;
}

.blue_items span {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 20px;
    display: block;
}


.index_lab_bg {
    background-image: url(../images/water-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 5rem 0rem;
}

.index_lab_bg img {
    border-radius: 20px;
}

.index-lab-cnt {
    background: #f0f8ff66;
    backdrop-filter: blur(11px);
    height: 100%;
    border-radius: 15px;
    padding: 2rem;
    display: grid;
    align-items: center;
    align-content: center;
}


.index-lab-cnt h2 {
    font-size: 37px;
    font-weight: 500;
    color: #0075b7;
    text-transform: capitalize;
}

.index-lab-cnt p {
    /* color: #adadad; */
    color: #343434;
    text-align: justify;
    font-size: 15px;
}

.index-lab-cnt button {
    background-color: #00b884;
    color: #fff;
    padding: 6px 14px;
    border-radius: 5px;
    border: none;
    transition: all 0.3s ease 0s;
    margin-top: 4rem;
}

.index-lab-cnt button:hover {
    background-color: #2098D1;
    transition: all 0.3s ease 0s;
}

.services_main {
    padding: 5rem 0rem;
}

.services_main ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.commercial_01 {
    display: flex;
    /* border-right: 1px solid #e0e0e0; */
    padding: 1.5rem;
    /* border-bottom: 2px solid #e0e0e0; */
    transition: all 0.3s ease-in-out;
    flex-direction: column;
    background-color: #f4f4f4;
    margin: 0.5rem;
    border-radius: 15px;
    height: calc(100% - 1rem);
}

.commercial_01:hover {
    border-bottom: 2px solid #1691CE !important;
    background-color: #effbff;
    transition: all 0.3s ease-in-out;
}

.commercial_01 i {
    font-size: 35px;
    transition: all 0.65s;
    color: #009d56;
}

.commercial_01:hover i {
    transition: all 0.65s;
    transform: rotateY(360deg);
    color: #0087b6;
}

.commercial_01:nth-child(3) {
    border-right: 0px;
}

.commercial_01:nth-child(4) {
    border-bottom: 2px solid #fff;
}

.commercial_01:nth-child(5) {
    border-bottom: 2px solid #fff;
}

.commercial_01:nth-child(6) {
    border-right: none;
    border-bottom: 2px solid #fff;
}

.servi_icons {
    text-align: left;
    margin-bottom: 1rem;
}

.servi_cnt h4 {
    font-size: 20px;
}

.servi_cnt p {
    font-size: 15px;
}

/* .quality_bg {
    background-image: url(../images/product-banner.webp) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

.quality_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quality_cnt ul {
    display: grid;
    grid-template-columns: auto auto;
    padding: 20px 0px 0px 0px;
    list-style: none;
    gap: 25px;
    border-top: 1px solid #ffffff99;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.quality_cnt_bg {
    color: #fff;
    background: #0bbd6d;
    background: linear-gradient(116deg, rgba(11, 189, 109, 1) 0%, rgba(19, 157, 212, 1) 100%);
}

.quality_cnt {
    padding: 5rem;
}

.quality_cnt i {
    font-size: 15px;
    height: 33px;
    width: 33px;
    line-height: 33px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-right: 10px;
}

.quality_cnt p {
    font-size: 15px !important;
    color: #fff !important;

}

.quality_cnt h4 {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
}

.quality_cnt p {
    font-size: 14px;
    font-weight: 300;
    color: #9a9a9a;

}


.testi_bg {
    /* background-image: url(../images/tesi-bg.webp); */
    background-color: aliceblue;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0rem;
    position: relative;
}
.testi_img_slider{
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}
.testi_img_slider img {
    width: 100%;
    border-radius: 12px
}

.test_cnt {
    text-align: center;
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 0 2rem;
    margin: 2rem 0;
    position: relative;
    height: 400px;
    display: grid;
    justify-items: center;
    align-content: center;
    background: #fff;
}
.test_cnt img {
    width: 130px;
    height: 130px;
    object-fit: cover;
}

.test_cnt h5 {
    color: #151515;
    margin: 1rem 0rem;
}

.test_cnt p {
    color: #606060;
    font-size: 15px;
}

.testi_persons span {
    background-color: #53b548;
    position: absolute;
    top: -13px;
    padding: 6px 35px;
    border-radius: 50px;
    color: #fff;
    transform: translate(0%, -17%);
}

/****** client carousal ******/
/* section#client_list_icon {
    padding: 2rem;
} */

section#client_list_icon img {
    width: 50%;
    padding: 10px;
}

.client_slides {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/********** page *******/
#page-id {
    /* height: 230px; */
    background: url(../images/water-aboutus-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-pool-clean {
    /* height: 230px; */
    background: url(../images/water-dringwater-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-waste-water {
    /* height: 230px; */
    background: url(../images/water-waste-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-rain-water {
    /* height: 230px; */
    background: url(../images/water-rain-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-water-lab {
    /* height: 230px; */
    background: url(../images/water-waterlab-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-water-clients {
    /* height: 230px; */
    background: url(../images/water-client-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-water-blogs {
    /* height: 230px; */
    background: url(../images/water-blog-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-water-blog-inner {
    /* height: 230px; */
    background: url(../images/water-blog-more-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-water-products {
    /* height: 230px; */
    background: url(../images/water-product-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-water-products-details {
    /* height: 230px; */
    background: url(../images/water-products-more-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-gallery {
    /* height: 230px; */
    background: url(../images/water-gallery-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-career {
    /* height: 230px; */
    background: url(../images/water-carre-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-waste-features {
    /* height: 230px; */
    background: url(../images/water-featured-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-waste-about {
    /* height: 230px; */
    background: url(../images/water-aboutus-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-contact {
    /* height: 230px; */
    background: url(../images/water-contact-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

#page-order {
    /* height: 230px; */
    background: url(../images/water-product-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    /* background-image: url(../images/water-dringwater-banner.jpg); */
    color: white;
}

.page h2 {
    font-weight: 400 !important;
}

.breadcrupms {
    font-size: 15px;
    font-weight: 400;
}

.breadcrupms a:hover {
    color: #000 !important;
    font-weight: 300;
    transition: all 0.3s ease 0s;
}

/* --------------faq----------------- */

.faq-item {
    border-bottom: 1px solid #ddd;
    /* padding: 18px 0; */
    padding-top: 18px;
    font-family: "Inter", sans-serif;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    cursor: pointer;
    position: relative;
    margin: 0;
    padding: 10px;
    /* background: #f7f7f7; */
    border-radius: 5px;
}

.faq-question:hover {
    background: #e9f5fe;
}

.faq-answer {
    display: none;
    padding: 10px;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 10px;
    font-size: 20px;
}

.faq-question.active::after {
    content: '-';
}

.faq_head h3 {
    margin-left: 2rem;
}

.faq_head p {
    margin-left: 2rem;
    width: 60%;
    font-size: 15px;
}

/* ---------------faq----------------- */

/*********** About Us ***********/
.section_padd {
    padding: 100px 0 60px;
}
.abt-marg{
    margin-bottom: 5rem;
}
.about {
    display: flex;
    align-items: center;
    height: 100%;
}
.about_drop_img{
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.main_heading_h1 {
    font-weight: 400 !important;
    margin-bottom: 20px;
    color: #222222;
}

.main_heading_h4 {
    font-weight: 300 !important;
    text-transform: capitalize !important;
}

.quality_cnt h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.para_sm {
    font-size: 14px !important;
    text-align: justify;
    color: #6f6f6f;
    width: 95%;
    margin-bottom: 35px;
}

.short_info_cards {
    padding: 20px;
    background: #138fcf;
    color: white;
}

.service_card {
    margin-bottom: 30px;
}

.service_img {
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.service_img img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    /* border-radius: 12px; */
}

.service_img:hover img {
    transform: scale(1.2);
    object-fit: cover;
}


.card_data {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 15px;
    padding: 10px;
}

.br-right {
    border-right: solid 1px;
}

.card_info_data {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



/*********** Drinking water purification ***********/
.water_puri {
    background-image: url(../images/water-dringwater-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.bgblue {
    background: #0bbd6d;
    background: linear-gradient(116deg, rgba(11, 189, 109, 1) 0%, rgba(19, 157, 212, 1) 76%);
    color: #fff;
}

.mtb30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.commercial {
    padding: 100px 10%;
}

.separator100 {
    width: 100%;
    height: 1px;
    background: #e2e2e2;
}

.advan ul{
    line-height: 28px;
    padding-left: 0px;
}
.bgwhite {
    background-color: #fff;
}

.section_img img {
    height: 100% !important;
    object-fit: cover;
}

/* .technologies_10 h3 {
    text-align: center;
    font-weight: 200;
    margin-bottom: 30px;
} */
.technologies_10 {
    width: 100%;
}

.separator_underline {
    width: 33%;
    height: 1px;
    background: #e2e2e2;
    margin: 50px auto;
    margin-top: 10px;
}

.technologies_10 ul {
    padding: 0%;
}

.technologies_10 ul li {
    float: left;
    width: 20%;
    overflow: hidden;
    transition: all 0.5s !important;
}

.technologies_10 ul li img {
    width: 100%;
    position: relative;
    transition: all 0.5s !important;
}

/* ////// */
.overlay_color {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000ad;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    transition: all 0.5s !important;
}

.overlay_color h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 300;
}

.technologies_10 ul li:hover .overlay_color {
    display: flex !important;
    transition: all 0.5s !important;
}

.technologies_10 ul li:hover img {
    transform: scale(1.1);
    transition: all 0.5s !important;
}


.our_technol h3 {
    margin-top: 20px;
    padding: 15px;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #787878;
}

/* ////// */
.dom_puri {
    margin-left: 100px !important;
    padding-right: 10px !important;
}

.dom_puri h4 {
    margin-bottom: 20px;
}

.dom_puri p {
    margin-bottom: 20px;
    width: 100% !important;
    padding-right: 20px;
}

.dom_puri i {
    font-size: 15px;
    height: 33px;
    width: 33px;
    line-height: 33px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-right: 10px;
}

.section_img_carousal img {
    width: 100%;
    border-radius: 20px;
}

.tech_none {
    padding: 10px 0;
    border: 5px solid #86C352;
    border-radius: 10px;
}

.points {
    display: none;
    background-color: #86C352;
}

.points h3 {
    color: #fff !important;
}

/*********** waste water purification ***********/
.waste_wtr {
    background-image: url(../images/water-waste-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.border_4 {
    margin: 0;
    border: 1px solid #E2E2E2;
    border-radius: 20px;
    overflow: hidden;
}

.ind_wtr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ind_wtr p {
    font-size: 18px;
    width: 80%;
    text-align: justify;
}

.text_back {
    padding: 48px;
}

.more_details {
    margin-top: 1.5rem;
}

.more_details button {
    border: none;
    background: #2098D1;
    top: 112px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 0px;
    padding-left: 25px;
    padding-right: 25px;
    transition: all 0.3s;
}

.more_details button:hover {
    background: #00cc66;
    transition: all 0.3s;
}

.border_4 img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.fig {
    overflow: hidden;
}

.fig img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.fig:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    object-fit: cover;
}



.suitable_4 {
    background-color: #FCFCFC;
    padding: 40px 0;
    margin-top: 50px;
    text-align: center;
}

.suitable_4 img {
    width: 100%;
    border-radius: 12px;
}

.side_padd {
    padding: 0px 10%;
}

.suitable_name {
    padding: 10px;
    background-color: #F6F6F6;
}

/*** waste water inner ****/
.inner_service_bg {
    background: url(../images/service_img/service-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 250px 0 250px;
    color: white;
}

.inner_h1 {
    font-size: 65px;
    font-weight: 700;
}

.inner_service_bg p {
    font-size: 20px !important;
    font-weight: 200 !important;
}



/* ==membrane== */
.inner_stablebg {
    padding: 50px 0px 50px;
    background-image: url(../images/tesi-bg.webp);
    color: #fff;
    background-attachment: fixed;
}

.Treatment-methods1 li:nth-child(5) {
    border-bottom: 0px;
}

.Treatment-methods2 li:nth-child(4) {
    border-bottom: 0px;
}

.features_pg1 {
    padding: 0 !important;
}

.features_pg1 img {
    width: 100%;
    object-fit: none;
}

.features_pg1 ul {
    padding: 0%;
}

.features_pg1 li {
    padding: 10px;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
    width: 80%;
}

.features_pg1 li:last-child {
    border-bottom: 0px;
}

.features_pg1 li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 15px;
}

.features_pg1 .separator100 {
    width: 80%;
}

.Why_mbr {
    padding: 0 10%;
}

.Why_mbr ul {
    padding: 0%;
}

.Why_mbr li {
    border-bottom: 1px solid #e2e2e2;
    padding: .7rem;
}

.Why_mbr li:nth-child(10) {
    border-bottom: 0px;
}

.Why_mbr li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 15px;
}

.general_info {
    padding: 0 10% !important;
}

.general_info img {
    width: 100%;
    object-fit: none;
}

.general_info ul {
    padding: 0%;
}

.general_info li {
    padding: 10px;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
}

.general_info li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 15px;
}

.general_info .Treatment-methods1 li:nth-child(4) {
    border-bottom: 0px;
}

.general_info .Treatment-methods2 li:nth-child(3) {
    border-bottom: 0px;
}

/* ==ozone== */

.ozone_bnfts .border_4 {
    border: 0;
    background-color: #F6F6F6;
}

.ozone_bnfts img {
    width: 100%;
    object-fit: none;
}

.ozone_bnfts ul {
    padding: 0%;
}

.ozone_bnfts .separator100 {
    width: 80%;
}

.ozone_bnfts li {
    padding: 10px;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
    width: 80%;
}

.ozone_bnfts li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 15px;
}

.ozone_bnfts li:nth-child(13) {
    border-bottom: 0px;
}

/* ==effluent== */

.advantages {
    padding: 0 10% !important;
}

.advantages img {
    width: 100%;
    object-fit: cover;
}

.advantages ul {
    padding: 0%;
}

.advantages li {
    padding: 10px;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
}

.advantages li:nth-child(6) {
    border-bottom: 0px;
}

.advantages li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 15px;
}

/* ==sewage== */

/*********** rain water purification ***********/
.rain_wtr {
    background-image: url(../images/water-rain-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.rainwtr_main {
    padding: 5rem 0rem;
}

.rainwtr_main ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.rainwtr_main .commercial_02:hover {
    border-bottom: 2px solid #1691CE !important;
    background-color: #effbff;
    transition: all 0.3s ease-in-out;
}

.rainwtr_main .commercial_02 i {
    font-size: 35px;
    transition: all 0.65s;
}

.rainwtr_main .commercial_02:hover i {
    transition: all 0.65s;
    transform: rotateY(360deg);
    color: #0087b6;
}

.rainwtr_main li {
    display: flex;
    border-right: 1px solid #e0e0e0;
    padding: 2rem;
    border-bottom: 2px solid #e0e0e0;
}

.rainwtr_main li:nth-child(3) {
    border-right: 0px;
}

.rainwtr_main li:nth-child(6) {
    border-right: 0px;
}

.rainwtr_main li:nth-child(9) {
    border-right: 0px;
}

.rainwtr_main li:nth-child(10) {
    border-bottom: 2px solid #fff;
}

.rainwtr_main li:nth-child(11) {
    border-bottom: 2px solid #fff;
}

.rainwtr_main li:nth-child(12) {
    border-bottom: 2px solid #fff;
    border-right: 0px;
}


.name_cntr {
    display: flex;
    align-items: center;
}


/*********** rain water purification ***********/

.pollution_consult {
    background-image: url(../images/water-waste-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.watr_lab {
    padding: 0 10% !important;
    margin: 70px 0px;
}

.watr_lab img {
    width: 100%;
    object-fit: cover;

}

.watr_lab ul{
    line-height: 25px;
}
.watr_lab li {
    padding: 5px;
}

.watr_lab li::before {
    font-family: 'FontAwesome';
    content: "\f043";
    margin-right: 10px;
    color: #00cc66;
    font-size: 15px;
}


/*********** features main page ***********/

.features_main {
    background-image: url(../images/water-featured-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.features_pg {
    padding: 0 10% !important;
    margin: 48px 0;
    padding: 40px 0;
}

.features_pg img {
    width: 100%;
    object-fit: none;
}

.features_pg ul {
    padding: 0%;
}

.features_pg li {
    padding: 18px 1px;
    color: #666;
    border-bottom: 1px solid #e2e2e2;
}

.features_pg li:last-child {
    border-bottom: 0px;
}

.features_pg li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 15px;
}




/*********** features main page ***********/

.watermaq_waterlab {
    background-image: url(../images/water-waterlab-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.water_lb {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.water_lb ul {
    padding: 0%;
}

.water_lb li {
    padding: 5px;
}

.water_lb li::before {
    font-family: 'FontAwesome';
    content: "\f043";
    margin-right: 15px;
    color: #00cc66;
    font-size: 16px;
}

.waterlab_imges {
    background: #f0fffa;
}

.waterlab_imges .service_img {
    padding: 0 0px;
}

.waterlab_imges i {
    margin-top: 5px;
    font-size: 35px;
    padding-right: 10px;
    transition: all 0.3s ease;
    transition: all 0.6s;
}

.waterlab_imges .service_card:hover i {
    color: #0874BA;
    transition: all 0.3s ease;
    transform: scale(1.1);
    transform: rotateY(360deg);
    transition: all 0.6s;
}

.service_info {
    background: #ffffff;
    padding: 10px;
    height: 200px;
    border-radius: 0 0 20px 20px;
    border: 1px solid #efefef;
}



/*********** features main page ***********/

.clients_main {
    background-image: url(../images/water-client-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.technologies_1000 ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    padding: 3rem 0rem;
}

.technologies_1000 ul li {
    float: left;
    width: 40%;
    overflow: hidden;
}

.technologies_1000 ul li img {
    width: 100%;
    position: relative;
    transition: all 0.3s;
    filter: grayscale(1);
}

.technologies_1000 ul li img:hover {
    width: 100%;
    /* position: relative; */
    transition: all 0.3s;
    filter: grayscale(0);
}

/*********** blogs main page ***********/

.blog_bg {
    background-image: url(../images/water-blog-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.blog_contents {
    background: #fff;
    padding: 5px;
    -webkit-box-shadow: 0 6px 22px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 6px 22px 0 rgb(0 0 0 / 8%);
    margin-bottom: 25px;
    height: 100%;
}

/* .blog_cont {
    padding: 48px !important;
} */

.relative {
    position: relative;
}

.relative img {
    width: 100%;
    object-fit: cover;
    height: 250px;
    object-position: center;
}

.relative.inner img {
    width: 100%;
    object-fit: cover;
    height: 450px;
    object-position: center;
}

.blogdate {
    text-transform: uppercase;
    background: #585858;
    position: absolute;
    bottom: 0;
    left: 0px;
    padding: 5px 20px;
    text-align: center;
    border-radius: 0px 10px 0px 0px;
}

.blog_cont {
    padding: 13px;
    /* margin-top: 20px; */
    padding-right: 1rem;
    padding-top: 5px;
}

.blog_cont h1 {
    font-size: calc(1.4rem + 1.2vw);
}

.blog_cont h2 {
    font-size: calc(0.8rem + 1vw);
}

.blog_cont h3 {
    font-size: calc(0.6rem + 1.2vw);
}

.blog_cont h4 {
    font-size: calc(0.4rem + 1.2vw);
}

.blog_cont h6 {
    font-size: calc(0.3rem + 1.2vw);
}

.blog-category {
    margin-bottom: 0.5rem;
    /* text-align: right; */
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 0 0.2rem;
}

.blog-category span {
    /* background: #efefef; */
    border-radius: 3px;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    color: #000000a6;
}

.blog-sm_head {
    text-transform: capitalize;
    color: #0087b6;
    font-weight: 600 !important;
    font-size: 25px !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.details_blog_head {
    text-transform: capitalize;
    color: #0087b6;

}

.blog_cont p {
    font-size: 14px;
    /* text-align: justify; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.blog_cont button {
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.blog_cont button:hover {
    background-color: #2098D1;
    color: #fff;
    transition: all 0.3s;
}

/*********** blogs details page ***********/

.blog_details_bg {
    background-image: url(../images/water-blog-more-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.blog_categ {
    padding: 10px;
}

.smh6 h6 {
    font-weight: 600 !important;
}

.blog_categ ul {
    padding: 0;
}

.blog_categ ul li {
    padding: 10px 0;
    border-bottom: 1px solid #ededed;
}

.blog_categ ul li:hover {
    color: #1abc9c;
    border-bottom: 1px solid #1abc9c;
}

.blog_categ ul li::before {
    font-family: 'FontAwesome';
    content: "\f054";
    margin-right: 12px;
    color: #666;
    font-size: 10px;
}

.blog_cont-inner {
    padding: 20px;
}

.blog_cont-inner p {
    font-size: 14px;
    text-align: justify;

}

.blog_cont-innner_btn {
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.blog_cont-innner_btn:hover {
    background-color: #2098D1;
    color: #fff;
    transition: all 0.3s;
}

/*********** Products page ***********/

.products_ban {
    background-image: url(../images/water-product-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

/*********** Products details page ***********/

.products_details_ban {
    background-image: url(../images/water-products-more-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.product_sm {
    height: 100%;
}

.product_sm img {
    border: 1px solid #e1e1e1;
    padding: 15px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
}

.product_lg {
    border: 1px solid #e1e1e1;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

.product_lg img {
    width: 100%;
    padding: 50px;
    height: 100%;
    object-fit: contain;
}

.product_text_lg {
    /* border:1px solid #e1e1e1; */
    height: 100%;
    /* background-color: #dff7ff; */
    padding: 26px;
}

.product_price_lg {
    color: #00CC66;
    font-weight: 300;
}



.order_now01 button,
.order_social01 button {
    width: 100%;
    border: none;
    padding: 0;
    color: white;
    height: 100%;
    text-transform: uppercase;
    border-radius: 10px;
}

.order_now01 button a,
.order_social01 button a {
    width: 100%;
    display: block;
    padding: 0.6rem 0.5rem;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 0rem 0.4rem;
    flex-wrap: wrap;
}

.order_now01 button a {
    background-color: #13acd8;
    border: solid #13acd8;
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}

.order_now01 button a:hover {
    background-color: #17beec;
    border: solid #17beec;
    color: #ffffff !important;
    transition: all 0.3s ease 0s;
}


.order_social01 button a {
    background-color: #00cc66;
    border: solid #00cc66;
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}

.order_social01 button a:hover {
    background-color: #08e175;
    border: solid #08e175;
    color: #ffffff !important;
    transition: all 0.3s ease 0s;
}



/*********** gallery page ***********/

.gallery_ban {
    background-image: url(../images/water-gallery-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}



#gallery {
    padding-top: 40px;
}

@media screen and (min-width: 991px) {
    #gallery {
        padding: 60px 10px 0 30px;
    }
}

.img-wrapper {
    position: relative;
    /* margin-top: 15px; */
}

.img-wrapper img {
    width: 100%;
}

.img-overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.img-overlay i {
    color: #fff;
    font-size: 2em;
}

#overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#overlay img {
    margin: 0;
    width: 80%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 5%;
}

@media screen and (min-width: 768px) {
    #overlay img {
        width: 60%;
    }
}

@media screen and (min-width: 1200px) {
    #overlay img {
        width: 50%;
    }
}

#nextButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.3s;
}

#nextButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #nextButton {
        font-size: 3em;
    }
}

#prevButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.3s;
}

#prevButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #prevButton {
        font-size: 3em;
    }
}

#exitButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.3s;
    position: absolute;
    top: 15px;
    right: 15px;
}

#exitButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #exitButton {
        font-size: 3em;
    }
}


/*********** contact us  page ***********/

.contact_ban {
    background-image: url(../images/water-contact-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.comp_dtls a {
    transition: all 0.3s;
}

.comp_dtls a:hover {
    color: #1abc9c !important;
    transition: all 0.3s;
}

.comp_dtls i {
    color: #000;
    margin-right: 10px;
    font-size: 16px;
}

.horiline {
    height: 0.5px !important;
    background-color: #bbbbbb;
    width: 90%;
    margin: 15px 0;
}

.contact_mainform {
    padding: 0 40px;
}

.contact_mainform input,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    font-size: 15px;
    color: #032a37;
}

.contact_mainform input:focus-visible,
.contact_mainform textarea:focus-visible {
    outline: 1px solid #0087b6;
}

.contact_mainform button {
    background: #F0F0F0;
    padding: 10px 20px;
    border: none;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.contact_mainform button:hover {
    background: #1abc9c;
    color: #fff;
    transition: all 0.3s;
}


/*********** career page ***********/

.career_ban {
    background-image: url(../images/water-carre-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.careerr p {
    font-size: 18px;
    width: 80%;
    text-align: start !important;

}

.bg222 {
    background-color: #222222;
    color: #fff;
}

.bg222 i {
    font-size: 20px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50px;
    transition: all 0.6s;
}

.bg222 p:hover i {
    transform: rotateY(360deg);
    transition: all 0.6s;
}

.italic {
    text-align: center !important;
    font-style: italic;
}

.avai_jobs {
    text-align: center;
    padding: 30px 30px 50px 30px;
    box-shadow: 0 0px 15px 0 rgb(0 0 0 / 15%);
    margin-bottom: 25px;
    margin-top: 30px;
    border: 1px solid #ffffff;
    transition: all o.3s;

}

.avai_jobs:hover {
    border: 1px solid #1abc9c;
    transition: all o.3s;
}

.avai_jobs img {
    transition: all 0.6s;
}

.avai_jobs:hover img {
    transform: rotateY(360deg);
    transition: all 0.6s;
}

.avai_jobs p {
    text-align: center;
}

.apply_btn {
    padding-top: 15px;
}

.apply_btn a {
    padding: 14px 25px;
    background-color: #1abc9c;
    color: #fff !important;
    transition: all o.3s;
}

.apply_btn a:hover {
    background-color: #0087b6;
    transition: all o.3s;
}

#apply input,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    font-size: 14px;
}

#apply input:focus-visible,
#apply textarea:focus-visible {
    outline: 1px solid #0087b6;
}

.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    font-family: 'FontAwesome';
    content: '\f0ee' 'upload Resume';
    display: inline-block;
    background: #1F94D1;
    border: 2px solid #1F94D1;
    border-radius: 3px;
    padding: 10px 10px;
    outline: none !important;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    color: #fff;
    transition: all 0.3s;
    letter-spacing: 2px;
    font-size: 15px;
}

.custom-file-input:hover::before {
    background: #fff;
    color: #1F94D1;
    transition: all 0.3s;
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}


#apply select {
    width: 100%;
    padding: 12px;
    margin-bottom: 30px;
    font-size: 14px;
}

#apply label {
    padding: 10px;
}

#apply button {
    background: #F0F0F0;
    padding: 10px 20px;
    border: none;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

#apply button:hover {
    background: #1abc9c;
    color: #fff;
    transition: all 0.3s;
}



/******** Order page ******* */

.order_ban {
    background-image: url(../images/water-blog-banner.jpg);
    text-align: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    padding: 90px 0 90px;
    color: white;
}

.order_form label {
    width: 100%;
    margin-bottom: 5px;
    font-size: 14px;
    color: #222222;
}

.order_form input {
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    border: none;
    border: 1px solid #ddd;
    height: 40px;
    border-radius: 10px;
}

.order_form textarea {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    border: none;
    border: 1px solid #ddd;
    height: 100%;
    border-radius: 10px;
}

.spn_red {
    color: red;
}

.payment-box {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .06);
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .06);
    margin-top: 10px;
    padding: 30px;
    border-radius: 20px;
}
/* ///////// */

.payment-box .payment-method p [type=radio]:checked {
    display: none
}

.payment-box .payment-method p [type=radio]:checked+label {
    padding-left: 27px;
    cursor: pointer;
    display: block;
    font-weight: 600;
    color: #323232;
    position: relative;
    margin-bottom: 8px
}

.payment-box .payment-method p [type=radio]:checked+label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff
}

.payment-box .payment-method p [type=radio]:checked+label::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #069a4f;
    position: absolute;
    top: 6px;
    left: 3px;
    border-radius: 50%;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.payment-box .payment-method p [type=radio]:not(:checked) {
    display: none
}

.payment-box .payment-method p [type=radio]:not(:checked)+label {
    padding-left: 27px;
    cursor: pointer;
    display: block;
    font-weight: 600;
    color: #323232;
    position: relative;
    margin-bottom: 8px
}

.payment-box .payment-method p [type=radio]:not(:checked)+label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff
}

.payment-box .payment-method p [type=radio]:not(:checked)+label::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #7c1109;
    position: absolute;
    top: 6px;
    left: 3px;
    border-radius: 50%;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.payment-box .btn.order-btn {
    display: block;
    margin-top: 25px
}

.payment-box .default-btn {
    margin-top: 20px;
    display: block;
    text-align: center
}

/* /////// */
.payment-method label {
    font-size: 16px;
    font-weight: 500;
}

.order_now_last button {
    /* width: 100%; */
    border: none;
    padding: 0%;
    color: white;
    height: 100%;
    text-transform: uppercase;
    border-radius: 10px;
}

.order_now_last button a {
    width: 100%;
    display: block;
    padding: 10px 20px;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 0rem 0.4rem;
    flex-wrap: wrap;
    background-color: #13acd8;
    border: solid #13acd8;
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}

.order_now_last button a:hover {
    background-color: #fff;
    color: #13acd8 !important;
    transition: all 0.3s ease 0s;
}




/*******Floating bt*/

.whatsapp_bt {
    position: fixed;
    bottom: 15px;
    left: 15px;
}

.whatsapp_bt button {
    padding: 3px 12px;
    border-radius: 100%;
    border: none;
    color: white;
    background: #25D366;
    font-size: 29px;
    /* box-shadow: 0px 6px 9px -2px #b9b9b963; */
    z-index: 999;
    transition: all 0.3s
}

.whatsapp_bt button:hover i {
    transform: scale(1.1);
    transition: all 0.25s;
    cursor: pointer;
}

.floating_brochure {
    transform: rotate(270deg);
    position: fixed;
    top: 50%;
    left: -40px;
    display: block;
    z-index: 5;
    padding: 10px 20px;
    color: #fff;
    font-size: 13px;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background: #13acd8;
    /* overflow: hidden; */
    letter-spacing: .08em;
    border: none !important;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
}
.floating_brochure p {
    padding: 0;
    margin: 0;
}

.child_bt {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: -1;
    transform: rotate(90deg);
    display: none;
}
.child_bt a {
    width: 90px;
    /* border-radius: 3px; */
    font-size: 12px;
    color: white;
    padding: 15px;
    background: #13acd8;
    display: block;
    transition: 0.3s ease-in-out;
    border-radius: 0px 10px 0px 0px;
}
.child_bt a:nth-child(2) {
    border-radius: 0px 0px 10px 1px;
}
.floating_brochure:hover .child_bt {
    display: block;
}

.child_bt a:hover {
    background: #00bff5;
}

/**** floating form ****/
.sidebar-contact {
    position: fixed;
    top: 50%;
    right: -350px;
    transform: translateY(-50%);
    width: 350px;
    height: auto;
    padding: 40px 25px;
    background: #fff;
    box-shadow: 0 7px 18px rgb(0 0 0 / 26%);
    box-sizing: border-box;
    transition: 0.5s;
    z-index: 9;
}


.active {
    right: 0px;
}

.toggle {
    position: absolute;
    text-align: center;
    cursor: pointer;
    /* background: #2ba251; */
    top: 120px;
    left: -48px;
    line-height: 48px;
}

.toggle h6 {
    transform: rotate(270deg);
    font-size: 15px;
    position: absolute;
    width: max-content;
    left: -40px;
    top: 42px;
    color: #e5e5e5;
    font-weight: 500;
    background-color: #13acd8;
    padding: 15px;
    border-radius: 10px 10px 0px 0px;
    text-transform: uppercase;
}

.cnt_close {
    position: absolute;
    top: 0px;
    font-size: 18px;
    cursor: pointer;
    display: none;
    left: 0;
    background-color: #2ba251;
    padding: 0.5rem 1rem;
    color: #fff;
}

.sidebar-contact input,
.sidebar-contact textarea {
    width: 100%;
    height: 36px;
    padding: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid rgb(0 0 0 / 22%);
    border-radius: 5px;
    outline: none;
}

.sidebar-contact textarea {
    height: 60px;
    resize: none;
}

.sidebar-contact input[type="submit"] {
    background: #00bcd4;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 18px;
    padding: 0;
}


/****** Footer ******/

footer {
    padding: 2rem 0rem !important;
    background-color: #222;
    color: #999999;
}

footer a {
    color: #999999;
    transition: all 0.3s;
}

footer h6 {
    color: white;
}


.ftr_info img {
    width: 180px;
    margin-bottom: 20px;
}

.ftr_info p {
    font-size: 14px;
}

.ftr_nav ul,
.ftr_contact ul {
    list-style: none;
    padding: 0;
    font-size: 14px;
}

.ftr_nav ul li,
.ftr_contact ul li {
    border-bottom: solid 1px #ffffff17;
    padding: 0.6rem 0rem;
    transition: all 0.3s;
}

.ftr_nav ul li:hover,
.ftr_contact ul li:hover {
    border-bottom: solid 1px #1abc9c !important;
    transition: all 0.3s;
}

.ftr_nav ul li:hover a,
.ftr_contact ul li:hover a {
    color: #1abc9c !important;
    transition: all 0.3s;
}


.ftr_nav ul li:last-child,
.ftr_contact ul li:last-child {
    border-bottom: solid 1px #222222;
}

.social_footer i {
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background: #1F94D1;
    font-size: 20px;
    margin-right: 10px;
    color: #fff;
    transition: all 0.3s ease 0s;
    border-radius: 50px;
}

.social_footer i:hover {
    color: #fff;
    background: #1abc9c;
    border-radius: 50px;
    transform: rotate(360deg);
    transition: all 0.3s ease 0s;
}

.copyrt {
    text-align: end;
}

.d5n:hover {
    color: #1abc9c;
    text-decoration: underline;
    transition: all 0.3s;
}









#gallery .card_cnt_data {
    display: flex;
    gap: 0 0.6rem;
}

#gallery .store_card_cnt {
    padding: 0.5rem;
}

#gallery .store_card_img img {
    border-radius: 8px;
}

#gallery .card {
    border: none;
}

#gallery .selector {
    margin: 5rem 0rem;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0px 4rem;
}

#gallery .selector_tab {
    padding: 0.7rem 0.5rem;
    /* background: #F0F0F0; */
    /* border-radius: 42px; */
    color: #000;
    transition: 0.5s all;
    border-bottom: 3px solid #ffff;
}

/* #gallery  .selector_tab:hover,
#gallery  .selector_tab:active {
    background: #FFA221;
    color: #fff;
} */
#gallery .filter-section {
    /* padding: 30px 60px; */
    transition: 1.3s;
}

#gallery .controls ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 0;
}

#gallery .controls ul li {
    /* color: #f1f1f1;
  opacity: .7;
  background: transparent; */
    display: inline;
    /* padding: 12px 16px; */
    margin: 0 5px;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    -webkit-tap-highlight-color: transparent;
}

#gallery .controls ul li:hover,
#gallery .controls ul li.active {
    text-underline-offset: 0.5rem;
    border-bottom: 3px solid #1abc9c;
}

#gallery .clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

#gallery .item-grid {
    margin-top: 50px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    width: 100%;
    flex-wrap: wrap;
    gap: 15px 0px;
}



#gallery .item-grid .item a,
#gallery .item-grid .item img {
    object-fit: fill;
    height: 350px;
}

#gallery .item-grid .item {
    display: none;
    overflow: hidden;
    max-height: 550px;
}

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

/* thank you */

.thanks h1 {
    font-size: 50px;
    font-weight: 300;
}

.thanks h3 {
    font-weight: 300;
}

.gotohome {
    margin-top: 1.5rem;
}

.gotohome button {
    border: none;
    background: #00cc66;
    top: 112px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 0px;
    padding-left: 25px;
    padding-right: 25px;
    transition: all 0.3s;
    border-radius: 8px;
}

.gotohome button:hover {
    background: #2098D1;
    transition: all 0.3s;
}

#enquirysubmit {
    width: 100%;
    border: none;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    background-color: #00CC66;
    transition: all 0.3s ease 0.s;
}

#enquirysubmit:hover {
    background-color: #0087b6;
    transition: all 0.3s ease 0.s;
}


/* ----------- FRP NEW STYLES ----------- */
.newstyle_inner .curved {
    padding: 0%;
    border-radius: 18px;
    overflow: hidden;
}

.newstyle_inner .short_info_cards {
    padding: 0px 20px;
}

.section-1 {
    margin: 60px 0;
}

.section-1 .bg {
    background-color: #f5f5f5;
    padding: 45px 40px;
    border-radius: 24px;
}

.section-1 .image {
    height: 100%;
}

.section-1 .image img {
    width: 100%;
    border-radius: 15px;
    /* max-height: 400px; */
    height: 100%;
    object-fit: cover;
    object-position: left;
}


.section-1 .text {
    padding: 20px 20px;
}

.new_style_btn button {
    border-radius: 10px;
}

/* process */


.process {
    margin-top: 80px;
}

.process .pointss p span {
    font-weight: 700;
}

.process .pointss h2 {
    text-align: center;
    padding-bottom: 30px;
}

.process .pointss p {
    margin: 0;
    font-size: 18px;

}

.process .pointss .point-1 {
    border-bottom: 0.5px solid rgba(108, 108, 108, 0.283);
    margin: 20px 0;
}


.process .pointss .text img {
    width: 20px;
    height: 20px;
}

.process .pointss .text {
    display: flex;
    gap: 30px;
    padding-bottom: 20px;
}

/* tips */

.tips {
    margin: 60px 0;
}

.tips .cnt img {
    width: 15%;
    padding-bottom: 10px;
}

.tips .cnt {
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    height: calc(100% - 10px);
}

.features_frp ul li {
    float: left;
    width: 20%;
    padding: 5px;
    height: 100%;
    margin-top: 10px;
}

.features_frp .features_content {
    width: 100%;
    padding: 20px;
    border-radius: 15px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
    height: calc(100% - 25px);
}

.features_frp .features_content img {
    width: 35px;
    margin-bottom: 10px;
}

.center {
    display: flex;
    justify-content: center;

}


/* ----------- FRP NEW STYLES ----------- */


/* ----------- SWIMMING POOL CONSULTANT NEW STYLES ----------- */

.background {
    /* margin-top: 60px; */
    margin: 60px 0px;

}


.background .bg-image {
    background-image: url(../images/service_img/pool/bg.png);
    height: 60vh;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
}


.background .content {
    background-color: #fff;
    backdrop-filter: blur(10px);
    width: 70%;
    border-radius: 15px;
    padding: 40px 60px;
}

.background .content h1 {
    text-align: center;
    font-size: 40px;
    font-weight: 650;
    padding: 0 80px;
}

.background .content p {
    font-size: 16px;
    padding-top: 10px;
}

@media screen and (max-width:768px) {
    .row_rev {
        display: flex;
        flex-direction: column-reverse;
    }

}

.filtration .bg {
    background-image: url(../images/service_img/pool/filter_bg.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
}

.filtration h3 {
    padding-top: 40px;
    text-align: center;
    color: #ffffff;
}

.filtration .bg .img {
    width: 50%;
    padding: 40px 0px 30px 40px;
}

.filtration .bg .ctnt h4 {
    color: #ffffff;
    padding-top: 30px;
}

.filtration .bg .ctnt p {
    color: #ffffff;
    padding-top: 30px;
}

.filtration .bg .ctnt {
    padding-right: 50px;
}

.filtration .bg .btn {
    color: #ffffff;
    padding-top: 90px;
}

.filtration .bg .btn a {
    background-color: #138FCF;
    padding: 10px 35px;
    border-radius: 15px;
}

.filtration {
    padding-bottom: 60px;
}

/* Advantages1 */

.advantages1 h3 {
    text-align: center;
}

.icon1 li img {
    width: 60px;
    margin-right: 10px;
}

.icon1 li {
    list-style: none;
    padding: 12px 0px;
    display: flex;
    align-items: center;
}

/* .advantages1 .icon1 {
    padding-top: 30px;
} */

/* ----------- SWIMMING POOL CONSULTANT NEW STYLES ----------- */
.frp_products {
    margin-bottom: 50px;
}

.products_gallery {
    height: 100%;
    margin-bottom: 20px;
}

.products_gallery_img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.products_gallery_img {
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.productname {
    position: absolute;
    bottom: -8px;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    background-color: #138FCF;
    color: #fff;
    font-size: 15px;
    border-radius: 0px 0px 15px 15px;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.3s;
}

.products_gallery:hover .productname {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s;
}