/*
Theme Name: Calwater - 100 Years
Theme URI: https://www.calwater.com
Author:  Baytech Digital
Author URI: https://www.baytechdigital.com/
Description: <a target="_blank" href="https://www.baytechdigital.com/">Baytech Digital</a>
Version: 1.0
*/

:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1350px;

  /* Accessibility & Brand Colors - WCAG 2.2 AA Compliant */
  --calwater-blue: #003592;
  --calwater-yellow: #ffd200;
  --calwater-orange: #ffa12d;
  --calwater-red: #e24912;
  --calwater-green: #007c69;
  --calwater-light-green: #47b360;
  --calwater-teal: #81ccdd;
  --calwater-light-blue: #0096db;
  --calwater-white: #ffffff;
  --calwater-black: #000000;
  --calwater-gray-light: #f2f3f7;
  --calwater-gray-dark: #222222;

  /* Focus and Interaction Colors - Enhanced Visibility */
  --focus-color: #005fcc;
  --focus-outline: 3px solid var(--focus-color);
  --focus-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/******
 ****** Global color
 ******/
.blue {
  color: blue !important;
}

.orange {
  color: orange !important;
}

.purple {
  color: purple !important;
}

.green {
  color: green !important;
}

.light-green {
  color: #47b360 !important;
}

.bg-blue {
  background-color: blue !important;
}

.bg-orange {
  background-color: orange !important;
}

.bg-purple {
  background-color: purple !important;
}

.bg-green {
  background-color: green !important;
}

.bg-light-green {
  background-color: #47b360 !important;
}

/******
 ****** Global font
 ******/

/* Import Google Fonts for fallbacks */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */

