@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


:root {
    --primary-color: #000c17;
    --secondary-color: #7ae7ff;
    --black-color: #000000;
    --light-blue: #011222;
    --dark-blue: #000c17;
    --white-color: #ffffff;
    --font-base-size: 16px;
    --bs-border-radius: 0.6rem;
    --base-font-family: 'Poppins', sans-serif;
    --paregraph-font-family: 'Nunito Sans', sans-serif;
}
*, *::before, *::after, a, .btn {
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
html, body {overflow-x: hidden;}
body{font-size: 16px; font-family: var(--paregraph-font-family); background-color: var(--primary-color);}
p{font-size: 16px; line-height: 1.6;}

input[type="search"] {-webkit-appearance: none;  -moz-appearance: none;  appearance: none; outline-offset: 0px;}
input[type="search"]:focus-visible {outline: 0px;}

.bg-light{background-color: var(--light-blue) !important;}
.bg-dark{background-color: var(--dark-blue) !important;}

.btn-primary{background-color: var(--primary-color); color: #FFFFFF; border: none; font-weight: 500; padding: 0.5em 1.5em; text-decoration: none; border-radius: 4px;}
.btn-primary:hover{background-color: var(--secondary-color); color: #FFFFFF;}

.btn-outline-primary{background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); font-weight: 500; padding: 0.5em 1.5em; text-decoration: none;}
.btn-outline-primary:hover{background-color: var(--primary-color); color: #FFFFFF; border: 2px solid var(--primary-color);}

.btn-round{border-radius: 50px;}
.mt-n5{margin-top: -2em;}
.spacer{height: 2em;}

ul, li, ol, ul li, ol li{margin: 0; padding: 0; list-style: none;}
a{text-decoration: none;}

.light-blue-bg{background-color: var(--light-blue);}

.team-box{background-color: var(--primary-color);}

.navbar{padding: 0;}
.screen-reader-text{display: none; visibility: hidden; opacity: 0;}

.menu-item a{color: #2f415b; font-weight: 500; text-decoration: none; padding: 0.5rem 1rem;}
.menu-item a:hover{color: var(--primary-color);}

#logo{max-height: 100%; width: 70%; padding: 8px 0; -webkit-transition: all 0.25s ease-in-out;  -o-transition: all 0.25s ease-in-out;  transition: all 0.25s ease-in-out;}
.site-header.sticky-header #logo{width: 60%;}
.site-header.sticky-header{ position: fixed; top: 0; left: 0; width: 100%; 
    box-shadow: 0 5px 15px rgba(253,180,2,0.06);z-index: 999;
    background: linear-gradient(
    to bottom,
    rgba(0, 8, 17, 1) 0%,
    rgba(0, 8, 17, 0.8) 25%,
    rgba(0, 8, 17, 1) 60%,
    rgba(0, 8, 17, 1) 100%
);
backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.swiper-button-next, .swiper-button-prev{color: var(--light-blue);}

header.site-header.sticky-header{height: auto;}

.footer{background-color: var(--light-blue); padding: 4rem 0 2rem;}
.footer .custom-html-widget p{color: rgba(255, 255, 255, 0.8); font-size: 1em; font-weight: 400;}
.footer-bottom{border-top: solid 0px rgba(255, 255, 255, 0.25); padding-top: 0rem; margin-top: 1.5rem;}

div#footer-wrapper ul[id^=menu-] li a {position: relative;display: inline-block;color: #fff;text-decoration: none; margin: 0 0 0.65rem 0; padding: 0; text-decoration: none; opacity: 1; font-weight: 400;}
div#footer-wrapper ul[id^=menu-] li a:hover { opacity: 1;}
div#footer-wrapper ul[id^=menu-] li a:before {
    visibility: hidden;
    opacity: 0;
    display: none;
    position: absolute;
    top: 7px;
    left: 0;
    color: #4bd6ff;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.625rem;
    line-height: 100%;
    content: "\f054";
    transition: all 0.3s ease-in-out;
}
div#footer-wrapper ul[id^=menu-] li a:hover:before {left: 0.25rem;}

.footer-bottom a{color: #FFFFFF; font-weight: 400; text-decoration: none;}
.footer-bottom p{color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; font-weight: 600; opacity: 1;}

div#footer-wrapper h5.footer-title{color: #4bd6ff; font-weight: 500; line-height: 100%;  margin-bottom: 1.2rem; text-transform: uppercase; font-size: 1.1em; 
font-family: var(--base-font-family);}
div#footer-wrapper p.iconnew {position: relative; margin-left: 1.75rem;}
div#footer-wrapper p.iconnew:before {
    position: absolute;
    top: 7px;
    left: -1.75rem;
    color: #FFFFFF;
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 100%;
}

div#footer-wrapper p.address:before {content: "\f1ad";}
div#footer-wrapper p.phone:before {content: "\f879"; font-weight: 600;}
div#footer-wrapper p.hours:before {content: "\f017";}
div#footer-wrapper p.canada:before {font-family: "Font Awesome 6 Brands"; content: "\f785";}
div#footer-wrapper div.textwidget .footer-logo p{display: block; color: #FFFFFF; opacity: 0.8;}
div#footer-wrapper div.textwidget .footer-logo .logo{display: block; margin-bottom: 1rem; width: 50%;}

div#footer-wrapper div#seals{width: 80%; margin: 0 auto; text-align: center;}
div#footer-wrapper div#seals img{width: 80px; opacity: 0.8;}

#banner-wrapper{position: relative; width: 100%; height: auto;  background-color: transparent; z-index: 1;}
#banner-wave{-webkit-mask: url("../images/banner-wave.svg");
    mask: url("../images/banner-wave.svg");
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto;
    mask-size: auto;}

section{padding: 5rem 0;}
.btn-lg{padding: 8px 40px; font-size: 1em; font-weight: 600;}

.section-heading{margin-bottom: 2rem;}
.section-heading h2{font-family: 'poppins'; color: var(--white-color); font-size: calc(var(--font-base-size) * 1.6); font-weight: 400; margin-bottom: 1.2rem;}
.section-heading h3{font-family: 'poppins'; color: var(--secondary-color); font-size: calc(var(--font-base-size) * 1); font-weight: 400;}
.section-heading p{color: var(--white-color);}
.section-heading h4{font-family: 'poppins'; color: var(--white-color); font-size: calc(var(--font-base-size) - 0px);}

.product-box{padding: 25px 0;}
.product-box .card{overflow: hidden;}
.product-box .card-body{padding-bottom: 1.25rem;}
.product-box .product-image{overflow: hidden;}
.product-box .card:hover .product-image img {transform: scale(1.05);}
.product-box .card-text{margin-bottom: 1em; color: var(--black-color);}
.product-box .card-title{color: var(--secondary-color); font-size: calc(var(--font-base-size) * 1.2); margin-bottom: 0.8em; line-height: normal;}

.logo-section .logoSwiper .swiper-slide{display: flex; align-items: center; justify-content: center;}
.logo-section .logoSwiper .swiper-slide img{margin: 0 auto;}

.logo-section .logoSwiper .swiper-pagination{position: relative; padding-top: 20px;}

.cta-bar-content{background: #FFFFFF; padding: 50px; border: 2px solid #ededed; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); background-image: url(https://www.hpwaterservices.com/wp-content/themes/custom/assets/images/backgrounds/bg-cta.png); background-position: left center;  background-repeat: no-repeat;  background-size: cover;}
.cta-bar-content p{font-size: calc(var(--font-base-size) * 1.1);}
.cta-bar-content .cta-call{font-size: calc(var(--font-base-size) * 1.1); font-weight: 700; margin-top: 10px;}

.three-block-item{margin: 1.8em 0 0; text-align: center;}
.three-block-item .three-block-icon, .feature-box .feature-icon{display: inline-block; border: 2px solid var(--primary-color); padding: 8px; border-radius: 10px; margin-bottom: 1.3em; background: #f0f9fd;}
.three-block-item h3, .feature-box h3{font-family: 'poppins'; font-size: calc(var(--font-base-size) * 1.4); color: var(--primary-color); margin-bottom: 0.8em;}

.feature-box p{font-size: calc(var(--font-base-size) * 1.05); margin-bottom: 1em;}

.block-item h2{font-family: 'poppins'; font-size: calc(var(--font-base-size) * 1.5); color: var(--primary-color); margin-bottom: 0.5em;}
.block-item .btn{padding: 5px 20px;}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}



/* Main Navbar */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Main Menu Item */
.navbar-nav > li {
    position: relative;
}

/* Main Menu Link */
.navbar-nav > li > a {
    display: block;
    padding: 25px 0;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: var(--base-font-family);
}

.navbar-nav > li > a::after {
    margin-top: 3px;
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: transparent;
    transition: width 0.3s;}

.navbar-nav > li:hover a::after, .navbar-nav > li.current-menu-item > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #fcb401;
    transition: width 0.3s;
}

.navbar-nav > li.current-menu-item > a {
    color: #fcb401;
}

.navbar-nav > li > a:hover {
    color: #fcb401;
}

/* Dropdown Menu */
.navbar-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 10px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 999;
    font-family: var(--base-font-family);
}

/* Show Dropdown */
.navbar-nav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Item */
.navbar-nav .sub-menu li {
    width: 100%;
}

/* Dropdown Link */
.navbar-nav .sub-menu li a {
    display: block;
    padding: 10px 20px 10px 35px;
    color: #163f5f;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 15px;
    position: relative;
    font-family: var(--base-font-family);
}

/* Hover */
.navbar-nav .sub-menu li a:hover {
    background: #f5f5f5;
    color: #0d6efd;
}

.navbar-nav .sub-menu li a::before{
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    color: #0d6efd;
}
.navbar-nav .sub-menu li a:hover::before{
    left: 20px;
}

/* Arrow Icon */
.navbar-nav .menu-item-has-children > a::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 12px;
}

