:root {
  /* ===== Brand Colors ===== */
  --color-brand-primary: #6397c6; /* Sky Blue */
  --color-brand-secondary: #2c4660; /* Deep Navy */
  --color-brand-accent: #adc9e3; /* Pastel Blue */
  --color-brand-background: #fafafa; /* Soft Neutral */

  /* ===== Extended Neutrals ===== */
  --color-white: #ffffff;
  --color-black-true: #000000;
  --color-black-soft: #1a1a1a;     /* preferred text black */
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #c4c4c4;
  --color-gray-600: #666666;
  --color-gray-800: #333333;
  --color-gray-900: #212121;

  /* ===== Typography Colors ===== */
  --color-text-base: var(--color-black-soft);
  --color-text-muted: var(--color-gray-600);
  --color-text-heading: var(--color-brand-secondary);
  --color-text-inverse: var(--color-white);

  /* ===== Feedback / Status ===== */
  --color-success: #4caf50;
  --color-warning: #f5b01b;
  --color-danger: #e53935;
  --color-info: #1fbcd6;

  /* ===== Links ===== */
  --color-link: var(--color-brand-primary);
  --color-link-hover: #4a7aa6;

  /* Font family + weights (Nunito) */
  --font-family-base: "Nunito", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ---- Adjust these two if your project uses a different min/max viewport ---- */
  --vw-min: 320;   /* px */
  --vw-max: 1440;  /* px */

  /* ---- Fluid font-size tokens (edit these clamps to taste) ---- */
  --fs-h1: clamp(2.25rem, 1.60rem + 2.50vw, 3.50rem);   /* ~36 → 56px */
  --fs-h2: clamp(1.875rem, 1.35rem + 2.00vw, 2.75rem);  /* ~30 → 44px */
  --fs-h3: clamp(1.50rem, 1.20rem + 1.20vw, 2.00rem);   /* ~24 → 32px */
  --fs-h4: clamp(1.25rem, 1.05rem + 0.70vw, 1.50rem);   /* ~20 → 24px */
  --fs-h5: clamp(1.125rem, 1.00rem + 0.40vw, 1.25rem);  /* ~18 → 20px */
  --fs-h6: clamp(1.00rem, 0.95rem + 0.20vw, 1.125rem);  /* ~16 → 18px */

  --fs-p:  clamp(1.00rem, 0.98rem + 0.20vw, 1.0625rem); /* ~16 → 17px */
  --fs-sm: clamp(0.9375rem, 0.90rem + 0.20vw, 1.00rem); /* ~15 → 16px */
  --fs-xs: clamp(0.8125rem, 0.78rem + 0.20vw, 0.875rem);/* ~13 → 14px */
  --fs-xxs: clamp(0.75rem, 0.72rem + 0.15vw, 0.80rem);  /* ~12 → 12.8px */

  /* Line-height tokens for readability */
  --lh-tight: 1.15;
  --lh-snug:  1.25;
  --lh-normal:1.5;
  --lh-relaxed:1.65;
  --lh-loose: 1.75;

  /* Letter-spacing (slight negative for big display heads) */
  --ls-tight: -0.01em;
  --ls-tighter: -0.015em;
}

--bg-gradient-brand-primary: linear-gradient(0deg,rgba(99, 151, 198, 0.57) 14%, rgba(255, 255, 255, 0.81) 100%);
--bg-gradient-brand-secondary: linear-gradient(0deg,rgba(44, 70, 96, 0.57) 14%, rgba(255, 255, 255, 0.81) 100%);

/* ===== Base Typography ===== */
body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  color: var(--color-text-base);
  background-color: var(--color-brand-background);
  line-height: 1.6;
}

/* Headings use your existing color vars */
h1, .heading--xl {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-heading);
}
h2, .heading--lg {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}
h3, .heading--md {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}
h4, .heading--sm {
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-heading);
}
h5, .heading--xs {
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-heading);
}
h6, .heading--xxs {
  font-size: var(--fs-h6);
  line-height: var(--lh-normal);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-heading);
}

/* Paragraphs & small text */
p { font-size: var(--fs-p); line-height: var(--lh-relaxed); }
.small, .text--sm { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.text--xs { font-size: var(--fs-xs); line-height: var(--lh-normal); }
.text--xxs { font-size: var(--fs-xxs); line-height: var(--lh-normal); }

/* Form-friendly sizes (labels, help, inputs) */
.form__label { font-size: var(--fs-sm); line-height: var(--lh-normal); font-weight: var(--font-weight-bold); }
.form__help { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--color-text-muted); }
.input, .select, .textarea { font-size: var(--fs-p); line-height: 1.4; }

/* BEM utility classes for font-size tokens (apply anywhere) */
.u-fs--h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-tight) !important; }
.u-fs--h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-snug) !important; }
.u-fs--h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-snug) !important; }
.u-fs--h4 { font-size: var(--fs-h4) !important; line-height: var(--lh-normal) !important; }
.u-fs--h5 { font-size: var(--fs-h5) !important; line-height: var(--lh-normal) !important; }
.u-fs--h6 { font-size: var(--fs-h6) !important; line-height: var(--lh-normal) !important; }