/* Font face declarations for custom fonts */
@font-face {
  font-family: "PP Hatton";
  src: url("./assets/fonts/PPHatton-Medium.woff2") format("woff2"),
    url("./assets/fonts/PPHatton-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Whitney Book";
  src: url("./assets/fonts/Whitney-Book.woff2") format("woff2"),
    url("./assets/fonts/Whitney-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Whitney Semibold";
  src: url("./assets/fonts/Whitney-Semibold.woff2") format("woff2"),
    url("./assets/fonts/Whitney-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Whitney Book Italic";
  src: url("./assets/fonts/Whitney-BookItalic.woff2") format("woff2"),
    url("./assets/fonts/Whitney-BookItalic.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Font stack variables */
:root {
  --font-heading: "PP Hatton", Georgia, serif;
  --font-body: "Whitney Book", "Inter", Arial, sans-serif;
  --font-semibold: "Whitney Semibold", "Inter", Arial, sans-serif;
  --font-Italic: "Whitney Book Italic", "Inter";
}

/******
 ****** Global font size (Optimized with rem units for better scalability)
 ******/

/* Base font size setup - Mobile first approach */

body {
  color: var(--calwater-black);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 16px;
}

/* Lead text - Optimized for readability */
.lead {
  font-family: var(--font-body);
  font-size: 16px; /* 16px mobile, 18px desktop */
  line-height: 150%;
  font-weight: 500;
}

/* Mobile phone font size configuration */

@media (min-width: 390px) {
  .lead {
    font-size: calc(16px + 0.5vw);
  }
}

@media (min-width: 400px) {
  .lead {
    font-size: calc(16px + 0.6vw);
  }
}

@media (min-width: 410px) {
  .lead {
    font-size: calc(16px + 0.7vw);
  }
}

@media (min-width: 420px) {
  .lead {
    font-size: calc(16px + 0.8vw);
  }
}

@media (min-width: 430px) {
  .lead {
    font-size: calc(16px + 0.9vw);
  }
}

@media (min-width: 576px) {
  .lead {
    font-size: calc(16px + 1.2vw);
  }
}

a,
.nav-link{
  color: var(--calwater-blue);
}

p {
  margin-bottom: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5; /* 150% */
  color: var(--calwater-black);
  font-family: var(--font-body);
}

/* Mobile-first typography with rem units */
h1,
.text-h1 {
  font-size: 30px;
  line-height: 1.25;
  font-family: var(--font-heading);
}

h2,
.text-h2 {
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25; /* 125% */
  font-family: var(--font-heading);
}

h3,
.text-h3 {
  font-size: 24px; /* 24px on mobile */
  line-height: 1.25;
  font-family: var(--font-heading);
}

.text-h3-heading {
  font-size: 18px; /* 18px on mobile */
  line-height: 1.25;
  font-weight: 500;
}

h4,
.text-h4 {
  font-size: 20px; /* 20px on mobile */
  line-height: 1.5;
  font-family: var(--font-heading);
}

.text-h4-heading {
  font-size: 16px; /* 16px on mobile */
  line-height: 1.2;
  font-family: var(--font-heading);
}

h5,
.text-h5 {
  font-size: 20px; /* 20px on mobile */
  line-height: 1.5;
  font-family: var(--font-semibold);
}

.text-sm-h5 {
  font-family: var(--font-semibold);
}

@media (min-width: 992px) {
  .text-sm-h5 {
    font-size: 24px; /* 24px on desktop */
    line-height: 1.5;
    font-style: normal;
    font-weight: 500;
  }
}

.text-h5-heading {
  font-size: 20px; /* 20px on mobile */
  line-height: 1.5;
  font-family: var(--font-heading);
}

h6,
.text-h6 {
  font-size: 16px; /* 18px on mobile */
  line-height: 1.5;
  font-family: var(--font-semibold);
}

.text-h6-heading {
  font-size: 16px; /* 18px on mobile */
  line-height: 1.5;
  font-family: var(--font-heading);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--calwater-black);
  font-weight: 500;
  /* margin-bottom: 1rem; */
}

/* Desktop typography - Base font size becomes 16px */
@media (min-width: 992px) {
  body,
  .lead {
    font-size: 16px; /* Now 16px on desktop */
    line-height: 1.5;
    font-style: normal;
    font-weight: 500;
  }

  p {
    margin-bottom: 25px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 500;
  }

  h1,
  .text-h1 {
    font-size: 60px; /* 60px on desktop */
    line-height: 1.2;
  }

  h2,
  .text-h2 {
    font-size: 48px; /* 48px on desktop */
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
  }

  h3,
  .text-h3 {
    font-size: 36px; /* 36px on desktop */
    line-height: 1.5;
  }

  .text-h3-heading {
    font-size: 36px; /* 28px on mobile */
  }

  h4,
  .text-h4 {
    font-size: 30px; /* 30px on desktop */
    line-height: 1.2;
  }

  .text-h4-heading {
    font-size: 20px; /* 24px on mobile */
    line-height: 1.5;
  }

  h5,
  .text-h5 {
    font-size: 24px; /* 24px on desktop */
    line-height: 1.5;
    font-style: normal;
    font-weight: 500;
  }

  .text-h5-heading {
    font-size: 24px; /* 24px on desktop */
    line-height: 1.5;
    font-style: normal;
    font-weight: 500;
  }

  h6,
  .text-h6 {
    font-size: 20px; /* 20px on desktop */
    line-height: 1.5;
  }
  .text-h6-heading {
    font-size: 20px; /* 20px on desktop */
    line-height: 1.5;
  }
}

.heading-xs {
  font-size: 12px;
}
.heading-sm {
  font-size: 13px;
}
.heading-base,
.lead.heading-base {
  font-size: 14px;
}
.heading-lg,
.lead.heading-lg {
  font-size: 15px;
}
.heading-xl,
.lead.heading-xl {
  font-size: 20px;
}
.heading-2xl,
.lead.heading-2xl {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}
.heading-3xl,
.lead.heading-3xl {
  font-size: 18px;
}
.heading-4xl,
.lead.heading-4xl {
  font-size: 20px;
}
.heading-5xl,
.lead.heading-5xl {
  font-size: 24px;
}
.heading-6xl,
.lead.heading-6xl {
  font-size: 30px;
}
.heading-7xl,
.lead.heading-7xl {
  font-size: 36px;
}
.heading-8xl,
.lead.heading-8xl {
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
.heading-9xl,
.lead.heading-9xl {
  font-size: 70px;
}
.heading-10xl,
.lead.heading-10xl {
  font-size: 100px;
}
.heading-14xl,
.lead.heading-14xl {
  font-size: 60px;
  line-height: 1;
}

@media (min-width: 992px) {
  .heading-xs {
    font-size: 12px;
  }
  .heading-sm {
    font-size: 14px;
  }
  .heading-base {
    font-size: 16px;
  }
  .heading-lg {
    font-size: 18px;
  }
  .heading-xl {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
  }
  .heading-2xl {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
  }
  .heading-3xl {
    font-size: 30px;
  }
  .heading-4xl {
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
  }
  .heading-5xl {
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px; /* 100% */
  }
  .heading-6xl {
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2; /* 120% */
  }
  .ctl-content .heading-6xl {
    line-height: 1.05;
  }
  .heading-7xl {
    font-size: 72px;
  }
  .heading-8xl {
    font-size: 96px;
    font-weight: 500;
    line-height: 1; /* 96px */
  }
  .heading-9xl {
    font-size: 140px;
  }
  .heading-14xl,
  .lead.heading-14xl {
    font-size: 140px;
    line-height: 1;
  }
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--calwater-blue);
  text-decoration: none;
}

.text-head-font {
  font-family: var(--font-heading) !important;
}
.text-body-font {
  font-family: var(--font-body) !important;
}
.text-semibold-font {
  font-family: var(--font-semibold) !important;
}
.text-italic-font {
  font-family: var(--font-Italic) !important;
}

.font-body {
  font-size: 18px; /* 18px on mobile */
  line-height: 1.28;
  font-family: var(--font-body);
}

.text-decoration {
  text-decoration: underline;
}

.text-decoration-blue {
  text-decoration-color: var(--calwater-blue);
}

a.global-link {
  color: var(--calwater-black);
  text-decoration: underline;
  text-decoration-color: var(--calwater-blue);
}
.fw-bold {
  font-weight: 700 !important;
}

.ff-heading{
  font-family: var(--font-heading);
}

.ff-semibold{
  font-family: var(--font-semibold);
}

.font-60{
  font-size: 60px;
}
.font-48{
  font-size: 48px;
}
.font-36{
  font-size: 36px;
}
.font-34{
  font-size: 34px;
}
.font-32{
  font-size: 32px;
}

.font-30{
  font-size: 30px;
}

.font-28{
  font-size: 28px;
}

.font-26{
  font-size: 26px;
}

.font-24{
  font-size: 24px;
}

.font-22{
  font-size: 22px;
}

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

.font-18{
  font-size: 18px;
}

.font-16{
  font-size: 16px;
}

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

@media (min-width: 992px) {
  .font-sm-60{
    font-size: 60px;
  }
  .font-sm-48{
    font-size: 48px;
  }
  .font-sm-36{
    font-size: 36px;
  }
  .font-sm-34{
    font-size: 34px;
  }
  .font-sm-32{
    font-size: 32px;
  }
  .font-sm-30{
    font-size: 30px;
  }

  .font-sm-28{
    font-size: 28px;
  }

  .font-sm-26{
    font-size: 26px;
  }

  .font-sm-24{
    font-size: 24px;
  }

  .font-sm-22{
    font-size: 22px;
  }

  .font-sm-20{
    font-size: 20px;
  }

  .font-sm-18{
    font-size: 18px;
  }

  .font-sm-16{
    font-size: 16px;
  }

  .font-sm-14{
    font-size: 14px;
  }
}


/******
 ****** Bootstrap Component Customizations
 ******/

/* Button Styles - Following Design Specifications */
.btn {
  border-radius: 0 !important; /* Square corners as per design */
  font-family: var(--font-heading);
  font-weight: normal;
  border-width: 3px;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--calwater-yellow);
  border-color: var(--calwater-yellow);
  color: var(--calwater-black);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--calwater-teal);
  border-color: var(--calwater-teal);
  color: var(--calwater-black);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 150, 219, 0.3);
}

.btn-outline-primary {
  border-color: var(--calwater-yellow);
  color: var(--calwater-yellow);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--calwater-yellow);
  border-color: var(--calwater-yellow);
  color: var(--calwater-black);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn{
  color: var(--calwater-black);
  background-color: #f5f5f5;
  border-color: #f5f5f5;
}

/* Custom brand button variants */
.btn-calwater-blue {
  background-color: var(--calwater-blue);
  border-color: var(--calwater-blue);
  color: var(--calwater-white);
}

.btn-calwater-blue:hover,
.btn-calwater-blue:focus {
  background-color: transparent;
  border-color: var(--calwater-blue);
  color: var(--calwater-blue);
}

.download-btn {
  font-size: 1.5rem;
  color: var(--calwater-blue);
}
.download-btn i::before {
  font-weight: bold !important;
}

/* Background utilities */
.bg-calwater-blue {
  background-color: var(--calwater-blue) !important;
}
.bg-calwater-yellow {
  background-color: var(--calwater-yellow) !important;
}
.bg-calwater-orange {
  background-color: var(--calwater-orange) !important;
}
.bg-calwater-red {
  background-color: var(--calwater-red) !important;
}
.bg-calwater-green {
  background-color: var(--calwater-green) !important;
}
.bg-calwater-teal {
  background-color: var(--calwater-teal) !important;
}
.bg-calwater-light {
  background-color: var(--calwater-gray-light) !important;
}

/* Text color utilities */
.text-calwater-blue {
  color: var(--calwater-blue) !important;
}
.text-calwater-yellow {
  color: var(--calwater-yellow) !important;
}
.text-calwater-orange {
  color: var(--calwater-orange) !important;
}
.text-calwater-red {
  color: var(--calwater-red) !important;
}
.text-calwater-green {
  color: var(--calwater-green) !important;
}
.text-calwater-teal {
  color: var(--calwater-teal) !important;
}
.text-calwater-white {
  color: var(--calwater-white) !important;
}
.text-calwater-black {
  color: var(--calwater-black) !important;
}

/* Border utilities */
.border-calwater-yellow {
  border-color: var(--calwater-yellow) !important;
}
.border-calwater-orange {
  border-color: var(--calwater-orange) !important;
}
.border-calwater-teal {
  border-color: var(--calwater-teal) !important;
}
.border-calwater-red {
  border-color: var(--calwater-red) !important;
}

/* Custom decorative elements */
.text-highlight {
  position: relative;
  display: inline-block;
  z-index: 2;
}

/* Text Highlight Width Animation */
@keyframes highlightWidth {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.text-highlight.animate-highlight::after {
  animation: highlightWidth 0.8s ease-in-out forwards;
}

.text-highlight-yellow::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: var(--calwater-yellow);
  mix-blend-mode: multiply;
  z-index: -1;
}

.text-highlight-orange::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: var(--calwater-orange);
  mix-blend-mode: multiply;
  z-index: -1;
}