@media(max-width:991px){
    .navbar-nav{
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-nav .sub-menu{
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        padding-left: 15px;
    }
    .navbar-nav li:hover > .sub-menu{
        display: block;
    }
}


.innerpage-banner{position: relative; width: 100%;  background-size: cover; background-position: top center; display: block; margin: 0; padding: 0;}
.innerpage-banner::after{content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35);}
.innerpage-banner h1{font-family: 'poppins'; position: relative; z-index: 2; color: #fff; font-size: 2.9em; text-align: center; padding: 120px 15px 120px; text-transform: uppercase; font-weight: 600;}
.innerpage-banner .breadcrumb-wrapper{position: relative; padding: 18px 0; z-index: 2; text-align: center; background: rgba(0, 10, 22, 0.5);}
.innerpage-banner .breadcrumb{margin: 0; padding: 0; list-style: none; display: inline-flex; gap: 5px;}
.innerpage-banner .breadcrumb .breadcrumb-item{font-size: 1.05em; font-weight: 500; text-transform: uppercase; font-family: 'poppins'; color: var(--white-color); padding: 0;}
.innerpage-banner .breadcrumb .breadcrumb-item a{color: var(--white-color); text-decoration: none;}
.innerpage-banner .breadcrumb .breadcrumb-item a:hover{color: var(--secondary-color);}

.innerpage-banner .breadcrumb li::before{content: ''; margin: 0; padding: 0;}
.innerpage-banner .breadcrumb li:after {position: relative; top: 0px; margin: 0 0.5rem 0 0.5rem; content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1em; line-height: 100%;}
.innerpage-banner li:last-child:after{margin: 0; content: "";}

.content h5{display: inline-block; font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.2); margin-bottom: 0.3em; margin-top: 1.2em;}
ul.arrow-list li{position: relative; padding: 4px 0 6px 15px; color: var(--black-color);}
ul.arrow-list li::before{content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #0d6efd;}
ul.arrow-list li a{color: var(--primary-color); text-decoration: none;}
    
.testimonialSwiper .swiper-button-next, .testimonialSwiper .swiper-button-prev{color: var(--primary-color);}
.testimonialSwiper .swiper-button-next:after, .testimonialSwiper .swiper-button-prev:after {font-size: 1.5em;}    
.testimonialSwiper .testimonial-item{padding: 0 80px;}
.testimonialSwiper .testimonial-item h5{font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.2); margin-bottom: 0.3em;}
.testimonialSwiper .swiper-button-prev{left: 0px;}
.testimonialSwiper .swiper-button-next{right: 0px;}

