/* Water Systems shared system. Palette: Brand Guideline p5. Alata headings approved as a
   temporary Lemon Milk substitute. Grey is decorative; navy is readable text. */
@font-face {
  font-family:Alata;
  src:url('../assets/fonts/Alata-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Almarai;
  src:url('../assets/fonts/Almarai-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:Almarai;
  src:url('../assets/fonts/Almarai-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap
}

:root {
  --brand-navy:#223e7d;
  --brand-grey:#949797;
  --brand-white:#fff;
  --primary-color:var(--brand-navy);
  --secondary-color:var(--brand-grey);
  --background-color:var(--brand-white);
  --surface-color:var(--brand-white);
  --text-primary:var(--brand-navy);
  --text-secondary:var(--brand-navy);
  --surface-tint:rgba(148,151,151,.08);
  --border-color:rgba(148,151,151,.4);
  --shadow:0 10px 30px rgba(34,62,125,.07);
  --radius:4px;
  --font-body:Almarai,Arial,sans-serif;
  --font-heading:Alata,Almarai,sans-serif;
  --content-width:1280px;
  --page-gutter:clamp(20px,4vw,64px);
  --section-space:clamp(48px,6vw,88px);
  --bs-primary:var(--brand-navy);
  --bs-secondary:var(--brand-grey);
  --bs-dark:var(--brand-navy);
  --bs-light:var(--brand-white);
  --bs-body-color:var(--brand-navy);
  --bs-body-font-family:var(--font-body);
  --bs-primary-rgb:34,62,125;
  --bs-dark-rgb:34,62,125;
}

* {
  box-sizing:border-box
}

html {
  scroll-padding-top:90px
}

body {
  margin:0;
  background:var(--background-color);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,h4,h5,h6,.display-1,.display-6 {
  font-family:var(--font-heading);
  font-weight:400;
  line-height:1.22;
  color:var(--text-primary);
  overflow-wrap:anywhere
}

h1,.display-6 {
  font-size:clamp(30px,3.2vw,46px)
}

h2 {
  font-size:clamp(26px,2.5vw,36px)
}

h3 {
  font-size:25px
}

h4 {
  font-size:22px
}

h5 {
  font-size:20px
}

h6 {
  font-size:17px
}

p {
  line-height:1.85;
  margin-bottom:1.25rem
}

small,.small {
  font-size:14px
}

a {
  color:var(--brand-navy);
  text-decoration:none;
  transition:background-color .18s,color .18s,border-color .18s
}

a:hover {
  color:var(--brand-navy);
  text-decoration:underline;
  text-underline-offset:5px
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--brand-navy);
  outline-offset:4px;
  box-shadow:0 0 0 7px var(--brand-white)
}

img,video,iframe {
  max-width:100%
}

img {
  height:auto
}

button,input,textarea,select {
  font:inherit
}

button,a,input,select,textarea {
  touch-action:manipulation
}

.container {
  max-width:var(--content-width);
  padding-inline:var(--page-gutter)
}

.container-fluid {
  width:100%
}

.row>* {
  min-width:0
}

.text-primary,.text-secondary,.text-dark,.text-body {
  color:var(--brand-navy)!important
}

.bg-primary,.bg-dark {
  background-color:var(--brand-navy)!important
}

.bg-light {
  background-color:var(--surface-tint)!important
}

.border-primary {
  border-color:var(--border-color)!important
}

.border-5 {
  border-width:1px!important
}

.text-uppercase {
  text-transform:none!important
}

.btn,.tm-paging-link {
  min-height:44px;
  border-radius:var(--radius);
  padding:12px 23px;
  line-height:1.4;
  font-weight:700;
  font-size:14px;
  text-transform:none;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s
}

.btn:hover {
  text-decoration:none
}

.btn:active {
  transform:translateY(1px)
}

.btn-primary,.btn-secondary {
  background:var(--brand-navy);
  border:1px solid var(--brand-navy);
  color:var(--brand-white)
}

.btn-primary:hover,.btn-secondary:hover,.btn-primary:focus,.btn-secondary:focus {
  background:var(--brand-white);
  border-color:var(--brand-navy);
  color:var(--brand-navy)
}

.btn-outline-primary,.btn-outline-secondary,.btn-light {
  background:var(--brand-white);
  border:1px solid var(--brand-navy);
  color:var(--brand-navy)
}

.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-light:hover {
  background:var(--brand-navy);
  border-color:var(--brand-navy);
  color:var(--brand-white)
}

.btn.disabled,.btn:disabled {
  opacity:.5;
  cursor:not-allowed;
  transform:none
}

.btn-link {
  color:var(--brand-navy);
  background:none;
  border:0;
  text-transform:none
}

.btn-square,.btn-sm-square,.btn-lg-square,.btn-xl-square,.btn-xxl-square {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex-shrink:0;
  width:48px;
  height:48px
}

.btn-xl-square,.btn-xxl-square {
  width:60px;
  height:60px
}

.form-control,.tm-search-input,select.form-control {
  color:var(--brand-navy);
  background:var(--brand-white);
  border:1px solid var(--brand-grey);
  border-radius:var(--radius);
  min-height:48px;
  padding:12px 15px;
  font:inherit
}

.form-control:focus,.tm-search-input:focus {
  color:var(--brand-navy);
  border-color:var(--brand-navy);
  box-shadow:0 0 0 3px rgba(34,62,125,.12)
}

.form-control::placeholder {
  color:var(--brand-navy);
  opacity:.8
}

.form-group {
  margin-bottom:24px
}

textarea {
  resize:vertical
}

.navbar {
  padding:0;
  background:var(--brand-white);
  border-bottom:1px solid var(--border-color)
}

.navbar-brand {
  padding:0;
  margin:0;
  white-space:normal
}

.navbar-brand img {
  width:240px;
  display:block
}

.navbar-nav {
  gap:clamp(14px,2vw,28px)
}

.navbar .navbar-nav a {
  display:flex;
  align-items:center;
  position:relative;
  min-height:58px;
  padding:14px 0;
  margin:0;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--brand-navy);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  text-transform:none;
  text-decoration:none
}

.navbar-light .navbar-nav .nav-link {
  color:var(--brand-navy)
}

.navbar .navbar-nav a:hover,.navbar .navbar-nav a:focus-visible,.navbar .navbar-nav a.active {
  border-bottom-color:var(--brand-navy)
}

.navbar-toggler {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:9px;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  color:var(--brand-navy);
  background:var(--brand-white)
}

.navbar-toggler:focus {
  box-shadow:0 0 0 3px rgba(34,62,125,.15)
}

/* Solutions & Services dropdown: label links to the overview, the chevron toggles. */
.water-systems-dropdown {
  position:relative;
  display:flex;
  align-items:center;
  flex-wrap:wrap
}

.water-systems-dropdown-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:44px;
  padding:0;
  margin-inline-start:2px;
  border:0;
  background:none;
  color:var(--brand-navy);
  cursor:pointer
}

.water-systems-dropdown-toggle span {
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .18s
}

.water-systems-dropdown.is-open .water-systems-dropdown-toggle span {
  transform:translateY(2px) rotate(-135deg)
}

.water-systems-dropdown-menu {
  display:none;
  flex-direction:column;
  background:var(--brand-white)
}

.water-systems-dropdown.is-open .water-systems-dropdown-menu {
  display:flex
}

.navbar .navbar-nav .water-systems-dropdown-menu a {
  min-height:44px;
  padding:10px 16px;
  border:0;
  border-radius:var(--radius);
  font-weight:400;
  white-space:nowrap
}

.navbar .navbar-nav .water-systems-dropdown-menu a:hover,.navbar .navbar-nav .water-systems-dropdown-menu a:focus-visible,.navbar .navbar-nav .water-systems-dropdown-menu a.active {
  background:var(--surface-tint);
  border:0;
  text-decoration:none
}

.navbar .navbar-nav .water-systems-dropdown-menu a.active {
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--brand-navy)
}