.text-highlight-teal::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: var(--calwater-teal);
  mix-blend-mode: multiply;
  z-index: -1;
}

.text-highlight-red::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: var(--calwater-red);
  mix-blend-mode: multiply;
  z-index: -1;
}

.text-highlight-light-blue::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: var(--calwater-light-blue);
  mix-blend-mode: multiply;
  z-index: -1;
}

.text-highlight-big::after {
  bottom: 10px;
  height: 10px !important;
}
@media (min-width: 992px) {
  .text-highlight-yellow::after {
    bottom: 10px;
    height: 14px;
  }

  .text-highlight-orange::after {
    bottom: 10px;
    height: 14px;
  }

  .text-highlight-teal::after {
    bottom: 10px;
    height: 14px;
  }

  .text-highlight-red::after {
    bottom: 10px;
    height: 14px;
  }

  .text-highlight-light-blue::after {
    bottom: 10px;
    height: 14px;
  }

  .text-highlight-big::after {
    bottom: 20px;
    height: 20px !important;
  }
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

/* .card-hover:hover {
  scale: 1.02;
} */

/* Event card accessibility improvements */
.event-card-wrapper {
  position: relative;
}

.event-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  min-height: 44px; /* Minimum touch target size */
  /* padding: 12px; Generous touch area */
  border-radius: 8px;
  transition: all 0.3s ease;
  outline: none;
}