.content-image-section {padding: 5rem 0;}
.content-image-section:first-child {padding-top: 0;}
.content-image-section:last-child { padding-top: 0;  padding-bottom: 0;}
.content-image-section h2{font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.6);}

.content_dec h4{font-family: 'poppins'; color: var(--black-color); font-size: calc(var(--font-base-size) * 1.2); margin: 0; padding: 0 0 0.5em;}
.content_dec h4:not(:first-child){padding: 0.5em 0 0.5em}
.main-title-center .section-heading {text-align: center;}


.ctc-section-content p{font-size: calc(var(--font-base-size) * 1.3); font-style: italic;}
.ctc-section-content p:nth-of-type(1){margin-bottom: 1rem;}
.ctc-section-content p + p{margin-bottom: 0;}
.page-template-industries-inner .content-image-section{padding: 3rem 0;}

h2.accordion-header{font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.4); font-weight: 500;}
.accordion-button{cursor: pointer;}
.accordion-item{border-radius: 6px !important; overflow: hidden;}
.accordion-item:not(:first-of-type){border-top: 1px solid #ededed;}
.accordion-button:not(.collapsed){background-color: var(--light-blue); color: var(--primary-color); font-weight: 500;}

.listing-card{position: relative; overflow: hidden;}
.listing-card .card-body{position: absolute; bottom: 0px; left: 0; right: 0; background: rgba(255,255,255,0.8); padding: 20px; }
.listing-card .card-body h5{font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.2); margin-bottom: 0.3em; transform: translateX(0%); transition: all 0.3s ease-in-out;}
.listing-card:hover .card-body h5{transform: translateX(10px);}