.u-fs--p  { font-size: var(--fs-p)  !important; line-height: var(--lh-relaxed) !important; }
.u-fs--sm { font-size: var(--fs-sm) !important; line-height: var(--lh-normal) !important; }
.u-fs--xs { font-size: var(--fs-xs) !important; line-height: var(--lh-normal) !important; }
.u-fs--xxs{ font-size: var(--fs-xxs)!important; line-height: var(--lh-normal) !important; }

/* Optional weight utilities */
.u-fw--light { font-weight: var(--font-weight-light) !important; }
.u-fw--regular { font-weight: var(--font-weight-regular) !important; }
.u-fw--bold { font-weight: var(--font-weight-bold) !important; }
.u-fw--extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Muted text */
.u-text--muted { color: var(--color-text-muted) !important; }

/* Inverse text */
.u-text--inverse { color: var(--color-text-inverse) !important; }

/* Link text */
.u-text--link { color: var(--color-link) !important; }
.u-text--link:hover { color: var(--color-link-hover) !important; }

/* Service Benefit Card CSS */
.service-benefits__item {
  padding: 3rem;
}

@media (max-width: 1024px) {
.service-benefits__item {
  padding: 2rem;
}
}

@media (max-width: 600px) {
.service-benefits__item {
  padding: 1.5rem;
}
}

.service-benefits__title {
  font-size: var(--fs-h4) !important;
  line-height: var(--lh-normal) !important;
  color: var(--color-white, #ffffff);
}

.service-benefits__content {
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-normal) !important;
  color: var(--color-white, #ffffff);
}

.service-benefits__content ul {
  margin-left: 1.5rem!important;
}

/* Tablets and Smartphones - alternating odd/even backgrounds */
@media (max-width: 1024px) {
  /* 1st, 3rd, 5th items - Primary color */
  .w-grid-item:nth-child(odd) .service-benefits__item {
    background-color: var(--color-brand-primary, #6397c6);
  }
  
  /* 2nd, 4th, 6th items - Secondary color */
  .w-grid-item:nth-child(even) .service-benefits__item {
    background-color: var(--color-brand-secondary, #2c4660);
  }
}

/* Desktop and Laptop - specific pattern */
@media (min-width: 1025px) {
  /* 1st and 4th items - Primary color */
  .w-grid-item:nth-child(1) .service-benefits__item,
  .w-grid-item:nth-child(4) .service-benefits__item {
    background-color: var(--color-brand-primary, #6397c6);
  }
  
  /* 2nd and 3rd items - Secondary color */
  .w-grid-item:nth-child(2) .service-benefits__item,
  .w-grid-item:nth-child(3) .service-benefits__item {
    background-color: var(--color-brand-secondary, #2c4660);
  }
}

/* service grid css */
.service-grid {

}

.service-grid__item {
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
  background: var(--color-gray-200, #e0e0e0);
}

.service-grid__image {
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.service-grid__title {
  margin-left: 0.4rem!important;
	margin-right: 0.4rem!important;
  font-size: var(--fs-h3)!important;
}


.service-grid__price {

}

.service-grid__price span.w-post-elm-before {
  font-weight: var(--font-weight-bold);
  margin-left: 0.4rem!important;
	margin-right: 0.4rem!important;
}

.service-grid__excerpt * {
	margin-left: 0.4rem!important;
	margin-right: 0.4rem!important;
  font-size: var(--fs-h5)!important;
  line-height: var(--lh-relaxed);
}

.service-grid__content {
	margin-left: 0.4rem!important;
	margin-right: 0.4rem!important;
}

.service-grid__content ul {
  margin-left: 1.5rem!important;
}

.service-grid__button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
  margin-top: auto;
}
/* end of service grid css */
/* branch pages css */
.branch-services-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary, #6397c6);
}

.branch-services .service_title {
  font-weight: var(--font-weight-bold);
}

.choose-us-content ul {
  margin-left: 1.5rem!important;
}

.areas-title {
  color: var(--color-brand-secondary, #2c4660);
}

.areas-content {
  color: var(--color-brand-secondary, #2c4660);
}

.trusted-title {
  color: var(--color-white, #FFFFFF);
}

.trusted-content {
  color: var(--color-white, #FFFFFF);
}

/* end of branch pages css */

/* branch grid */
.branch-grid__title {
    margin-left: 0.4rem !important;
    margin-right: 0.4rem !important;
    font-size: var(--fs-h3) !important;
    padding-top: 0 !important;
}

.branch-grid__content {
    margin-left: 0.4rem !important;
    margin-right: 0.4rem !important;
}

/* Testimonial Grid */
.testimonial__item {
  padding: 1.2rem;
  background: var(--color-brand-secondary, #2c4660);
  border-radius: 1.5rem;
  height: 100%;
}

.testimonial__content {
  color: var(--color-white, #FFFFFF);
}

.testimonial__user {
  color: var(--color-white, #FFFFFF);
  margin-top: auto; /* Pushes the element to the bottom of the flex container */
  text-align: right; /* Aligns the text content to the right */
  font-weight: var(--font-weight-bold, 700);
}