.event-card-link:focus {
  outline: 2px solid var(--calwater-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

.event-card-link:hover {
  text-decoration: none;
  color: inherit;
}

.event-card-link:focus:not(:focus-visible) {
  outline: none;
}

.event-card-link:focus-visible {
  outline: 2px solid var(--calwater-blue);
  outline-offset: 2px;
}

/* Pagination accessibility improvements */

.pagination .page-item {
  margin-left: 5px;
  margin-right: 5px;
}
.pagination .page-link {
  min-height: 40px; /* Minimum touch target size */
  min-width: 40px;
  font-size: 18px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
  outline: none;
}

.pagination .page-link:focus {
  outline: 2px solid var(--calwater-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
  z-index: 1;
  position: relative;
}

.pagination .page-link:focus:not(:focus-visible) {
  outline: none;
}

.pagination .page-link:focus-visible {
  outline: 2px solid var(--calwater-blue);
  outline-offset: 2px;
}

.pagination .page-item.active .page-link {
  background-color: var(--calwater-blue);
  border-color: var(--calwater-blue);
  color: white;
  font-weight: 600;
}

.pagination .page-item.active .page-link:focus {
  background-color: var(--calwater-blue);
  border-color: var(--calwater-blue);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.5);
}

.page-item:first-child .page-link {
  border-radius: 100%;
}

.page-item:last-child .page-link {
  border-radius: 100%;
}

.pagination .page-link:hover:not(.active) {
  background-color: rgba(0, 123, 255, 0.1);
  border-color: var(--calwater-blue);
  color: var(--calwater-blue);
}

/* Document card accessibility improvements */
.document-card-wrapper {
  position: relative;
}

.document-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  min-height: 44px; /* Minimum touch target size */
  /* padding: 8px; Generous touch area */
  border-radius: 8px;
  transition: all 0.3s ease;
  outline: none;
}

.document-card-link:focus {
  outline: 2px solid var(--calwater-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

.document-card-link:hover {
  text-decoration: none;
  color: inherit;
}

.document-card-link:focus:not(:focus-visible) {
  outline: none;
}

.document-card-link:focus-visible {
  outline: 2px solid var(--calwater-blue);
  outline-offset: 2px;
}

/* Ensure containers don't clip focus outlines */
.document-card-wrapper,
.event-card-wrapper {
  overflow: visible;
  height: 100%;
}

/* Ensure pagination containers don't clip focus outlines */
.pagination {
  overflow: visible;
}

.pagination .page-item {
  overflow: visible;
}

/* Responsive typography adjustments - Mobile optimizations */
@media (max-width: 767px) {
  .display-1 {
    font-size: 4.29rem;
  } /* 60px on mobile */
  .display-2 {
    font-size: 3.43rem;
  } /* 48px on mobile */
  .display-3 {
    font-size: 2.86rem;
  } /* 40px on mobile */
  .display-4 {
    font-size: 2.29rem;
  } /* 32px on mobile */
  .display-5 {
    font-size: 1.86rem;
  } /* 26px on mobile */
  .display-6 {
    font-size: 1.57rem;
  } /* 22px on mobile */

  .text-highlight-yellow::after,
  .text-highlight-orange::after,
  .text-highlight-teal::after,
  .text-highlight-red::after,
  .text-highlight-light-blue::after {
    height: 8px; /* Smaller underline on mobile */
  }
  .heading-5xl,
  .lead.heading-5xl {
    font-size: 16px;
  }

}

.page-title-wrapper {
  background-image: url("./assets/images/title-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8rem 0 7rem;
}
.page-title-inner {
  display: flex;
}
#page-title {
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#page-title::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: -2rem;
  width: 100%;
  height: 100%;
  background-image: url("./assets/images/title-left.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  z-index: -1;
}
#page-title::after {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 2rem;
  width: 100%;
  height: 100%;
  background-image: url("./assets/images/title-right.png");
  background-position: right top;
  background-repeat: no-repeat;
  z-index: -1;
}

@media (min-width: 992px) {
  .home #site-content,
  .page-title-wrapper {
    position: relative;
    margin-top: -90px;
  }
}
@media (max-width: 991px) {
  .page-title-wrapper {
    padding: 5rem 0;
  }
  .page-title-inner {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  #page-title::before {
    top: 1rem;
    left: -1.5rem;
    background-size: 40px;
  }
  #page-title::after {
    top: -1rem;
    left: 1.5rem;
    background-size: 40px;
  }
}

/******
 ****** swiper
 ******/
.swiper-container {
  --swiper-navigation-size: 14px;
  --swiper-theme-color: #fff;
  --swiper-navigation-color: #fff;
  position: relative;
  /* padding: 0 40px; */
}
/* @media (min-width: 992px) {
  .swiper-container {
    padding: 0 90px;
  }
} */
.swiper-inner {
  overflow: hidden;
}

.swiper-button-next,
.swiper-button-prev {
  border-radius: 60px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-color: var(--calwater-blue);
  font-weight: bold;
  outline: none;
  background-color: var(--calwater-blue);
  transition-delay: 0s !important;
  transition: opacity 0s ease, transform 0s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 0.8 !important;
  transition-delay: 0s !important;
  transition: opacity 0s ease, transform 0s ease !important;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
  transition-delay: 0s !important;
  transition: opacity 0s ease, transform 0s ease !important;
}

/* #quote-showcase-carousel .swiper-button-next.swiper-button-disabled,
#quote-showcase-carousel .swiper-button-prev.swiper-button-disabled {
    opacity: 1 !important;
    pointer-events: unset !important;
} */


.swiper-button-prev:after {
  content: url("assets/images/arrow-white-left.svg");
}
.swiper-button-next:after {
  content: url("assets/images/arrow-white-right.svg");
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px;
}
.swiper-button-next {
  right: 0;
}
.swiper-button-prev {
  left: 0;
}
.swiper-button-prev:hover {
  opacity: 0.5;
}
.swiper-pagination-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 480px) {
  #employee-stories-carousel .swiper-pagination-wrapper {
    display: none;
  }
}