[dir=rtl] .navbar .navbar-nav .water-systems-dropdown-menu a.active {
  box-shadow:inset -3px 0 0 var(--brand-navy)
}

@media(min-width:992px) {
  .water-systems-dropdown-menu {
    position:absolute;
    top:100%;
    inset-inline-start:-12px;
    z-index:1030;
    min-width:280px;
    padding:8px;
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
  }

  /* Pointer devices also open on hover; touch devices use the chevron. */
  @media(hover:hover) {
    .water-systems-dropdown:hover .water-systems-dropdown-menu {
      display:flex
    }

    .water-systems-dropdown:hover .water-systems-dropdown-toggle span {
      transform:translateY(2px) rotate(-135deg)
    }
  }
}

@media(max-width:991.98px) {
  .water-systems-dropdown>a {
    flex:1
  }

  .water-systems-dropdown-toggle {
    width:46px;
    height:46px;
    border-bottom:1px solid var(--border-color)
  }

  .water-systems-dropdown-menu {
    flex-basis:100%;
    padding:4px 0 8px;
    padding-inline-start:16px;
    border-bottom:1px solid var(--border-color)
  }
}

.water-systems-menu-icon {
  width:20px;
  height:14px;
  border-block:2px solid currentColor;
  position:relative;
  display:block
}

.water-systems-menu-icon:after {
  content:'';
  height:2px;
  background:currentColor;
  position:absolute;
  inset:4px 0 auto
}

