/* =================================================
   COLOR VARIABLES
================================================= */
:root {
  --color-purezza-blue: #003b80; /* Primary blue */
  --color-purezza-dark-blue: #000e2e; /* Dark blue */
  --color-purezza-green: #00ce7c; /* Purezza green */
  --color-black: #000; /* Black */
  --color-white: #fff; /* White */
}

/* =================================================
   1. FONT FACE
================================================= */
@font-face {
  font-family: "Raleway";
  src: url("./fonts/Raleway-Regular.woff2") format("woff2"),
    url("./fonts/Raleway-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("./fonts/Raleway-Bold.woff2") format("woff2"),
    url("./fonts/Raleway-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Force entire site to use Raleway */
body,
body * {
  font-family: "Raleway", sans-serif !important;
}

/* =================================================
   2. GLOBAL COLORS (BACKGROUND & TEXT)
================================================= */
body,
#culligan-header-banner,
#culligan-wrapper-navbar nav {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  padding-top: 0 !important;
}

body .secondary-nav-wrapper.version-2 nav {
  background: var(--color-black) !important;
}

body #navbarNavDropdown #main-menu li a {
  color: var(--color-white) !important;
}

body .background-color-primary-600,
body .background-color-secondary-950 {
  background: var(--color-purezza-blue) !important;
}

.background-color-neutral-100,
.background-color-neutral-200,
.background-color-neutral-300,
.background-color-neutral-400 {
  color: var(--color-black) !important;
}

/* =================================================
   3. HEADINGS COLORS
================================================= */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .h1,
body .h2,
body .h3,
body .h4,
body .h5,
body .h6 {
  color: var(--color-white);
  font-weight: 700 !important;
}

/* Headings inside neutral background blocks */
.background-color-neutral-100 h1,
.background-color-neutral-100 h2,
.background-color-neutral-100 h3,
.background-color-neutral-100 h4,
.background-color-neutral-100 h5,
.background-color-neutral-100 h6,
.background-color-neutral-100 .h1,
.background-color-neutral-100 .h2,
.background-color-neutral-100 .h3,
.background-color-neutral-100 .h4,
.background-color-neutral-100 .h5,
.background-color-neutral-100 .h6,
.background-color-neutral-200 h1,
.background-color-neutral-200 h2,
.background-color-neutral-200 h3,
.background-color-neutral-200 h4,
.background-color-neutral-200 h5,
.background-color-neutral-200 h6,
.background-color-neutral-200 .h1,
.background-color-neutral-200 .h2,
.background-color-neutral-200 .h3,
.background-color-neutral-200 .h4,
.background-color-neutral-200 .h5,
.background-color-neutral-200 .h6,
.background-color-neutral-300 h1,
.background-color-neutral-300 h2,
.background-color-neutral-300 h3,
.background-color-neutral-300 h4,
.background-color-neutral-300 h5,
.background-color-neutral-300 h6,
.background-color-neutral-300 .h1,
.background-color-neutral-300 .h2,
.background-color-neutral-300 .h3,
.background-color-neutral-300 .h4,
.background-color-neutral-300 .h5,
.background-color-neutral-300 .h6,
.background-color-neutral-400 h1,
.background-color-neutral-400 h2,
.background-color-neutral-400 h3,
.background-color-neutral-400 h4,
.background-color-neutral-400 h5,
.background-color-neutral-400 h6,
.background-color-neutral-400 .h1,
.background-color-neutral-400 .h2,
.background-color-neutral-400 .h3,
.background-color-neutral-400 .h4,
.background-color-neutral-400 .h5,
.background-color-neutral-400 .h6 {
  color: var(--color-black) !important;
}

/* =================================================
   4. IMAGE TEXT MODULE COLORS
================================================= */
body
  .image-text-module-v2-wrapper:not(.background-color-neutral-100):not(
    .background-color-neutral-200
  ):not(.background-color-neutral-300):not(.background-color-neutral-400)
  .image-text-module-v2-text,
body
  .image-text-module-v2-wrapper:not(.background-color-neutral-100):not(
    .background-color-neutral-200
  ):not(.background-color-neutral-300):not(.background-color-neutral-400)
  .image-text-module-v2-list-holder {
  color: var(--color-white) !important;
}

/* =================================================
   5. NAVIGATION DROPDOWNS & ICONS
================================================= */
body
  #culligan-wrapper-navbar
  nav
  .navbar-collapse
  li.dropdown
  .custom-dropdown-menu
  .mega-menu-style-1
  .dropdown-item
  .sub-item-content-wrapper
  .sub-item--title {
  color: var(--color-black) !important;
}

body
  #culligan-wrapper-navbar
  nav
  .navbar-collapse
  li.dropdown
  .custom-dropdown-menu
  .mega-menu-style-1
  .dropdown-item
  .sub-item--image
  svg {
  stroke: var(--color-purezza-blue) !important;
}

body
  #culligan-wrapper-navbar
  nav
  #main-menu
  > li:not(.offer-nav-pill)
  > a[aria-expanded="true"]:after,
body
  #culligan-wrapper-navbar
  nav
  #main-menu
  > li:not(.offer-nav-pill)
  > a::after {
  background: var(--color-white) !important;
}

/* Desktop menu icons */
@media (min-width: 991px) {
  body
    #culligan-wrapper-navbar
    nav
    #main-menu
    > li:not(.offer-nav-pill)
    > a.dropdown-toggle {
    &::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='18' height='18' fill='%23fff'%3E%3Cpolygon points='16 22 6 12 7.41 10.59 16 19.17 24.59 10.59 26 12 16 22'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      width: 18px;
      height: 18px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -16px;
    }

    &:hover::before,
    &[aria-expanded="true"]::before {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='18' height='18' fill='%23fff'%3E%3Cpolygon points='16 22 6 12 7.41 10.59 16 19.17 24.59 10.59 26 12 16 22'/%3E%3C/svg%3E");
    }
  }
}