.contact-form-section{background-color: var(--white-color);}
.contact-form-base {
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    padding: 2em;
}

.contact_card {
    background: var(--primary-color);
    border: 1px solid #000;
    border-radius: 6px;
    padding: 1.2em;
    margin-bottom: 1em;
}
.contact_card .icon {
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    border: 3px solid var(--secondary-color);
    margin: 0 0 18px;
    background: #f68c1f0d;
}
.contact_card .icon img {
    width: 28px;
}
.contact_card .icon .fa{color: #f6b500; font-size: calc(var(--font-base-size) * 1.3);}
.contact_card h3 {
    font-size: calc(var(--font-base-size) * 1.4);
    font-weight: 500;
    color: var(--secondary-color);
    line-height: 26px;
    font-family: var(--base-font-family);
}
.contact_card p {
    color: #fff;
    font-size: 1.1em;
}
.form-control {
    border: 1px solid #cfcfcf;
    border-radius: 0px;
    font-size: 1em;
}
.form-control:focus{
    border-color: var(--primary-color);
    box-shadow:none;
}

.our-work-item .card-body{padding: 1.25rem;}
.our-work-item .card-body p{color: var(--black-color); font-size: calc(var(--font-base-size) * 1.05); margin-bottom: 1em;}

.work-dec p{color: var(--black-color); font-size: calc(var(--font-base-size) * 1.1); line-height: 1.6; margin-bottom: 1em;}


.blog-item{margin-bottom: 48px; background: #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, 8%); border-radius: 0; padding: 15px; transition: .3s;}
.blog-item .blog-img{position: relative;  border-radius: 0;  z-index: 0; overflow: hidden; margin-bottom: 18px !important;}
.blog-item .tag-line{color: #FFFFFF;  position: absolute; z-index: 11; right: 20px; bottom: 20px;}

.blog-item .tag-line .post-categories{margin: 0; padding: 0; list-style: none; display: flex; align-items: center; flex-wrap: wrap;}
.blog-item .tag-line .post-categories li{margin: 0 2px; background: var(--primary-color);}
.blog-item .tag-line .post-categories li a{ color: #fff; padding: 6px 20px; display: block;  font-weight: 500; border-radius: 0; font-size: 14px; transition: .4s; z-index: 11; position: relative;}

.blog-item .full-blog-content{padding: 10px 15px 20px; overflow: hidden;}
.blog-title{font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.6); margin-bottom: 0.5em; font-weight: 600; transition: all 0.3s ease-in-out; line-height: 35px !important;}

.blog-title a{color: var(--primary-color); text-decoration: none;}
.blog-title a:hover{color: var(--secondary-color); text-decoration: none;}

.full-blog-content small .fa{color: var(--secondary-color); font-size: 1.1em; margin-right: 5px;}
.full-blog-content small{font-family: 'poppins'; font-weight: 500;}

.blog-sidebar{padding: 0 20px;}
.blog-sidebar .widget {background: #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, 8%); border-radius: 0; padding: 20px; margin-bottom: 40px; position: relative;}
.blog-sidebar .widget h4{font-weight: 500; font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.2); margin-bottom: 0.6em; letter-spacing: -0.2px; display: block;}

.blog-sidebar .widget_search label{width: 100%; display: block;}
.blog-sidebar .widget_search input{border: 1px solid #cfcfcf; border-radius: 0px; padding: 8px 12px; font-size: 1em;}
.blog-sidebar .widget_search input:focus{border-color: var(--primary-color); box-shadow: none;}  

.widget_categories h4{display: block;}
.widget_categories ul{margin: 10px 0 0; padding: 0; list-style: none;}

.widget_categories ul li:last-child{border-bottom:0;}
.widget_categories ul li{padding: 14px 0 14px 20px; list-style: none; border-bottom: 1px solid #ededed;}
.widget_categories ul li a:hover{color: var(--black-color);}

.single .full-blog-content h3{font-family: 'poppins'; color: var(--primary-color); font-size: calc(var(--font-base-size) * 1.3); margin-bottom: 0.5em; font-weight: 400; transition: all 0.3s ease-in-out; line-height: 35px !important;}
.single .full-blog-content p{color: var(--black-color); font-size: calc(var(--font-base-size) * 1.05); margin-bottom: 1em; line-height: 1.6em; font-family: var(--paregraph-font-family);}

section.listing-card-section{padding: 10rem;}




.brand-box{padding: 20px; border-radius: 10px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
    position: relative;
}
.brand-box h2{font-family: var(--base-font-family); color: var(--white-color); font-size: calc(var(--font-base-size) * 1.2); line-height: normal; font-weight: 400; margin-bottom: 0.8em; }
.brand-box p{color: var(--white-color); font-size: calc(var(--font-base-size) * 1); line-height: normal; margin-bottom: 0.3em; font-weight: 400;}
.brand-box .brand-logo{margin-bottom: 20px;}

.brand-list{list-style:none; padding:0; margin: 20px 0 20px;}
.brand-list li{ color:#fff; margin-bottom:8px; position:relative; padding-left:28px;}
.brand-list li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ff8a00;
    color:#111;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.brand-box .btn-outline-primary{background-color: transparent; color: var(--white-color); border: 1px solid var(--secondary-color); font-weight: 500; padding: 0.5em 1.5em; text-decoration: none; font-size: calc(var(--font-base-size) / 1.1); -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;}

.brand-box .btn-outline-primary:hover{background-color: var(--secondary-color);}

.brand-box .btn-outline-primary .fa{font-size: calc(var(--font-base-size) / 1.2);}
.brand-box .btn-outline-primary.orange{background-color: transparent; color: var(--white-color); border: 1px solid #ff8a00; -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;}
.brand-box .btn-outline-primary.orange:hover{background-color: #ff8a00;}

.brand-box .btn-outline-primary.green{background-color: transparent; color: var(--white-color); border: 1px solid #8dc43c; -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;}
.brand-box .btn-outline-primary.green:hover{background-color: #8dc43c;}


.service-card{background:linear-gradient(135deg, rgba(48,18,8,.95) 0%, rgba(27,17,15,.85) 45%, rgba(9,14,20,.95) 100% ); border:1px solid #d36d1f;}
.water-card{ background:linear-gradient(135deg,#081d2f,#111820); border:1px solid #0c83d9;}
.water-card .brand-list li:before{ background:#00a8ff;}

.wellnuss-card{border: 1px solid #8dc43c; background: linear-gradient(135deg, #081d2f, rgb(141 196 60 / 15%)); padding: 20px;}
.wellnuss-card .brand-list li:before{ background:#8dc43c;}


.stats-wrapper{background:#071723; border:1px solid rgba(32,43,56,1); margin-top: 50px;}
.stat-item{ padding:4px 20px; border-right:1px solid rgba(255,255,255, .2);}

.stat-icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:rgba(255, 255, 255, 0.8);
    font-size:38px;
}

.stat-item h3{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin:0;
    line-height:1.1;
}

.stat-item p{
    color:#9ea9b8;
    font-size:15px;
    margin:0;
}

.icon-text-section{margin: 1.5em 0 0; border: 1px solid #39454f; background-color: rgba(255, 255, 255, 0.1); padding: 24px; border-radius: 8px;}
.icon-text-section h4{font-family: 'poppins'; color: var(--secondary-color); font-weight: 400; font-size: calc(var(--font-base-size) * 1.2);}
.icon-text-section .icon-base{margin: 0 auto 15px; border: 2px solid #f3b31b; background-color: rgba(255, 255, 255, 0.1) ; border-radius: 100px; width: 64px; height: 64px; display: flex; justify-content: center; align-items: center;}
.icon-text-section .icon-base i.bi{color: #ffffff; font-size: 24px;}
.icon-text-section p{color: #ffffff;}

@media(max-width:991px){

    .stat-item{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

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

}

.process-card{
    position:relative;
}

.step-number{
    color: #b9c0cc;
    font-size: 18px;
    font-weight: 400;
    position: absolute;
    left: 50px;
    top: -10px;
    font-family: var(--base-font-family);
}

.icon-circle-new{
    width:82px;
    height:82px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
    position:relative;
}

.icon-circle-new::before{
    content:"";
    position:absolute;
    inset:12px;    
    border-radius:50%;
}

.icon-circle-new i{
    font-size:30px;
    color: #b9c0cc;
}

.arrow{
    position:absolute;
    top:55px;
    right:-18px;
    font-size:24px;
   color: #b9c0cc;
}

.process-card h5{
    font-size:20px;
    font-weight:600;
    margin-bottom:12px;
    color: var(--white-color);
}

.process-card p{
    font-size:15px;
    color:#c6d0db;
    line-height:1.7;
    margin-bottom:0;
}




.about-company{
    background:#04111d;
    color:#fff;
    overflow:hidden;
}

/* Left */

.section-tag{
    color:#18bfff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.about-title{
    font-size:48px;
    line-height:1.08;
    font-weight:700;
    margin:18px 0 32px;
}

.about-company p{
    color:#c7d0d8;
    font-size:19px;
    line-height:1.8;
    margin-bottom:35px;
}

/* Box */

.platform-box{

    position:relative;
    background:#061624;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:35px 35px 30px;

}

.top-title{text-align:center; color: #4bd6ff; font-weight: 500; line-height: 100%;  margin-bottom: 1.2rem; text-transform: uppercase; font-size: 1.1em; font-family: var(--base-font-family);
}

/* Stage */
.stage-wrapper{display:flex; justify-content:center; margin-bottom:35px; position: relative;}
.stage-wrapper::after{ height: 45px; width: 2px; background: #18bfff; content: ""; position: absolute; top: 126%; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); z-index: 1;}

.stage-pill{
    display:flex;
    align-items:center;
    border:2px solid #00bfff;
    border-radius:12px;
    overflow:hidden;
    background:#0b2237;
    padding: 8px 10px;
}

.stage-pill img{width: 100%; height: auto;}

.stage-icon{
    background:#f7b51c;
    color:#111;
    font-weight:700;
    padding:12px 18px;
    font-size:22px;
}

.stage-text{
    padding:12px 25px;
    font-size:23px;
    font-weight:600;
}

/* Timeline */
.timeline{
    position:relative;
    margin-bottom:20px;
}

.timeline-line{
    position: absolute;
    left: 10%;
    right: 10%;
    top: -1px;
    height: 2px;
    background: #18bfff;

}

.timeline .col{
    position:relative;
}

.timeline-dot{
    width:2px;
    height:22px;
    background:#18bfff;
    margin:0 auto 18px;
}

.icon{
    color:#18bfff;
    font-size:34px;
    margin-bottom:15px;
    display:block;
    margin: 0 auto;
    background-color: transparent;
}

.timeline h6{
    font-size:16px;
    line-height:1.25;
    color:#fff;
    font-weight:500;
    padding-top: 15px;
    font-weight: 400;
}

/* Cards */
.company-card{
    border-radius:14px;
    display: block;
}
.company-card a{padding:20px; display: block;}
.company-card.water-card{
    border:1px solid #00bfff;
    background: linear-gradient(135deg, #081d2f, #111820);
}

.company-card.wellnuss-card{border: 1px solid #8dc43c; background: linear-gradient(135deg, #081d2f, rgb(141 196 60 / 15%));}

.company-card.service-card{
    border:1px solid #ff7b18;
    background:
        linear-gradient(
            135deg,
            rgba(48,18,8,.95) 0%,
            rgba(27,17,15,.85) 45%,
            rgba(9,14,20,.95) 100%
        ),
}
.company-card .logo{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}
.company-card p{
    color:#d2dbe2;
    line-height: 1.2;
    margin: 0; padding: 0;
}
.servicedealer-img{position: absolute; right: 3px; top: 50%; transform: translate(0, -50%);}
.waterdealer-img{position: absolute; right: 0px; top: 50%; transform: translate(0, -50%);}
.wellnuss-img{position: absolute; right: 10px; top: 50%; transform: translate(0, -50%);}


.hero-banner{
    position:relative;
    padding:100px 0 90px;
    background:url(../images/hero-banner.png) center center;
    background-size:cover;
    color:#fff;
    overflow:hidden;
    display: block;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
    rgba(4,10,22,.90) 0%,
    rgba(4,10,22,.75) 38%,
    rgba(4,10,22,.30) 70%,
    rgba(4,10,22,.05) 100%);
}

.hero-subtitle{
    display:block;
    color:#f3b208;
    font-weight:700;
    margin-bottom:20px;
    margin-top: 90px;
}

.hero-title{
    font-size:34px;
    line-height:1.08;
    font-weight:700;
    margin-bottom:24px;
}

.hero-description{
    line-height:1.4;
    color:#d6d6d6;
}

.hero-btn{
    padding:12px 24px;
    border-radius:8px;
    font-weight:600;
}

.btn-warning{
    color:#000;
    background:#F6B500;
    border-color:#F6B500;

}

.bottom-row{
    margin-top:60px;
}
.capabilities-heading{
    color:#2EB8FF;
    font-size:14px;
    font-weight:700;
    margin-bottom:20px;
}

.capability{
    border-right:1px solid rgba(255,255,255,.12);

}

.capability i{
    display:block;
    font-size:28px;
    color:#28B9FF;
    margin-bottom:8px;
}

.capability span{
    font-size:15px;
    color:#fff;
}

.hero-banner .company-card-hero{
    background:rgba(10,18,35,.4);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(5px);
    border-radius:12px;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.hero-banner .company-logo{

    width:62px;
    height:62px;

    background:#F6B500;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#000;
    font-size:34px;
    font-weight:800;

}
/* 
@media (max-width:991px){

.hero-banner{

    padding:80px 0;
    min-height:auto;

}

.hero-title{

    font-size:46px;

}

.hero-description{

    font-size:17px;

}

.capabilities-row{

    display:flex;
    flex-wrap:wrap;

}

.capabilities-row>.col{

    flex:0 0 50%;
    max-width:50%;

}

.company-card{

    margin-top:40px;

}

}

@media (max-width:576px){

.hero-title{

    font-size:36px;

}

.hero-btn{

    width:100%;
    margin-bottom:15px;

}

.capabilities-row>.col{

    flex:0 0 100%;
    max-width:100%;

}

.company-card{

    flex-direction:column;
    text-align:center;
    gap:25px;

}

.hero-banner .company-card-hero h4{

    font-size:22px;

}

} */


header {
    position: absolute;
    inset: 0 0 auto;
    height: 100px;
    z-index: 1000;
    background: linear-gradient(
    to bottom,
        rgba(0, 8, 17, 1) 0%,
        rgba(0, 8, 17, 0.8) 25%,
        rgba(0, 8, 17, 0.4) 60%,
        rgba(0, 8, 17, 0) 100%
    );
}
.header-btn .btn-primary{background-color: #F6B500; color: #000; border-color: #F6B500; font-weight: 700; padding: 8px 30px; font-size: 1em;}


.privacy-policy-content{color: #FFFFFF;}
.privacy-policy-content p{line-height: 1.5;}
.privacy-policy-content a{color: var(--secondary-color);}
.privacy-policy-content h1, .privacy-policy-content h2, .privacy-policy-content h3, .privacy-policy-content h4, .privacy-policy-content h5, .privacy-policy-content h6{color:#f5b417; font-weight: 600; font-family: var(--base-font-family);}

.privacy-policy-content hr{margin: 25px 0;}
.privacy-policy-content ul.unlist{margin: 0 0 15px 20px; padding: 0;}
.privacy-policy-content ul.unlist li {list-style-type: disc;}

.why-stage-3{background: linear-gradient(360deg, rgba(0, 13, 25, 0.5) 0%) , rgba(0, 12, 23, 1) 100%;}
.why-stage-3 .section-heading h2{margin-bottom: .7rem;}

@media(max-width:1024px){
    .navbar-nav{gap: 25px;}
    .navbar-nav > li > a{font-size: 0.9em;}
    .header-btn .btn-primary{padding: 6px 14px; font-size: 0.9em;}
    .wellnuss-img{width: 47%;}
}

@media(max-width:991px){
    .bottom-row{margin-top: 0px;}
    .company-card-hero h6 br{display: none;}
    .hero-banner .company-card-hero{margin-top: 10px;}

    .hero-subtitle{margin-top: 20px;}
    .navbar-toggler{padding: 4px; border-radius: 0; background: #f3b31b;}
    #logo{text-align: right; display: block;}
    .navbar-toggler i.bi{font-size: 28px;}
    .navbar-nav{gap: 0;}
    .navbar-collapse{background-color: var(--primary-color); padding: 10px; box-shadow: 0px 15px 20px #000; border: 1px solid #212529;}
    .navbar-nav > li{border-bottom: 0px solid #ededed; display: inline-block; position: relative; padding-left: 24px;}
    .navbar-nav > li::after { content: "\F285"; /* chevron-down */ font-family: "bootstrap-icons"; position: absolute; top: 1px; left: 0; top: 44%; transform: translateY(-44%); font-size: 14px; color: #FFFFFF;}
    .navbar-nav > li > a{padding: 5px 0;}
    .header-btn {border-top: 1px solid; padding-top: 10px;}

    .arrow{display: none;}
    .step-number{left: 32%;}
}

@media(max-width:768px){
    div#footer-wrapper div.textwidget .footer-logo .logo{width: 30%; margin: 0 auto 1rem;}
    .wellnuss-img{width: 54%;}
}
@media(max-width:767px){
    body{font-size: 15px;}
    .hero-title{font-size: 31px;}
    .hero-btn{font-size: 14px; padding: 12px 12px;}
    .step-number{left: 22%;}
    div#footer-wrapper div.textwidget .footer-logo .logo{width: 50%;}
    .servicedealer-img{position: relative; top: auto; transform: translate(0, 0);}
    .waterdealer-img{position: relative; top: auto; transform: translate(0, 0); margin-right: -20px;}
    .company-card.wellnuss-card{padding: inherit;}
    .wellnuss-img{width: 100%; position: relative; top: auto; transform: translate(0, 0); margin-right: -20px;}
    .stage-wrapper{margin-bottom: 0;}
    .stage-wrapper::after{display: none;}
    .timeline .row.gx-0{justify-content: center;}
    .timeline-line{display: none;}
}

@media(max-width:402px){
	.navbar>.container{flex-wrap: inherit;} 
	.logo-base-small{width: 260px;}
	.hero-banner .company-logo {width: 82px;}

}
@media(max-width:376px){
    .hero-banner .company-logo{width: 98px;}
    .btn-outline-light.hero-btn{margin-top: 10px;}
    .capability{padding: 0 3px; line-height: 1.1;}
    .capability i {margin-bottom: 5px;}
    .capability span{font-size: 13px;}
    section{padding: 4rem 0;}
}