.swiper-pagination-wrapper .swiper-pagination {
  position: relative;
  background-color: var(--calwater-blue);
  padding: 10px 12px;
  border-radius: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-container
.swiper-pagination-wrapper
.swiper-pagination
.swiper-pagination-bullet {
  margin: 0 4px;
  background-color: var(--calwater-white);
  opacity: 1;
}
.swiper-container
.swiper-pagination-wrapper
.swiper-pagination
.swiper-pagination-bullet-active {
  background-color: var(--calwater-yellow);
  opacity: 1;
  width: 18px;
  border-radius: 8px;
}

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.clamp-2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clamp-3 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.back-link-btn {
  display: flex;
  align-items: center;
  color: var(--calwater-black);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.back-link-btn i {
  color: var(--calwater-blue);
  margin-right: 5px;
}
.back-link-btn i::before {
  font-weight: bold;
}

.back-link .back-link-btn {
  font-family: var(--font-heading);
}

/******
 ****** Add grid style
 ******/
@media (min-width: 992px) {
  section#timeline .row.align-items-center.g-5,
  section#timeline .row.align-items-center.g-5 .col-lg-7 {
    margin-top: 0 !important;
  }

  section#timeline .row.align-items-center.g-5,
  section#timeline .row.align-items-center.g-5 .col-lg-5 {
    padding-right: 0 !important;
  }
  section#timeline .row.align-items-center.g-5 .col-lg-5 .timeline-content {
    width: 90% !important;
  }
  #community .col-lg-5.order-lg-first {
    flex: 0 0 auto !important;
    max-width: 35% !important;
  }
}