/* =================================================
   6. BUTTONS
================================================= */
/* Default state */
a.btn.btn-primary,
button.btn.btn-primary,
input.btn.btn-primary,
a.btn.btn-tertiary,
button.btn.btn-tertiary,
input.btn.btn-tertiary {
  background: var(--color-purezza-blue) !important;
  color: var(--color-white) !important;
}

/* Hover / Focus / Active */
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus,
button.btn.btn-primary:active,
input.btn.btn-primary:hover,
input.btn.btn-primary:focus,
input.btn.btn-primary:active,
a.btn.btn-tertiary:hover,
a.btn.btn-tertiary:focus,
a.btn.btn-tertiary:active,
button.btn.btn-tertiary:hover,
button.btn.btn-tertiary:focus,
button.btn.btn-tertiary:active,
input.btn.btn-tertiary:hover,
input.btn.btn-tertiary:focus,
input.btn.btn-tertiary:active {
  background: var(--color-purezza-blue) !important;
  color: var(--color-white) !important;
}

/* =================================================
   7. LINKS
================================================= */
body a {
  color: var(--color-purezza-blue) !important;
}

body a:hover {
  text-decoration: none;
  color: var(--color-purezza-blue) !important;
}

body a.text-white,
body a.text-white:hover {
  color: var(--color-white) !important;
}

footer a {
  color: var(--color-white) !important;
}

footer a:hover {
  color: var(--color-white) !important;
}

/* =================================================
   8. GO TO TOP BUTTON
================================================= */
a#go-to-top svg {
  fill: var(--color-purezza-blue);
}

a#go-to-top:hover svg,
a#go-to-top:focus svg,
a#go-to-top:active svg {
  fill: var(--color-purezza-blue);
}

/* =================================================
   9. IMAGE TEXT MODULE LIST ICONS
================================================= */
body
  .image-text-module-v2-wrapper.version-1
  .image-text-module-v2-list-holder
  .list-point-icon-wrapper
  svg {
  fill: var(--color-purezza-blue) !important;
}

