:root{--navy:#0f3b8c;--text:#5a6a8a;--teal:#0d8fc4;--dark:#2f2f2f;--line:#e6e9ef;--red:#e3000f}
body{font-family:'Jost',sans-serif;color:var(--text);font-weight:300;font-size:1.05rem;line-height:1.9;padding-top:0}
h1,h2,h3,h4,h5{color:var(--navy);font-weight:600;font-family:'Jost',sans-serif}
a{text-decoration:none;color:var(--navy)}
.container{max-width:1250px}
/* header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1040}
.site-header .navbar{padding:.4rem 0}
.site-header .navbar-brand img{height:96px;width:auto}
.site-header .nav-link{color:var(--navy);font-weight:500;font-size:1.1rem;padding:.55rem 1.2rem!important;border-radius:50px}
.site-header .nav-link.active{background:var(--navy);color:#fff}
.site-header .nav-link:hover:not(.active){color:var(--teal)}
.search-btn{border:0;background:none;color:var(--teal);font-size:1.4rem}
.search-bar{display:none;border-top:1px solid var(--line);padding:.8rem 0;background:#fff}
.search-bar.open{display:block}
.navbar-toggler{border:0;font-size:1.8rem;color:var(--navy)}
@media(max-width:991px){.site-header .navbar-brand img{height:70px}.site-header .nav-link{border-radius:8px}}
/* breadcrumb */
.crumbs{padding:1rem 0;font-size:.95rem}
.crumbs a{color:var(--text)}
.crumbs i{font-size:.7rem;margin:0 .6rem;color:var(--navy)}
.crumbs span{color:var(--navy)}
.page-title{font-size:clamp(2.4rem,5vw,4rem);line-height:1.15;margin:.6rem 0 1.5rem}
.page{padding-bottom:5rem}
/* hero */
.hero-wrap{position:relative;overflow:hidden;background:url('../images/banner/hero-bg.jpg') center/cover no-repeat,linear-gradient(180deg,#a6dcf3 0%,#62bde6 50%,#1d8ccb 100%)}
.hero .item{min-height:550px;display:flex;align-items:center;position:relative;z-index:3}
.hero-copy{max-width:46%}
.hero-const{position:absolute;right:2%;bottom:0;width:min(54%,800px);height:auto;z-index:2;pointer-events:none}
.hero .carousel-control-prev,.hero .carousel-control-next{z-index:4;width:70px;opacity:1}
.hero .carousel-control-prev span,.hero .carousel-control-next span{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;font-size:1.1rem}
.hero .carousel-indicators{z-index:4}
@media(max-width:991px){.hero-copy{max-width:100%}.hero .item{min-height:auto;padding:3rem 0 1rem}.hero-const{position:relative;display:block;right:auto;width:92%;margin:0 auto}}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.15;margin-bottom:.8rem}
.hero .sub{font-size:1.5rem;color:var(--navy);margin:0;font-weight:400}
.hero .tag{font-weight:500;color:var(--navy);margin:.6rem 0 2rem}
.btn-white{background:#fff;color:var(--navy);font-weight:500;border-radius:50px;padding:.8rem 2.4rem;font-size:1.1rem;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.btn-white:hover{background:var(--navy);color:#fff}
.carousel-indicators [data-bs-target]{width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:transparent;opacity:1}
.carousel-indicators .active{background:#fff}
.section{padding:3.5rem 0}
.section-h{text-align:center;font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:2.5rem}
.about-row img{width:100%;border-radius:2px}
.about-row h3{font-size:1.8rem;margin-bottom:1rem}
.btn-pill{display:inline-block;border:1px solid var(--line);border-radius:50px;padding:.3rem 1.4rem;font-size:.95rem;font-weight:500;color:var(--navy);background:#fff}
.btn-pill:hover{background:var(--navy);color:#fff}
.banner{min-height:330px;background:url('../images/pure-water.jpg') center/cover,#59b6e0;display:flex;align-items:center;justify-content:flex-end;padding:2rem 4rem}
.banner p{font-size:clamp(1.6rem,3.4vw,2.8rem);color:var(--navy);font-weight:300;letter-spacing:.04em;margin:0;line-height:1.3}
.subscribe{text-align:center;padding:3.5rem 0;position:relative}
.subscribe h2{font-size:clamp(1.7rem,3.4vw,2.7rem);position:relative}
.subscribe i.bg{position:absolute;font-size:6rem;color:#f1f3f7;top:0}
/* Hero slide animations */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(140px)}to{opacity:1;transform:none}}

.hero .carousel-item.active .hero-copy > *{animation:slideInLeft .8s ease both}
.hero .carousel-item.active .hero-copy h1{animation-delay:.1s}
.hero .carousel-item.active .hero-copy .sub{animation-delay:.25s}
.hero .carousel-item.active .hero-copy .tag{animation-delay:.4s}
.hero .carousel-item.active .hero-copy .btn{animation-delay:.55s}

.hero-const.animate{animation:slideInRight .9s ease both}

@media(prefers-reduced-motion:reduce){
  .hero .carousel-item.active .hero-copy > *,.hero-const.animate{animation:none}
}

/* products */
.p-grid{border:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.p-grid.cols-3{grid-template-columns:repeat(3,1fr)}.p-grid.cols-2{grid-template-columns:repeat(2,1fr)}.p-grid.cols-1{grid-template-columns:1fr}
.p-card{padding:1.6rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;margin:0 -1px -1px 0}
.p-card .hot{position:absolute;top:1.6rem;left:1.6rem;background:var(--red);color:#fff;font-size:.78rem;font-weight:500;padding:0 .8rem;border-radius:50px;line-height:1.5;z-index:1}
.p-img{height:230px;display:grid;place-items:center;margin-bottom:.8rem}
.p-img img{max-width:100%;max-height:230px;object-fit:contain}
.ph-icon{font-size:5rem;color:#c9d6ea}
.p-cat{font-size:.85rem;display:block;line-height:1.4;margin-bottom:.3rem}
.p-name{font-size:1.05rem;color:var(--navy);font-weight:400;line-height:1.45;margin:0 0 .5rem}
.p-price{font-size:1.25rem;color:var(--navy);font-weight:500}
@media(max-width:991px){.p-grid,.p-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.p-grid,.p-grid.cols-3,.p-grid.cols-2{grid-template-columns:1fr}}
.side h4{font-size:1.25rem;margin-bottom:1.2rem}
.side a{display:block;font-weight:500;font-size:1.15rem;padding:.55rem 0;line-height:1.4}
.side a.on,.side a:hover{color:var(--teal)}
.toolbar{background:#f1f3f7;border-radius:4px;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem;font-size:.95rem}
.toolbar>*{padding:.8rem 1.2rem}
.toolbar .views button{border:0;background:none;color:#8a96b0;font-size:1.3rem;padding:0 .5rem}
.toolbar .views button.on{color:var(--navy)}
.toolbar select{border:0;background:none;font-weight:600;color:var(--navy)}
.toolbar .views{background:#e8ebf2;align-self:stretch;display:flex;align-items:center}
/* lists */
.page ul.dots{padding-left:1.4rem}
.page ul.dots li{margin-bottom:.4rem}
.page ul.dots li::marker{color:var(--teal)}
.page h3.sec{font-size:1.8rem;margin:2.2rem 0 1rem}
.page p.lead2{font-size:1.15rem}
.scroll-row{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.8rem}
.scroll-row>*{flex:0 0 190px;height:270px;scroll-snap-align:start;background:#ffff;display:grid;place-items:center;overflow:hidden}
.scroll-row img{width:100%;height:100%;object-fit:cover}
.contact-pill{display:inline-block;border:1px solid var(--line);border-radius:50px;padding:.5rem 2rem;font-size:1.3rem;font-weight:500;margin:.8rem 0 1.4rem}
.map-big{width:100%;height:560px;border:0}
.social a{font-size:1.15rem;margin-right:1rem}
/* footer */
.site-footer{background:var(--dark);color:#fff;margin:0;padding:5rem 0 3rem}
.site-footer a{color:#fff}
.strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #444;text-align:center;font-weight:600;margin-bottom:4rem}
.strip div{padding:.9rem;border-right:1px solid #444}
.strip div:last-child{border:0}
.f-cols{display:grid;grid-template-columns:1.2fr 1.5fr 1fr 1fr;gap:2.5rem}
@media(max-width:991px){.f-cols{grid-template-columns:1fr 1fr}.strip{grid-template-columns:1fr}.strip div{border:0;border-bottom:1px solid #444}}
@media(max-width:560px){.f-cols{grid-template-columns:1fr}}
.site-footer h5{color:#fff;font-weight:500;font-size:1.2rem}
.site-footer .logo{height:110px;margin-bottom:1rem}
/* Mobile: slightly smaller footer logo with left padding */
@media(max-width:575px){
  .site-footer .logo{height:85px;padding-left:12px}
  /* address and social icons line up with the logo and match its width */
  .site-footer .logo + p{font-size:.93rem;line-height:1.7;padding-left:12px;margin-bottom:0}
  .site-footer .logo + p + .social{padding-left:12px}
  /* Information links (Home, About Us...) line up with the logo too */
  .site-footer .f-cols > div:nth-child(3){padding-left:12px}
}
.site-footer .col-mid{border-left:1px solid #444;padding-left:3rem}
.cc{font-size:1.5rem;font-weight:500;margin:1.2rem 0 0}
.cc-num{font-size:1.9rem;font-weight:500}
.f-mail{border-top:1px solid #444;margin-top:1rem;padding-top:1rem;font-weight:500}
.site-footer ul{list-style:none;padding:0}
.site-footer li{margin-bottom:.6rem}
.f-map{width:100%;height:180px;border:0}
.copy{padding:.8rem 0 1.2rem;font-size:1rem;border-top:1px solid var(--line);margin-top:.5rem}
.copy a{color:var(--navy)}
/* floating */
.side-fab{position:fixed;right:0;top:340px;z-index:1050;display:flex;flex-direction:column}
.side-fab a,.side-fab button{width:60px;height:56px;display:grid;place-items:center;color:#fff;font-size:1.3rem;border:0}
.side-fab .arrow{background:#000;border-radius:10px 0 0 0}
.side-fab .wa{background:#25d366}.side-fab .ph{background:#1a73e8;border-radius:0 0 0 10px}
.side-fab.closed .wa,.side-fab.closed .ph{display:none}
#toTop{position:fixed;right:10px;bottom:10px;width:50px;height:50px;border:0;background:#f1f3f7;color:var(--navy);font-size:1.3rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:1050}
#toTop.show{opacity:1;pointer-events:auto}
@media(max-width:575px){.side-fab a,.side-fab button{width:44px;height:44px;font-size:1.1rem}}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}





/* Homepage product carousel */
.home-product-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-product-viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-product-viewport::-webkit-scrollbar {
  display: none;
}

.home-product-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 10px 2px;
}

/* Show exactly 4 product cards in the visible area */
.home-product-track .p-card {
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: 0;
}

/* Make product images bigger */
.home-product-track .p-img {
  width: 100%;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-product-track .p-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

/* Navigation buttons */
.home-product-nav {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  z-index: 1;
}

.home-product-nav:hover {
  background: #f2f2f2;
}

/* Tablet: 3 products */
@media (max-width: 991px) {
  .home-product-track .p-card {
    flex-basis: calc((100% - 40px) / 3);
  }

  .home-product-track .p-img {
    height: 210px;
  }
}

/* Mobile: 2 products */
@media (max-width: 576px) {
  .home-product-carousel {
    gap: 6px;
  }

  .home-product-track {
    gap: 12px;
  }

  .home-product-track .p-card {
    flex-basis: calc((100% - 12px) / 2);
  }

  .home-product-track .p-img {
    height: 180px;
  }

  .home-product-nav {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}

/* Awards and Certificates: separate sections, 3 columns each */
.doc-section{margin-bottom:3rem}
.doc-section h2{margin-bottom:1.5rem}
.doc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.doc-grid img{
  display:block;
  width:100%;
  height:300px;
  object-fit:contain;
  padding:8px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.doc-grid img:hover{transform:scale(1.03);box-shadow:0 5px 18px rgba(0,0,0,.15)}
@media (max-width:767.98px){.doc-grid{gap:12px}.doc-grid img{height:200px}}
@media (max-width:479.98px){.doc-grid{grid-template-columns:repeat(2,1fr)}.doc-grid img{height:170px}}

/* Full-screen image popup */
.image-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 50px 20px 20px;
  background: rgba(0, 0, 0, 0.88);
}

.image-popup.active {
  display: flex;
}

.image-popup img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.popup-close:hover {
  background: #e8e8e8;
}

/* Mobile */
@media (max-width: 575.98px) {
  .row.g-5 {
    --bs-gutter-y: 2rem;
  }




  .image-popup {
    padding: 50px 12px 12px;
  }

  .image-popup img {
    max-height: 80vh;
  }

  .popup-close {
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
}


/* Single product page */
.pd-img{border:1px solid var(--line);display:grid;place-items:center;padding:2rem;min-height:340px}
.pd-img img{max-width:100%;max-height:460px;object-fit:contain}
.pd-img .ph-icon{font-size:6rem;color:var(--teal)}
.pd-cat{display:inline-block;font-size:.95rem;color:var(--text)}
.pd-cat:hover{color:var(--teal)}
.pd-name{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.25;margin:.2rem 0 .8rem}
.pd-price{font-size:1.8rem;color:var(--navy);font-weight:500;margin-bottom:1rem}
.pd-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.btn-pill-lg{border-radius:50px;padding:.6rem 1.8rem;font-weight:500}
#related{margin-top:4rem}
#related .section-h{margin-bottom:1.5rem}
.pd-actions .btn-primary{background:var(--navy);border-color:var(--navy)}
.pd-actions .btn-primary:hover{background:var(--teal);border-color:var(--teal)}
.pd-actions .btn-outline-primary{color:var(--navy);border-color:var(--navy)}
.pd-actions .btn-outline-primary:hover{background:var(--navy);color:#fff}

/* Mobile: bigger product images, less space around them, centered text */
@media (max-width: 576px) {
  /* Product cards (products page and home carousel) */
  .p-card { padding: .6rem .6rem 1rem; text-align: center; }
  .p-card .hot { top: .6rem; left: .6rem; }
  .p-img { height: 340px; margin-bottom: .4rem; }
  .p-img img { max-height: 340px; width: 100%; }

  /* Home page carousel (2 cards per row) */
  .home-product-track .p-card { padding: .4rem .4rem .8rem; }
  .home-product-track .p-img { height: 230px; margin-bottom: .3rem; }
  .home-product-track .p-img img { padding: 0; }

  /* Single product page: image fills the width */
  .pd-img { padding: .4rem; min-height: 0; }
  .pd-img img { max-height: 460px; width: 100%; }

  /* Single product page: category, title and price centered */
  .pd-cat { display: block; text-align: center; }
  .pd-name { text-align: center; }
  .pd-price { text-align: center; }
}
.search-btn { display: none; }

@media (max-width: 575.98px) {
  .crumbs {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}


@media (max-width: 575.98px) {
  .copy {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}


@media (max-width: 991px) {
  /* leave room under the Enquire Now button for the dots */
  .hero .item {
    padding-bottom: 3.5rem;
  }

  .hero .carousel-indicators {
    margin-bottom: 1rem;
  }
}