/* .container,
.row {
  --bs-gutter-x: 30px;
} */

.row-0 {
  --bs-gutter-x: 0;
}

.row-10 {
  --bs-gutter-x: 10px;
}
.row-15 {
  --bs-gutter-x: 15px;
}

.row-20 {
  --bs-gutter-x: 20px;
}

.row-30 {
  --bs-gutter-x: 30px;
}

.row-40 {
  --bs-gutter-x: 40px;
}

.row-50 {
  --bs-gutter-x: 50px;
}

.row-60 {
  --bs-gutter-x: 60px;
}

.row-70 {
  --bs-gutter-x: 70px;
}

.row-80 {
  --bs-gutter-x: 80px;
}

.row-90 {
  --bs-gutter-x: 90px;
}

.row-100 {
  --bs-gutter-x: 100px;
}

.row-110 {
  --bs-gutter-x: 110px;
}

.row-120 {
  --bs-gutter-x: 120px;
}

.row-130 {
  --bs-gutter-x: 130px;
}

.row-140 {
  --bs-gutter-x: 140px;
}

.row-150 {
  --bs-gutter-x: 150px;
}

.row-160 {
  --bs-gutter-x: 160px;
}

.row-170 {
  --bs-gutter-x: 170px;
}

.row-180 {
  --bs-gutter-x: 180px;
}