body
  .image-text-module-v2-wrapper.version-1
  .image-text-module-v2-list-holder
  .list-point-icon-wrapper
  svg
  polygon.cls-1 {
  fill: var(--color-white) !important;
}

/* =================================================
   10. HERO MODULE OFFER PILLS
================================================= */
body .hero-module-wrapper.version-6 .offer-text-pill,
body .hero-module-wrapper.version-7 .offer-text-pill {
  background-color: var(--color-purezza-green) !important;
}

/* =================================================
   11. PRODUCT CARD MODULE
================================================= */
body .paid-campaign-only-product-card-module-wrapper {
  background-color: var(--color-black) !important;
}
body .paid-campaign-only-product-card-module-wrapper h3{
  color: var(--color-purezza-dark-blue);
}
/* =================================================
   12. COST CALCULATOR
================================================= */
body .cost-calculator-wrapper .water-dispenser-wrapper .water-dispenser-head {
  background-color: var(--color-purezza-green) !important;
}

body .cost-calculator-wrapper .water-dispenser-wrapper a.btn {
  background: var(--color-white);
  border: none !important;
}

/* =================================================
   13. MOBILE HERO MODULE
================================================= */
@media (max-width: 991px) {
  body .hero-module-wrapper.version-7 :not(.btn) {
    color: var(--color-white) !important;
  }
}

/* =================================================
   14. HEADER BANNER
================================================= */
body
  #culligan-header-banner
  .top-nav-right-side
  .right-links:not(:last-child)
  .border-right-line,
#culligan-header-banner
  .top-nav-right-side
  .right-links:not(:last-child)
  .border-right-line {
  background-color: var(--color-white) !important;
}

body
  #culligan-header-banner
  .top-nav-right-side
  .right-links
  .right-side-icon-text
  svg {
  fill: var(--color-white) !important;
}

/* =================================================
   15. VIDEO TEXT MODULE
================================================= */
body .video-text-module-wrapper .video-wrapper .play-pause-btn,
body .video-text-module-wrapper .video-wrapper .play-pause-btn:hover {
  background: var(--color-purezza-blue);
}

/* =================================================
   16. FORM MODULE
================================================= */
body .form-module-wrapper.version-4 .form-module-container ul li::before {
  content: url('data:image/svg+xml,%3Csvg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" fill="%23003b80" %3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D.cls-1,.cls-2%7Bstroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cg id="icons"%3E%3Cg id="Organization"%3E%3Cg id="Status"%3E%3Crect id="_Transparent_Rectangle_" class="cls-1" width="32" height="32"%3E%3C/rect%3E%3Cpath class="cls-2" d="m16,2c-7.73,0-14,6.27-14,14s6.27,14,14,14,14-6.27,14-14S23.73,2,16,2Zm-2,19.59l-5-5,1.59-1.59,3.41,3.41,7.41-7.41,1.6,1.59-9.01,9.01Z"%3E%3C/path%3E%3Cpolygon class="cls-1" points="14 21.59 9 16.59 10.59 15 14 18.41 21.41 11 23.01 12.59 14 21.59"%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
body
  .form-module-wrapper.version-6
  .form-module-container
  .image-text-module-v2-list-holder
  .list-point-icon-wrapper
  svg {
  stroke: var(--color-purezza-blue);
}
body .form-module-wrapper.version-4 {
  background: var(--color-black);
}

body
  .form-module-wrapper.version-6
  .form-content-wrapper-v6.background-color-secondary-950
  input.btn {
  background-color: var(--color-white) !important;
  color: var(--color-purezza-blue) !important;
}
body
  .form-module-wrapper.version-6
  .form-content-wrapper-v6.background-color-secondary-950
  input.btn:hover {
  color: var(--color-white) !important;
  background: var(--color-purezza-dark-blue) !important;
}
/* =================================================
   17. STRAPLINE PILL
================================================= */
body .strapline-pill-mint {
  background-color: var(--color-purezza-green) !important;
}

.strapline-pill-purezza-green{
  border-radius: 100px;
  color: var(--color-purezza-blue);
  background-color: var(--color-purezza-green);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 4px 8px;
  margin-bottom: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}