.water-systems-footer-logo {
  display:block;
  width:260px;
  max-width:100%;
  height:auto;
  background:var(--brand-white);
  padding:12px;
  border-radius:2px;
  margin-bottom:36px
}

.footer,.tm-footer {
  color:var(--brand-white);
  background:var(--brand-navy)!important;
  padding-block:56px!important;
  margin-top:var(--section-space)
}

.footer h3,.footer h5,.tm-footer h3,.footer p,.tm-footer p,.footer .text-primary,.tm-footer .text-primary,.tm-footer .tm-text-primary,.tm-footer .tm-text-gray {
  color:var(--brand-white)!important
}

.footer h5,.tm-footer-title {
  font-size:18px;
  line-height:1.5;
  margin-bottom:20px!important;
  text-align:left
}

.footer p,.tm-footer p,.footer a,.tm-footer a {
  font-size:14px;
  color:var(--brand-white);
  overflow-wrap:anywhere
}

.footer a:focus-visible,.tm-footer a:focus-visible {
  outline-color:var(--brand-white);
  box-shadow:none
}

.footer .btn.btn-link {
  display:block;
  text-align:left;
  min-height:38px;
  padding:5px 0;
  font-weight:400;
  color:var(--brand-white)
}

.footer .btn-square,.tm-social-links a {
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  color:var(--brand-white);
  border-radius:var(--radius)
}

.footer .btn-square:hover,.tm-social-links a:hover {
  color:var(--brand-navy);
  background:var(--brand-white)
}

.tm-footer-links,.tm-social-links {
  list-style:none;
  padding:0
}

.tm-footer-links li {
  margin-bottom:8px
}

.tm-social-links {
  gap:12px
}

.tm-social-links li {
  margin:0
}

.tm-social-links a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px
}

.copyright {
  background:var(--brand-navy);
  color:var(--brand-white)!important;
  border-top:1px solid rgba(255,255,255,.25);
  font-size:13px
}

.copyright a {
  color:var(--brand-white)
}

.copyright a:focus-visible {
  outline-color:var(--brand-white);
  box-shadow:none
}

.water-systems-whatsapp {
  position:fixed;
  bottom:24px;
  inset-inline-start:24px;
  z-index:99;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--brand-navy);
  color:var(--brand-white);
  border:2px solid var(--brand-white);
  box-shadow:0 6px 18px rgba(34,62,125,.25);
  font-size:26px;
  text-decoration:none
}

.water-systems-whatsapp:hover,.water-systems-whatsapp:focus-visible {
  background:var(--brand-white);
  color:var(--brand-navy);
  border-color:var(--brand-navy);
  text-decoration:none
}

.water-systems-contact-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px
}

.footer a[href^="mailto:"]:not(.btn),.footer a[href^="tel:"]:not(.btn),.tm-footer a[href^="mailto:"]:not(.btn),.tm-footer a[href^="tel:"]:not(.btn),.appoinment a[href^="mailto:"]:not(.btn),.appoinment a[href^="tel:"]:not(.btn) {
  color:var(--brand-white);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:4px
}

.video-background,.video-background1 {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  opacity:.035
}

.video-background video,.video-background1 video,.video-v {
  width:100%;
  height:100%;
  object-fit:cover
}

table {
  width:100%;
  font-size:14px
}

td,th {
  padding:10px;
  border-bottom:1px solid var(--border-color);
  overflow-wrap:anywhere
}

.water-systems-table-scroll {
  max-width:100%;
  overflow:auto
}

.water-systems-table-scroll table {
  min-width:500px
}

.water-systems-motion-control {
  position:absolute;
  right:20px;
  bottom:20px;
  z-index:5;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-white);
  color:var(--brand-navy);
  border:1px solid var(--border-color);
  border-radius:var(--radius)
}

.water-systems-motion-control::before {
  content:'Ⅱ';
  font-weight:700
}

.water-systems-motion-control[aria-pressed=true]::before {
  content:'▶';
  font-size:14px
}

@media(max-width:991.98px) {
  .navbar .navbar-collapse {
    flex-basis:100%;
    width:100%
  }

  .navbar-nav {
    gap:0;
    padding:10px 0
  }

  .navbar .navbar-nav a {
    min-height:46px;
    padding:12px 8px;
    border-bottom:1px solid var(--border-color)
  }

  .navbar .navbar-nav a.active {
    background:var(--surface-tint);
    border-inline-start:3px solid var(--brand-navy)
  }

  .navbar-brand img {
    width:230px
  }

  .footer,.tm-footer {
    padding-block:40px!important
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }

  .wow {
    visibility:visible!important
  }

}

@media print {
  .navbar-toggler,.video-background,.video-background1,#spinner,#loader-wrapper,.water-systems-motion-control {
    display:none!important
  }

  .navbar-collapse {
    display:block!important
  }

  .footer,.tm-footer {
    break-inside:avoid
  }

}