.row-190 {
  --bs-gutter-x: 190px;
}

.row-200 {
  --bs-gutter-x: 200px;
}

.col-55 {
  flex: 0 0 auto;
  width: 20%;
}

.col-77 {
  flex: 0 0 auto;
  width: 14.2857143%;
}

@media (min-width: 576px) {
  .row-sm-0 {
    --bs-gutter-x: 0;
  }

  .row-sm-15 {
    --bs-gutter-x: 15px;
  }

  .row-sm-10 {
    --bs-gutter-x: 10px;
  }

  .row-sm-20 {
    --bs-gutter-x: 20px;
  }

  .row-sm-30 {
    --bs-gutter-x: 30px;
  }

  .row-sm-40 {
    --bs-gutter-x: 40px;
  }

  .row-sm-50 {
    --bs-gutter-x: 50px;
  }

  .row-sm-60 {
    --bs-gutter-x: 60px;
  }

  .row-sm-70 {
    --bs-gutter-x: 70px;
  }

  .row-sm-80 {
    --bs-gutter-x: 80px;
  }

  .row-sm-90 {
    --bs-gutter-x: 90px;
  }

  .row-sm-100 {
    --bs-gutter-x: 100px;
  }

  .row-sm-110 {
    --bs-gutter-x: 110px;
  }

  .row-sm-120 {
    --bs-gutter-x: 120px;
  }

  .row-sm-130 {
    --bs-gutter-x: 130px;
  }

  .row-sm-140 {
    --bs-gutter-x: 140px;
  }

  .row-sm-150 {
    --bs-gutter-x: 150px;
  }

  .row-sm-160 {
    --bs-gutter-x: 160px;
  }

  .row-sm-170 {
    --bs-gutter-x: 170px;
  }

  .row-sm-180 {
    --bs-gutter-x: 180px;
  }

  .row-sm-190 {
    --bs-gutter-x: 190px;
  }

  .row-sm-200 {
    --bs-gutter-x: 200px;
  }

  .col-sm-55 {
    flex: 0 0 auto;
    width: 20%;
  }

  .col-sm-77 {
    flex: 0 0 auto;
    width: 14.2857143%;
  }
}

@media (min-width: 768px) {
  .row-md-0 {
    --bs-gutter-x: 0;
  }

  .row-md-10 {
    --bs-gutter-x: 10px;
  }

  .row-md-20 {
    --bs-gutter-x: 20px;
  }

  .row-md-30 {
    --bs-gutter-x: 30px;
  }

  .row-md-40 {
    --bs-gutter-x: 40px;
  }

  .row-md-50 {
    --bs-gutter-x: 50px;
  }

  .row-md-60 {
    --bs-gutter-x: 60px;
  }

  .row-md-70 {
    --bs-gutter-x: 70px;
  }

  .row-md-80 {
    --bs-gutter-x: 80px;
  }

  .row-md-90 {
    --bs-gutter-x: 90px;
  }

  .row-md-100 {
    --bs-gutter-x: 100px;
  }

  .row-md-110 {
    --bs-gutter-x: 110px;
  }

  .row-md-120 {
    --bs-gutter-x: 120px;
  }

  .row-md-130 {
    --bs-gutter-x: 130px;
  }

  .row-md-140 {
    --bs-gutter-x: 140px;
  }

  .row-md-150 {
    --bs-gutter-x: 150px;
  }

  .row-md-160 {
    --bs-gutter-x: 160px;
  }

  .row-md-170 {
    --bs-gutter-x: 170px;
  }

  .row-md-180 {
    --bs-gutter-x: 180px;
  }

  .row-md-190 {
    --bs-gutter-x: 190px;
  }

  .row-md-200 {
    --bs-gutter-x: 200px;
  }

  .col-md-55 {
    flex: 0 0 auto;
    width: 20%;
  }

  .col-md-77 {
    flex: 0 0 auto;
    width: 14.2857143%;
  }
}

@media (min-width: 992px) {
  .row-lg-0 {
    --bs-gutter-x: 0;
  }

  .row-lg-10 {
    --bs-gutter-x: 10px;
  }

  .row-lg-20 {
    --bs-gutter-x: 20px;
  }

  .row-lg-30 {
    --bs-gutter-x: 30px;
  }

  .row-lg-40 {
    --bs-gutter-x: 40px;
  }

  .row-lg-50 {
    --bs-gutter-x: 50px;
  }

  .row-lg-60 {
    --bs-gutter-x: 60px;
  }

  .row-lg-70 {
    --bs-gutter-x: 70px;
  }

  .row-lg-80 {
    --bs-gutter-x: 80px;
  }

  .row-lg-90 {
    --bs-gutter-x: 90px;
  }

  .row-lg-100 {
    --bs-gutter-x: 100px;
  }

  .row-lg-110 {
    --bs-gutter-x: 110px;
  }

  .row-lg-120 {
    --bs-gutter-x: 120px;
  }

  .row-lg-130 {
    --bs-gutter-x: 130px;
  }

  .row-lg-140 {
    --bs-gutter-x: 140px;
  }

  .row-lg-150 {
    --bs-gutter-x: 150px;
  }

  .row-lg-160 {
    --bs-gutter-x: 160px;
  }

  .row-lg-170 {
    --bs-gutter-x: 170px;
  }

  .row-lg-180 {
    --bs-gutter-x: 180px;
  }

  .row-lg-190 {
    --bs-gutter-x: 190px;
  }

  .row-lg-200 {
    --bs-gutter-x: 200px;
  }

  .col-lg-55 {
    flex: 0 0 auto;
    width: 20%;
  }

  .col-lg-77 {
    flex: 0 0 auto;
    width: 14.2857143%;
  }
}

@media (min-width: 1200px) {
  .row-xl-0 {
    --bs-gutter-x: 0;
  }

  .row-xl-10 {
    --bs-gutter-x: 10px;
  }

  .row-xl-20 {
    --bs-gutter-x: 20px;
  }

  .row-xl-30 {
    --bs-gutter-x: 30px;
  }

  .row-xl-40 {
    --bs-gutter-x: 40px;
  }

  .row-xl-50 {
    --bs-gutter-x: 50px;
  }

  .row-xl-60 {
    --bs-gutter-x: 60px;
  }

  .row-xl-70 {
    --bs-gutter-x: 70px;
  }

  .row-xl-80 {
    --bs-gutter-x: 80px;
  }

  .row-xl-90 {
    --bs-gutter-x: 90px;
  }

  .row-xl-100 {
    --bs-gutter-x: 100px;
  }

  .row-xl-110 {
    --bs-gutter-x: 110px;
  }

  .row-xl-120 {
    --bs-gutter-x: 120px;
  }

  .row-xl-130 {
    --bs-gutter-x: 130px;
  }

  .row-xl-140 {
    --bs-gutter-x: 140px;
  }

  .row-xl-150 {
    --bs-gutter-x: 150px;
  }

  .row-xl-160 {
    --bs-gutter-x: 160px;
  }

  .row-xl-170 {
    --bs-gutter-x: 170px;
  }

  .row-xl-180 {
    --bs-gutter-x: 180px;
  }

  .row-xl-190 {
    --bs-gutter-x: 190px;
  }

  .row-xl-200 {
    --bs-gutter-x: 200px;
  }

  .col-xl-55 {
    flex: 0 0 auto;
    width: 20%;
  }

  .col-xl-77 {
    flex: 0 0 auto;
    width: 14.2857143%;
  }
}

.navbar-nav {
  --bs-nav-link-padding-y: 15px;
}
.trust-on-tap-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center */
  height: 100%; /* fill the column height */
}
@media (min-width: 9920px) {
  .trust-on-tap-content {
    align-items: flex-start; /* keep content left-aligned */
  }
}