/**
 * ============================================================================
 * WILSON HERBALS - GLOBAL DESIGN SYSTEM & TYPOGRAPHY ARCHITECTURE
 * Reference: https://wilsonherbals.com/
 * ============================================================================
 * Clean, consistent visual language, responsive tokens, and semantic classes.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================================
   1. CSS VARIABLES (DESIGN TOKENS)
   ============================================================================ */
:root {
  /* Primary Font Family (Single Source of Truth) */
  --wh-font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-primary: var(--wh-font-primary);
  --primary-font: var(--wh-font-primary);

  /* Font Weights */
  --wh-font-weight-light: 300;
  --wh-font-weight-regular: 400;
  --wh-font-weight-medium: 500;
  --wh-font-weight-semibold: 600;
  --wh-font-weight-bold: 700;
  --wh-font-weight-extrabold: 800;
  --wh-font-weight-black: 900;

  /* Typography Scale */
  --wh-text-xs: 12px;
  --wh-text-sm: 13.5px;
  --wh-text-base: 15px;
  --wh-text-md: 16px;
  --wh-text-lg: 18px;
  --wh-text-xl: 20px;
  --wh-text-2xl: 24px;
  --wh-text-3xl: 28px;
  --wh-text-4xl: 34px;
  --wh-text-5xl: 42px;

  /* Line Heights */
  --wh-leading-none: 1;
  --wh-leading-tight: 1.25;
  --wh-leading-snug: 1.35;
  --wh-leading-normal: 1.55;
  --wh-leading-relaxed: 1.75;
  --wh-leading-loose: 2;

  /* Letter Spacing */
  --wh-tracking-tight: -0.015em;
  --wh-tracking-normal: 0em;
  --wh-tracking-wide: 0.025em;
  --wh-tracking-wider: 0.05em;

  /* Brand Green Palette */
  --wh-primary: #009845;
  --wh-primary-dark: #00823b;
  --wh-primary-light: #F0FFF7;
  --wh-primary-soft: #ECF7F6;
  --wh-secondary: #0DD367;

  /* Accent Red Palette (Primary CTA Buttons & Highlights) */
  --wh-accent: #8E1F12;
  --wh-accent-hover: #AC2A19;

  /* Text & Neutral Colors (High Contrast & Legibility) */
  --wh-color-text-primary: #333333;
  --wh-color-text-secondary: #555555;
  --wh-color-text-muted: #777777;
  --wh-color-heading: #111827;
  --wh-color-heading-muted: #2d3748;
  --wh-color-link: #009845;
  --wh-color-link-hover: #007535;

  /* Token Aliases */
  --wh-heading: var(--wh-color-heading);
  --wh-heading-muted: var(--wh-color-heading-muted);
  --wh-text: var(--wh-color-text-secondary);
  --wh-text-dark: var(--wh-color-text-primary);
  --wh-text-muted: var(--wh-color-text-muted);
  --wh-text-light: #666666;
  --wh-white: #FFFFFF;

  /* Surface & Background Colors */
  --wh-bg-body: #FFFFFF;
  --wh-bg-soft: #ECF7F6;
  --wh-bg-mint: #F0FFF7;
  --wh-bg-dark: #121815;

  /* Footer Design Tokens */
  --wh-footer-bg: #121815;
  --wh-footer-heading: #FFFFFF;
  --wh-footer-text: #E5E7EB;
  --wh-footer-text-muted: #D1D5DB;
  --wh-footer-link: #E5E7EB;
  --wh-footer-link-hover: #009845;
  --wh-footer-border: rgba(255, 255, 255, 0.15);
  --wh-footer-enquiry-heading: #22C55E;
  --wh-footer-form-input-bg: #FFFFFF;
  --wh-footer-form-input-color: #333333;
  --wh-footer-form-placeholder-color: #6B7280;
  --wh-footer-form-border: #FFFFFF;
  --wh-footer-form-border-focus: #22C55E;
  --wh-footer-form-radius: 4px;
  --wh-footer-form-input-height: 40px;
  --wh-footer-form-gap: 10px;
  --wh-footer-btn-bg: #22994D;
  --wh-footer-btn-hover: #1B7A3D;
  --wh-footer-btn-radius: 4px;

  /* Borders & Dividers */
  --wh-border: #B0B0B0;
  --wh-border-light: #E5E7EB;
  --wh-border-menu: #c4c4c4;

  /* Layout & Spacing */
  --wh-container-max: 1140px;
  --wh-container-pad: 15px;
  --wh-section-py: 60px;
  --wh-section-py-lg: 80px;
  --wh-section-py-mobile: 35px;
  --wh-gap-sm: 10px;
  --wh-gap: 20px;
  --wh-gap-lg: 30px;

  /* Border Radii */
  --wh-radius-sm: 5px;
  --wh-radius-md: 10px;
  --wh-radius-lg: 12px;
  --wh-radius-xl: 20px;
  --wh-radius-full: 50px;

  /* Shadows */
  --wh-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
  --wh-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.10);
  --wh-shadow-dropdown: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --wh-transition: all 0.3s ease;
}

/* ============================================================================
   2. GLOBAL BASE RESET & TYPOGRAPHY INHERITANCE
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
textarea,
select,
label,
li,
span,
blockquote,
th,
td {
  font-family: var(--wh-font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: var(--wh-font-weight-regular);
  line-height: var(--wh-leading-relaxed);
  color: var(--wh-color-text-secondary);
  background-color: var(--wh-bg-body);
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--wh-font-primary);
  color: var(--wh-color-heading);
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: var(--wh-leading-tight);
}

h1 {
  font-size: var(--wh-text-4xl);
  font-weight: var(--wh-font-weight-bold);
}

h2 {
  font-size: var(--wh-text-3xl);
  font-weight: var(--wh-font-weight-bold);
}

h3 {
  font-size: var(--wh-text-2xl);
  font-weight: var(--wh-font-weight-semibold);
}

h4 {
  font-size: var(--wh-text-xl);
  font-weight: var(--wh-font-weight-semibold);
}

h5 {
  font-size: var(--wh-text-lg);
  font-weight: var(--wh-font-weight-semibold);
}

h6 {
  font-size: var(--wh-text-md);
  font-weight: var(--wh-font-weight-semibold);
}

p {
  font-family: var(--wh-font-primary);
  color: var(--wh-color-text-secondary);
  font-size: var(--wh-text-base);
  line-height: var(--wh-leading-relaxed);
  margin-top: 0;
  margin-bottom: 1rem;
}

b,
strong {
  font-weight: var(--wh-font-weight-semibold);
  color: var(--wh-color-heading);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--wh-transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

input,
textarea,
select,
button {
  font-family: var(--wh-font-primary);
}

/* ============================================================================
   3. SEMANTIC TYPOGRAPHY UTILITIES (DESIGNER TOKENS)
   ============================================================================ */
.wh-heading-1,
.wh-h1 {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-4xl);
  font-weight: var(--wh-font-weight-bold);
  color: var(--wh-color-heading);
  line-height: var(--wh-leading-tight);
}

.wh-heading-2,
.wh-h2 {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-3xl);
  font-weight: var(--wh-font-weight-bold);
  color: var(--wh-color-heading);
  line-height: var(--wh-leading-tight);
}

.wh-heading-3,
.wh-h3 {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-2xl);
  font-weight: var(--wh-font-weight-semibold);
  color: var(--wh-color-heading);
  line-height: var(--wh-leading-snug);
}

.wh-heading-4,
.wh-h4 {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-xl);
  font-weight: var(--wh-font-weight-semibold);
  color: var(--wh-color-heading);
  line-height: var(--wh-leading-snug);
}

.wh-body-text,
.wh-body {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: var(--wh-font-weight-regular);
  line-height: var(--wh-leading-relaxed);
  color: var(--wh-color-text-secondary);
}

.wh-body-lg {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-lg);
  line-height: var(--wh-leading-relaxed);
  color: var(--wh-color-text-primary);
}

.wh-body-sm {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-sm);
  line-height: var(--wh-leading-normal);
  color: var(--wh-color-text-secondary);
}

.wh-small-text {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-xs);
  line-height: var(--wh-leading-normal);
}

.wh-muted-text {
  color: var(--wh-color-text-muted);
}

.wh-link {
  color: var(--wh-color-link);
  text-decoration: none;
  transition: var(--wh-transition);
}

.wh-link:hover {
  color: var(--wh-color-link-hover);
  text-decoration: underline;
}

.wh-link--underlined {
  text-decoration: underline;
}

.wh-btn-text {
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: var(--wh-font-weight-semibold);
  letter-spacing: var(--wh-tracking-wide);
}

/* ============================================================================
   4. CMS / WYSIWYG CONTENT TYPOGRAPHY
   ============================================================================ */
.cms-content,
.wh-cms-content,
.ck-content,
.post--single .post__content,
.blog-detail-content,
.product-detail-content,
.intro-content {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  line-height: var(--wh-leading-relaxed);
  color: var(--wh-color-text-secondary);
}

.cms-content p,
.wh-cms-content p,
.ck-content p,
.post--single .post__content p,
.blog-detail-content p,
.product-detail-content p,
.intro-content p {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  line-height: var(--wh-leading-relaxed);
  color: var(--wh-color-text-secondary);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.cms-content h1,
.wh-cms-content h1,
.ck-content h1,
.post--single .post__content h1 {
  font-family: var(--wh-font-primary);
  font-size: 28px;
  font-weight: var(--wh-font-weight-bold);
  color: var(--wh-color-heading);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.cms-content h2,
.wh-cms-content h2,
.ck-content h2,
.post--single .post__content h2 {
  font-family: var(--wh-font-primary);
  font-size: 24px;
  font-weight: var(--wh-font-weight-bold);
  color: var(--wh-color-heading);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.cms-content h3,
.wh-cms-content h3,
.ck-content h3,
.post--single .post__content h3 {
  font-family: var(--wh-font-primary);
  font-size: 20px;
  font-weight: var(--wh-font-weight-semibold);
  color: var(--wh-color-heading);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.cms-content h4,
.wh-cms-content h4,
.ck-content h4,
.post--single .post__content h4 {
  font-family: var(--wh-font-primary);
  font-size: 18px;
  font-weight: var(--wh-font-weight-semibold);
  color: var(--wh-color-heading);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.cms-content a,
.wh-cms-content a,
.ck-content a,
.post--single .post__content a {
  color: var(--wh-color-link);
  text-decoration: underline;
  transition: var(--wh-transition);
}

.cms-content a:hover,
.wh-cms-content a:hover,
.ck-content a:hover,
.post--single .post__content a:hover {
  color: var(--wh-color-link-hover);
}

.cms-content ul,
.wh-cms-content ul,
.ck-content ul,
.post--single .post__content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--wh-color-text-secondary);
}

.cms-content ol,
.wh-cms-content ol,
.ck-content ol,
.post--single .post__content ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--wh-color-text-secondary);
}

.cms-content li,
.wh-cms-content li,
.ck-content li,
.post--single .post__content li {
  margin-bottom: 0.5rem;
  line-height: var(--wh-leading-normal);
  color: var(--wh-color-text-secondary);
}

.cms-content strong,
.cms-content b,
.wh-cms-content strong,
.wh-cms-content b,
.ck-content strong,
.ck-content b,
.post--single .post__content strong,
.post--single .post__content b {
  font-weight: var(--wh-font-weight-semibold);
  color: var(--wh-color-heading);
}

.cms-content blockquote,
.wh-cms-content blockquote,
.ck-content blockquote {
  border-left: 4px solid var(--wh-primary, #009845);
  background-color: var(--wh-bg-mint, #F0FFF7);
  padding: 16px 20px;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: var(--wh-color-text-primary);
}

/* ============================================================================
   3. LAYOUT & CONTAINER UTILITIES
   ============================================================================ */
.wh-container {
  width: 100%;
  max-width: var(--wh-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wh-container-pad);
  padding-right: var(--wh-container-pad);
}

.wh-section {
  padding-top: var(--wh-section-py);
  padding-bottom: var(--wh-section-py);
  position: relative;
}

.wh-section-lg {
  padding-top: var(--wh-section-py-lg);
  padding-bottom: var(--wh-section-py-lg);
}

.wh-section-sm {
  padding-top: 35px;
  padding-bottom: 35px;
}

/* Background Utility Classes */
.wh-bg-white {
  background-color: var(--wh-white);
}

.wh-bg-soft {
  background-color: var(--wh-bg-soft);
}

.wh-bg-mint {
  background-color: var(--wh-bg-mint);
}

.wh-bg-green {
  background-color: var(--wh-primary);
  color: var(--wh-white);
}

/* ============================================================================
   4. SECTION HEADER PATTERNS
   ============================================================================ */
.wh-section-header {
  margin-bottom: 40px;
}

.wh-section-header.text-center {
  text-align: center;
}

.wh-section-header.text-left {
  text-align: left;
}

.wh-section-badge,
.section-title-prefix {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--wh-primary, #009845);
  color: var(--wh-white, #ffffff);
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-2xl);
  font-weight: 500;
  line-height: 1.25;
  padding: 4px 10px;
  border-radius: 3px;
  margin-right: 6px;
  margin-bottom: 8px;
}

.wh-section-label {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-xl);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--wh-primary);
  line-height: 1.2;
  margin-bottom: 8px;
}

.wh-section-divider {
  display: block;
  margin-top: 6px;
  margin-bottom: 12px;
}

.wh-section-header.text-center .wh-section-divider {
  margin-left: auto;
  margin-right: auto;
}

.wh-section-title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-3xl);
  font-weight: 500;
  line-height: 1.25;
  color: var(--wh-heading);
  margin-top: 0;
  margin-bottom: 15px;
}

.wh-section-desc {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: 400;
  line-height: var(--wh-leading-loose);
  color: var(--wh-text);
  max-width: 850px;
  margin-bottom: 0;
}

.wh-section-desc p {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: inherit;
  color: inherit;
}

.wh-section-desc p:last-child {
  margin-bottom: 0;
}

.wh-section-desc strong,
.wh-section-desc b {
  font-weight: 600;
  color: var(--wh-heading);
}

.wh-section-desc a {
  color: var(--wh-primary);
  text-decoration: underline;
}

.wh-section-desc a:hover {
  color: var(--wh-primary-dark);
}

.wh-section-desc ul,
.wh-section-desc ol {
  margin-top: 8px;
  margin-bottom: 12px;
  padding-left: 20px;
}

.wh-section-desc li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.wh-section-header.text-center .wh-section-desc {
  margin-left: auto;
  margin-right: auto;
}

/* Green title variant for success section */
.wh-section-title--success {
  color: #1a7431 !important;
  font-weight: 600 !important;
  font-size: var(--wh-text-4xl) !important;
  margin-bottom: 35px;
}

/* Green highlight tag on heading words */
.green-bg {
  background-color: var(--wh-primary);
  color: var(--wh-white);
  padding: 3px 8px;
  display: inline-block;
  border-radius: 3px;
}

/* ============================================================================
   5. BUTTON SYSTEM
   ============================================================================ */
.wh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-sm);
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.3;
  padding: 8px 30px;
  border-radius: var(--wh-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: var(--wh-transition);
  text-decoration: none;
}

/* Primary CTA Red Button */
.wh-btn-primary,
.wh-btn-red {
  background-color: var(--wh-accent);
  color: var(--wh-white);
  border-color: var(--wh-accent);
  padding: 8px 45px;
}

.wh-btn-primary:hover,
.wh-btn-red:hover {
  background-color: var(--wh-accent-hover);
  border-color: var(--wh-accent-hover);
  color: var(--wh-white);
}

/* Primary Brand Green Button */
.wh-btn-green {
  background-color: var(--wh-primary);
  color: var(--wh-white);
  border-color: var(--wh-primary);
  font-weight: 500;
  padding: 8px 35px;
}

.wh-btn-green:hover {
  background-color: var(--wh-primary-dark);
  border-color: var(--wh-primary-dark);
  color: var(--wh-white);
}

/* Banner White Button (used on green banner) */
.wh-btn-white {
  background-color: var(--wh-white);
  color: var(--wh-primary);
  border-color: var(--wh-white);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--wh-radius-md);
  padding: 8px 45px;
}

.wh-btn-white:hover {
  background-color: var(--wh-bg-mint);
  color: var(--wh-primary-dark);
}

/* Outline Button */
.wh-btn-outline {
  background-color: transparent;
  color: var(--wh-primary);
  border-color: var(--wh-primary);
}

.wh-btn-outline:hover {
  background-color: var(--wh-primary);
  color: var(--wh-white);
}

/* ============================================================================
   6. CARDS & GRID COMPONENTS
   ============================================================================ */
/* Generic Card */
.wh-card {
  background-color: var(--wh-white);
  border-radius: var(--wh-radius-lg);
  padding: 24px;
  box-shadow: var(--wh-shadow-card);
  transition: var(--wh-transition);
}

.wh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wh-shadow-hover);
}

.wh-category-heading {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-2xl);
  font-weight: 500;
  color: var(--wh-heading-muted);
  margin-bottom: 8px;
}

/* Category Card (Product Range) */
.wh-category-card {
  background-color: var(--wh-white);
  border-radius: var(--wh-radius-sm);
  padding: 16px;
  text-align: center;
  transition: var(--wh-transition);
  display: block;
}

.wh-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wh-shadow-hover);
}

.wh-category-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--wh-radius-sm);
  margin-bottom: 14px;
}

.wh-category-card__title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-lg);
  font-weight: 400;
  line-height: 25px;
  color: var(--wh-heading-muted);
  margin: 0;
  transition: var(--wh-transition);
}

.wh-category-card:hover .wh-category-card__title {
  color: var(--wh-primary);
}

.wh-category-card__count {
  font-weight: 400;
  color: var(--wh-text-muted);
  margin-left: 4px;
}

/* Feature Card (What Drives Our Success) */
.wh-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: var(--wh-white);
  border-radius: var(--wh-radius-lg);
  box-shadow: var(--wh-shadow-card);
  padding: 20px;
  transition: var(--wh-transition);
  text-align: left;
}

.wh-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wh-shadow-hover);
}

.wh-feature-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.wh-feature-card__title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-md);
  font-weight: 600;
  color: #1a7431;
  margin-top: 0;
  margin-bottom: 6px;
}

.wh-feature-card__desc {
  font-family: var(--wh-font-primary);
  font-size: 15px;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 0;
}

.wh-feature-card__desc p {
  margin-top: 0;
  margin-bottom: 6px;
  line-height: inherit;
  color: inherit;
}

.wh-feature-card__desc p:last-child {
  margin-bottom: 0;
}

.wh-feature-card--outline {
  border: 1px solid var(--wh-border-light);
  box-shadow: none;
}

.wh-feature-card--outline .wh-feature-card__title {
  color: var(--wh-heading);
  font-weight: 500;
  font-size: var(--wh-text-lg);
}

.wh-feature-card--outline .wh-feature-card__icon {
  width: 50px;
  height: 50px;
}

/* What Sets Us Apart Cards */
.wh-apart-card {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  border-radius: 20px;
  padding: 26px 30px;
  transition: var(--wh-transition);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.wh-apart-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.wh-apart-card--green {
  background-color: #238843;
  color: var(--wh-white);
}

.wh-apart-card--red {
  background-color: #a32a1c;
  color: var(--wh-white);
}

.wh-apart-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--wh-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.wh-apart-card__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  color: var(--wh-white);
}

.wh-apart-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.wh-apart-card__content {
  flex-grow: 1;
}

.wh-apart-card__title {
  font-family: var(--wh-font-primary);
  font-size: 21px;
  font-weight: 500;
  color: var(--wh-white);
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 8px;
}

.wh-apart-card__desc {
  font-family: var(--wh-font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 0;
}

.wh-apart-card__desc p {
  margin-top: 0;
  margin-bottom: 6px;
  line-height: inherit;
  color: inherit;
}

.wh-apart-card__desc p:last-child {
  margin-bottom: 0;
}

.wh-apart-card__desc strong {
  font-weight: 600;
  color: var(--wh-white);
}

.wh-apart-card__desc a {
  color: var(--wh-white);
  text-decoration: underline;
}

/* Mission / Vision / Value Card (Our Aim & Commitments) */
.wh-mission-card {
  background-color: var(--wh-white);
  border-radius: var(--wh-radius-md);
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--wh-shadow-card);
  transition: var(--wh-transition);
}

.wh-mission-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wh-shadow-hover);
}

.wh-mission-card__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px auto;
  object-fit: contain;
}

.wh-mission-card__title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-2xl);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--wh-heading);
  margin-bottom: 12px;
}

.wh-mission-card__desc {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: 400;
  line-height: 26px;
  color: var(--wh-text);
  margin-bottom: 0;
}

.wh-mission-card__desc p {
  margin-top: 0;
  margin-bottom: 8px;
}

.wh-mission-card__desc p:last-child {
  margin-bottom: 0;
}

.wh-mission-card__desc strong {
  font-weight: 600;
  color: var(--wh-heading);
}

/* ============================================================================
   TESTIMONIALS COMPONENT (Matching Reference Site Exactly)
   ============================================================================ */
.wh-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background-color: var(--wh-white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-radius: var(--wh-radius-sm, 4px);
  overflow: hidden;
}

.wh-testimonial-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--wh-white);
  border-right: 1px solid #eaeaea;
  height: 100%;
}

.wh-testimonial-item:last-child {
  border-right: none;
}

.wh-testimonial-item__body {
  padding: 36px 32px 30px 32px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.wh-testimonial-item__quote-icon {
  margin-bottom: 18px;
  line-height: 1;
}

.wh-testimonial-item__quote-icon svg {
  width: 36px;
  height: 28px;
  display: block;
}

.wh-testimonial-item__text {
  font-family: var(--wh-font-primary);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #555555;
  margin: 0;
}

.wh-testimonial-item__text p {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: inherit;
  color: inherit;
}

.wh-testimonial-item__text p:last-child {
  margin-bottom: 0;
}

.wh-testimonial-item__text strong {
  font-weight: 600;
  color: var(--wh-heading);
}

.wh-testimonial-item__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: var(--wh-primary, #009845);
  color: var(--wh-white);
  padding: 16px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.wh-testimonial-item:last-child .wh-testimonial-item__footer {
  border-right: none;
}

.wh-testimonial-item__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #E2E8F0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wh-testimonial-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-testimonial-item__name {
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: 500;
  color: var(--wh-white);
  margin: 0;
  line-height: 1.3;
}

/* ============================================================================
   7. ACCORDION SYSTEM
   ============================================================================ */
.wh-accordion {
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
}

.wh-accordion-item {
  border-radius: var(--wh-radius-sm);
  overflow: hidden;
}

.wh-accordion-header {
  background-color: var(--wh-primary);
  color: var(--wh-white);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: var(--wh-transition);
}

.wh-accordion-title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-2xl);
  font-weight: 500;
  color: var(--wh-white);
  margin: 0;
}

.wh-accordion-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
  color: var(--wh-white);
}

.wh-accordion-content {
  background-color: var(--wh-white);
  padding: 24px 30px;
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: 400;
  line-height: var(--wh-leading-loose);
  color: var(--wh-text);
  border: 1px solid var(--wh-border-light);
  border-top: none;
}

.wh-accordion-content p {
  margin-top: 0;
  margin-bottom: 12px;
  line-height: inherit;
  color: inherit;
}

.wh-accordion-content p:last-child {
  margin-bottom: 0;
}

.wh-accordion-content strong,
.wh-accordion-content b {
  font-weight: 600;
  color: var(--wh-heading);
}

.wh-accordion-content a {
  color: var(--wh-primary);
  text-decoration: underline;
}

.wh-accordion-content ul,
.wh-accordion-content ol {
  margin-top: 8px;
  margin-bottom: 12px;
  padding-left: 20px;
}

.wh-accordion-content li {
  margin-bottom: 6px;
}

/* ============================================================================
   7.1 BENEFITS OF COLLABORATION SECTION (Exact Live Site Match)
   ============================================================================ */
.wh-benefits-section {
  background-color: var(--wh-bg-soft, #ECF7F6);
  padding-top: 70px;
  padding-bottom: 30px;
}

.wh-benefits-section .wh-container {
  max-width: 1260px;
  width: 100%;
}

.wh-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.wh-benefits-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wh-benefits-title {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.5px;
  color: #000000;
  margin-top: 0;
  margin-bottom: 10px;
}

.wh-benefits-desc {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #5F5F5F;
  text-align: justify;
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
}

.wh-benefits-desc p {
  line-height: inherit;
  color: inherit;
  margin-bottom: 12px;
}

.wh-benefits-desc p:last-child {
  margin-bottom: 0;
}

.wh-benefits-accordion {
  display: flex;
  flex-direction: column;
  /* gap: 14px; */
  width: 100%;
}

.wh-benefits-accordion .wh-accordion-item {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #d5d8dc;
  width: 100%;
}

.wh-benefits-accordion .wh-accordion-header {
  background-color: #009845;
  color: #FFFFFF;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
  width: 100%;
}

.wh-benefits-accordion .wh-accordion-title {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 26px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0;
}

.wh-benefits-accordion .wh-accordion-icon {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wh-benefits-accordion .wh-accordion-content {
  background-color: #FFFFFF;
  padding: 22px 30px;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #5F5F5F;
  border: none;
  border-top: 1px solid #d5d8dc;
  width: 100%;
}

.wh-benefits-accordion .wh-accordion-content p {
  line-height: inherit;
  color: inherit;
  margin-bottom: 10px;
}

.wh-benefits-accordion .wh-accordion-content p:last-child {
  margin-bottom: 0;
}

.wh-benefits-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 30px;
  width: 100%;
}

.wh-benefits-image-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wh-benefits-img {
  width: 100%;
  max-width: 620px;
  height: auto;
  object-fit: contain;
  display: block;
}

.wh-benefits-badges {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: flex-start;
  width: 100%;
}

.wh-benefits-badge-img {
  max-height: 75px;
  width: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 1200px) {
  .wh-benefits-section .wh-container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .wh-benefits-grid {
    gap: 28px;
  }

  .wh-benefits-media {
    padding-left: 15px;
  }
}

@media (max-width: 1024px) {
  .wh-benefits-section {
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .wh-benefits-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .wh-benefits-media {
    padding-left: 0;
    align-items: center;
  }

  .wh-benefits-img {
    max-width: 560px;
  }

  .wh-benefits-badges {
    justify-content: center;
  }

  .wh-benefits-accordion .wh-accordion-header {
    padding: 18px 22px;
  }

  .wh-benefits-accordion .wh-accordion-title {
    font-size: 22px;
  }

  .wh-benefits-accordion .wh-accordion-content {
    padding: 18px 22px;
    line-height: 26px;
  }

  .wh-benefits-desc {
    line-height: 26px;
  }
}

@media (max-width: 767px) {
  .wh-benefits-section {
    padding-top: 25px;
    padding-bottom: 20px;
  }

  .wh-benefits-title {
    font-size: 24px;
    line-height: 30px;
  }

  .wh-benefits-desc {
    font-size: 15px;
    line-height: 24px;
  }

  .wh-benefits-accordion .wh-accordion-header {
    padding: 14px 16px;
  }

  .wh-benefits-accordion .wh-accordion-title {
    font-size: 18px;
  }

  .wh-benefits-accordion .wh-accordion-content {
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 24px;
  }

  .wh-benefits-img {
    max-width: 100%;
  }

  .wh-benefits-badges {
    justify-content: center;
    gap: 12px;
  }

  .wh-benefits-badge-img {
    max-height: 55px;
  }
}

/* Philosophy Section Styles */
.wh-philosophy-card {
  text-align: center;
  padding: 20px 15px;
}

.wh-philosophy-card__title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-2xl);
  font-weight: 500;
  text-transform: capitalize;
  line-height: 32px;
  color: var(--wh-white);
  margin-bottom: 12px;
}

.wh-philosophy-card__desc {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: 400;
  line-height: var(--wh-leading-loose);
  color: var(--wh-white);
  margin: 0 auto;
  max-width: 360px;
}

.wh-philosophy-card__desc p {
  margin: 0;
  color: inherit;
  line-height: inherit;
}

/* Stats Section Styles */
.wh-stats-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: left;
}

.wh-stats-icon {
  display: flex;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--wh-white);
  box-shadow: var(--wh-shadow-card);
}

.wh-stats-number {
  font-family: var(--wh-font-primary);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--wh-white);
}

.wh-stats-label {
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 4px;
}

/* ============================================================================
   CTA / GET IN TOUCH BANNER (Matching Reference Site Exactly)
   ============================================================================ */
.wh-cta-section {
  position: relative;
  background-color: var(--wh-white);
  padding: 55px 0;
  overflow: visible;
}

.wh-cta-strip {
  background-color: var(--wh-primary, #009845);
  position: relative;
  width: 100%;
  padding: 24px 0;
  overflow: visible;
}

.wh-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}

/* Hexagon Image with 6-point Polygon */
.wh-cta-hexagon-img {
  width: 230px;
  height: 255px;
  flex-shrink: 0;
  margin-top: -65px;
  margin-bottom: -65px;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
  z-index: 10;
  display: block;
}

.wh-cta-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.wh-cta-title,
.wh-cta-banner__title {
  font-family: var(--wh-font-primary);
  font-size: 26px;
  font-weight: 600;
  color: var(--wh-white);
  line-height: 1.25;
  margin: 0 0 6px 0;
}

.wh-cta-desc,
.wh-cta-banner__desc {
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.5;
  margin: 0;
}

.wh-cta-desc p,
.wh-cta-banner__desc p {
  margin: 0;
  color: inherit;
  line-height: inherit;
}

.wh-cta-action {
  flex-shrink: 0;
}

.wh-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wh-white);
  color: var(--wh-primary, #009845);
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: var(--wh-transition);
  border: 1px solid transparent;
}

.wh-cta-btn:hover {
  background-color: var(--wh-primary-light, #F0FFF7);
  color: var(--wh-primary-dark, #00823b);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ============================================================================
   FAQ ACCORDION SYSTEM (Matching Reference Site Exactly)
   ============================================================================ */
.wh-faq-header {
  margin-bottom: 28px;
  text-align: left;
}

.wh-faq-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--wh-font-primary);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wh-heading);
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.25;
}

.wh-faq-badge {
  background-color: var(--wh-primary, #009845);
  color: var(--wh-white);
  padding: 4px 12px;
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.wh-faq-title__suffix {
  color: #000000;
  font-weight: 700;
}

.wh-faq-divider {
  display: block;
  margin-top: 6px;
  margin-bottom: 0;
}

.wh-faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #dcdcdc;
  background-color: var(--wh-white);
  overflow: hidden;
  box-shadow: none;
  width: 100%;
  margin: 0;
}

.wh-faq-item {
  border-bottom: 1px solid #e8e8e8;
  transition: var(--wh-transition);
}

.wh-faq-item:last-child {
  border-bottom: none;
}

.wh-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: 500;
  color: var(--wh-primary, #009845);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.wh-faq-question:hover {
  color: #007836;
}

.wh-faq-item.is-open .wh-faq-question {
  color: #2da2d8;
}

.wh-faq-question__icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wh-faq-question__text {
  flex-grow: 1;
  line-height: 1.4;
}

.wh-faq-answer {
  background-color: var(--wh-white);
  padding: 0 20px 18px 48px;
  font-family: var(--wh-font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #555555;
  transition: var(--wh-transition);
}

.wh-faq-answer.hidden {
  display: none;
}

.wh-faq-answer__inner {
  padding-top: 4px;
}

.wh-faq-answer__inner p {
  margin-top: 0;
  margin-bottom: 8px;
  line-height: inherit;
  color: inherit;
}

.wh-faq-answer__inner p:last-child {
  margin-bottom: 0;
}

.wh-faq-answer__inner ul,
.wh-faq-answer__inner ol {
  margin-top: 6px;
  margin-bottom: 8px;
  padding-left: 20px;
}

.wh-faq-answer__inner li {
  margin-bottom: 4px;
}

.wh-faq-answer__inner a {
  color: var(--wh-primary);
  text-decoration: underline;
}

/* ============================================================================
   8. FORM ELEMENTS
   ============================================================================ */
.wh-form-group {
  margin-bottom: 16px;
}

.wh-form-control {
  width: 100%;
  font-family: var(--wh-font-primary);
  font-size: 15px;
  padding: 8px 12px;
  border-radius: var(--wh-radius-sm);
  border: 1px solid var(--wh-border);
  color: var(--wh-text-dark);
  background-color: var(--wh-white);
  outline: none;
  transition: var(--wh-transition);
}

.wh-form-control::placeholder {
  color: var(--wh-border);
}

.wh-form-control:focus {
  border-color: var(--wh-primary);
  box-shadow: 0 0 0 2px rgba(0, 152, 69, 0.15);
}

textarea.wh-form-control {
  min-height: 100px;
  resize: vertical;
}

/* ============================================================================
   9. GRID & FLEX UTILITIES
   ============================================================================ */
.wh-grid {
  display: grid;
  gap: var(--wh-gap);
}

.wh-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wh-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wh-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wh-grid-gap-lg {
  gap: var(--wh-gap-lg);
}

.wh-flex {
  display: flex;
}

.wh-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wh-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wh-items-center {
  align-items: center;
}

/* ============================================================================
   10. TOPBAR, HEADER & NAVIGATION
   ============================================================================ */
.wh-topbar {
  background-color: var(--wh-primary);
  color: var(--wh-white);
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  min-height: 40px;
  display: flex;
  align-items: center;
}

.wh-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wh-topbar__contacts {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wh-topbar__divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: var(--wh-white);
}

.wh-topbar__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wh-social-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wh-white);
  border-radius: var(--wh-radius-full);
  color: var(--wh-white);
  font-size: 13px;
  transition: var(--wh-transition);
}

.wh-social-icon:hover {
  background-color: var(--wh-white);
  color: var(--wh-primary);
}

/* Header Navbar */
.wh-header {
  background-color: var(--wh-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 100;
}

.wh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.wh-nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wh-nav-link {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-base);
  font-weight: 400;
  color: var(--wh-heading);
  transition: var(--wh-transition);
}

.wh-nav-link:hover,
.wh-nav-link.active {
  color: var(--wh-primary);
}

/* Header Search Form */
.wh-search-form {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #F1F1F1CC;
  border-radius: var(--wh-radius-full);
  padding: 2px 6px 2px 16px;
  min-height: 40px;
}

.wh-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--wh-font-primary);
  font-size: 14px;
  color: var(--wh-text-muted);
  width: 160px;
  transition: width 0.3s ease;
}

.wh-search-input:focus {
  width: 200px;
}

.wh-search-btn {
  border: none;
  background: transparent;
  color: #7A7A7A;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   11. FEATURES / HIGHLIGHTS OVERHANGING STRIP (Between Hero & About Us)
   ============================================================================ */
.wh-features-section {
  position: relative;
  z-index: 30;
  margin-top: -55px;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
}

.wh-features-bar,
.wh-counter-bar {
  background-color: var(--wh-primary, #009845);
  border-radius: var(--wh-radius-sm, 6px);
  color: var(--wh-white, #ffffff);
  padding: 24px var(--wh-container-pad, 20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
}

.wh-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}

.wh-feature-item,
.wh-counter-item {
  text-align: center;
  padding: 4px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.wh-feature-item:last-child,
.wh-counter-item:last-child {
  border-right: none;
}

.wh-feature-number,
.wh-counter-number {
  font-family: var(--wh-font-primary);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wh-white, #ffffff);
  margin-bottom: 4px;
}

.wh-feature-label,
.wh-counter-title {
  font-family: var(--wh-font-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* ============================================================================
   12. FOOTER STYLING
   ============================================================================ */
.wh-footer {
  background-color: #1a221e;
  background-size: cover;
  background-position: center;
  color: var(--wh-white);
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
}

.wh-footer__title {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-lg);
  font-weight: 700;
  line-height: 25px;
  color: var(--wh-secondary);
  margin-bottom: 20px;
}

.wh-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wh-footer__links li {
  margin-bottom: 6px;
}

.wh-footer__links a {
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-sm);
  font-weight: 500;
  line-height: 30px;
  color: var(--wh-white);
  text-transform: capitalize;
  transition: var(--wh-transition);
}

.wh-footer__links a:hover {
  color: var(--wh-secondary);
  padding-left: 4px;
}

.wh-copyright-bar {
  background-color: var(--wh-white);
  padding: 16px 0;
  font-family: var(--wh-font-primary);
  font-size: var(--wh-text-xs);
  font-weight: 500;
  line-height: 20px;
  color: var(--wh-text-light);
}

/* ============================================================================
   13. PAGE BANNER COMPONENT
   ============================================================================ */
.wh-page-banner {
  width: 100%;
  background-color: var(--wh-primary, #009845);
  text-align: center;
  padding: 42px 15px;
  position: relative;
  height: 220px;
}

.wh-page-banner__inner {
  max-width: var(--wh-container-width, 1200px);
  margin: 0 auto;
}

.wh-page-banner__title {
  font-family: var(--wh-font-primary, 'Roboto', sans-serif);
  font-size: 34px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  text-transform: capitalize;
  padding-top: 50px;
}

.wh-page-banner__breadcrumb {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin: 6px 0 0 0;
}

.wh-page-banner__breadcrumb a {
  color: #ffffff;
  text-decoration: none;
  transition: var(--wh-transition);
}

.wh-page-banner__breadcrumb a:hover {
  text-decoration: underline;
}

.wh-page-banner__breadcrumb .separator {
  margin: 0 5px;
  opacity: 0.85;
}

/* ============================================================================
   14. CONTACT US PAGE (Matching Wilson Herbals Exactly)
   ============================================================================ */
.wh-contact-section {
  padding: 60px 0 70px 0;
  background-color: var(--wh-white, #ffffff);
}

.wh-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.wh-contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.wh-contact-info-card {
  background-color: var(--wh-white, #ffffff);
  border: 1px solid #EAEAEA;
  border-radius: 4px;
  padding: 38px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: var(--wh-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wh-contact-info-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  border-color: #D1D5DB;
}

.wh-contact-info-card.full-width {
  grid-column: 1 / -1;
  padding: 38px 28px;
}

.wh-contact-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--wh-primary, #009845);
}

.wh-contact-info-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.wh-contact-info-icon svg {
  width: 34px;
  height: 34px;
  fill: var(--wh-primary, #009845);
}

.wh-contact-info-title {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--wh-heading, #111827);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.wh-contact-info-text {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 13.5px;
  color: #666666;
  line-height: 1.65;
  margin: 0;
}

.wh-contact-info-text a {
  color: inherit;
  text-decoration: none;
  transition: var(--wh-transition);
}

.wh-contact-info-text a:hover {
  color: var(--wh-primary, #009845);
  text-decoration: underline;
}

/* Contact Form Container & Controls */
.wh-contact-form-card {
  background-color: var(--wh-primary, #009845);
  border-radius: 4px;
  padding: 26px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.wh-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wh-form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wh-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-field-error {
  color: #dc3545 !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 13px;
  line-height: 1.35;
  margin-top: 6px;
  display: block !important;
  width: 100% !important;
  clear: both !important;
  text-align: left;
  font-weight: 400;
}

.wh-form-input.is-invalid,
.wh-form-select.is-invalid,
.wh-form-textarea.is-invalid,
.footer-form-input.is-invalid,
.footer-form-textarea.is-invalid,
.blog-enquiry-input.is-invalid,
.blog-enquiry-textarea.is-invalid,
.product-details-input.is-invalid,
.product-details-select.is-invalid,
.product-details-textarea.is-invalid,
.contact-form-input.is-invalid {
  border-color: #ff3b30 !important;
}

.wh-form-input,
.wh-form-select,
.wh-form-textarea {
  width: 100%;
  background-color: #ffffff;
  color: #1F2937;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 13.5px;
  border-radius: 3px;
  border: 1px solid transparent;
  padding: 10px 14px;
  box-sizing: border-box;
  transition: var(--wh-transition);
}

.wh-form-input::placeholder,
.wh-form-textarea::placeholder {
  color: #757575;
}

.wh-form-select {
  color: #757575;
  appearance: auto;
  cursor: pointer;
}

.wh-form-input:focus,
.wh-form-select:focus,
.wh-form-textarea:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.wh-form-textarea {
  resize: vertical;
  min-height: 105px;
}

/* reCAPTCHA Styling */
.wh-recaptcha-box {
  background-color: #F9F9F9;
  border: 1px solid #D3D3D3;
  border-radius: 3px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 185px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-top: 2px;
}

.wh-recaptcha-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wh-recaptcha-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1A73E8;
}

.wh-recaptcha-label {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 12.5px;
  color: #222222;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.wh-recaptcha-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.wh-recaptcha-icon {
  width: 20px;
  height: 20px;
}

.wh-recaptcha-brand {
  font-size: 7.5px;
  color: #555555;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  margin-top: 2px;
}

.wh-btn-submit {
  align-self: flex-start;
  background-color: var(--wh-accent, #8E1F12);
  color: #ffffff;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 28px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: var(--wh-transition);
  margin-top: 4px;
}

.wh-btn-submit:hover {
  background-color: #74160a;
  color: #ffffff;
  transform: translateY(-1px);
}

.wh-btn-submit.button-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Contact Success / Error Messages */
.contact-message {
  padding: 10px 14px;
  border-radius: 3px;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 13.5px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.contact-success-message {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.contact-error-message {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* Map Section */
.wh-contact-map-section {
  width: 100%;
  display: block;
  margin-top: 0;
  line-height: 0;
}

.wh-contact-map-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-color: #E5E7EB;
}

.wh-contact-map-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================================
   15. SIDEBAR & WIDGET DESIGN SYSTEM
   ============================================================================ */
.wh-sidebar-widget {
  margin-bottom: 24px;
}

.wh-sidebar-title {
  background-color: var(--wh-primary, #009845);
  color: #ffffff;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 3px 3px 0 0;
  margin: 0;
  line-height: 1.3;
}

.wh-sidebar-content {
  border: 1px solid #E5E7EB;
  border-top: none;
  background-color: #ffffff;
  padding: 18px 20px;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  margin: 0;
}

/* ============================================================================
   16. BLOG LISTING & CARDS
   ============================================================================ */
.blog-card {
  background-color: #ffffff;
  border: 1px solid #EAEAEA;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: var(--wh-transition);
}

.blog-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: #D1D5DB;
}

.blog-card__title {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 14px 0;
  line-height: 1.35;
}

.blog-card__excerpt {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 14px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0 0 18px 0;
  flex: 1 1 auto;
}

.blog-card__link {
  align-self: center;
  background-color: var(--wh-primary, #009845) !important;
  color: #ffffff !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: var(--wh-transition);
  margin-top: auto;
  border: none !important;
}

.blog-card__link:hover {
  background-color: var(--wh-primary-dark, #007d39) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ============================================================================
   16.1 PRODUCT LISTINGS & CARDS
   ============================================================================ */
.product-card {
  box-shadow: -1px 1px 4px 4px #0000000D;
  background: #fff;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-color: #D1D5DB;
}

.product-card__title {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #1F2937;
  line-height: 1.35;
  transition: var(--wh-transition);
}

.product-card__title:hover {
  color: var(--wh-primary, #009845);
}

.product-card__btn {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  background-color: var(--wh-accent, #8E1F12) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 6px 18px !important;
  transition: var(--wh-transition);
  display: inline-block;
  text-decoration: none !important;
  border: none !important;
}

.product-card__btn:hover {
  background-color: var(--wh-accent-hover, #AC2A19) !important;
  color: #ffffff !important;
}

/* ============================================================================
   17. ABOUT US PAGE DESIGN SYSTEM
   ============================================================================ */
.wh-about-section {
  padding: 60px 0;
  width: 100%;
}

.wh-about-section--tinted {
  background-color: #E2F2E7;
}

.wh-about-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 45px;
  text-align: center;
}

.wh-about-header__wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wh-about-header__badge {
  background-color: var(--wh-primary, #009845);
  color: #ffffff;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wh-about-header__title {
  color: var(--wh-heading, #111827);
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.wh-about-header__divider {
  margin-top: 10px;
  width: 90px;
  height: 2px;
  border-bottom: 2px dashed var(--wh-primary, #009845);
}

.wh-about-intro {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 15px;
  line-height: 1.8;
  color: #555555;
  margin-bottom: 35px;
  text-align: justify;
}

.wh-about-text {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 15px;
  line-height: 1.8;
  color: #555555;
}

.wh-about-text p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: inherit;
  color: inherit;
}

.wh-about-text p:last-child {
  margin-bottom: 0;
}

.wh-about-text--center {
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.wh-about-subheading {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--wh-heading, #111827);
  margin-top: 24px;
  margin-bottom: 16px;
}

.wh-about-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
}

.wh-about-grid-2--start {
  align-items: flex-start;
}

.wh-about-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.wh-about-glimpse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 30px;
  max-width: 1140px;
  margin: 0 auto;
}

.wh-about-glimpse-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wh-about-glimpse-card:hover {
  transform: translateY(-6px);
}

/* Green cylinder base behind/underneath */
.wh-about-glimpse-card__base {
  position: absolute;
  top: 10px;
  bottom: -12px;
  left: 0;
  right: 0;
  background-color: var(--wh-primary, #009845);
  border-radius: 50% 50% 50% 50% / 28px 28px 28px 28px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  z-index: 1;
  transition: all 0.3s ease;
}

.wh-about-glimpse-card:hover .wh-about-glimpse-card__base {
  bottom: -16px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}

/* White cylinder card */
.wh-about-glimpse-card__inner {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  border-radius: 50% 50% 50% 50% / 28px 28px 28px 28px;
  padding: 42px 24px 38px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 195px;
}

.wh-about-glimpse-card__icon {
  width: 32px;
  height: 32px;
  color: var(--wh-primary, #009845);
  fill: currentColor;
  object-fit: contain;
  margin: 0 auto 12px;
  display: block;
}

.wh-about-glimpse-card__title {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-top: 0;
  margin-bottom: 4px;
  line-height: 1.35;
}

.wh-about-glimpse-card__desc {
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wh-primary, #009845);
  line-height: 1.4;
  margin: 0;
}

.wh-about-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wh-about-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #E5E7EB;
  color: var(--wh-primary, #009845);
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 14.5px;
  font-weight: 500;
}

.wh-about-list-item:last-child {
  border-bottom: none;
}

.wh-about-list-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 3;
  color: var(--wh-primary, #009845);
}

@media (max-width: 1024px) {
  .wh-about-grid-2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .wh-about-glimpse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .wh-about-glimpse-grid {
    grid-template-columns: 1fr;
  }

  .wh-about-header__title {
    font-size: 20px;
  }
}

/* ============================================================================
   14. RESPONSIVE BREAKPOINTS
   ============================================================================ */
/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --wh-section-py: 45px;
  }

  .wh-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wh-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wh-features-section {
    margin-top: -45px;
  }

  .wh-features-bar,
  .wh-counter-bar {
    padding: 20px 16px;
    margin-top: 0;
  }

  .wh-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }

  .wh-feature-item:nth-child(2n),
  .wh-counter-item:nth-child(2n) {
    border-right: none;
  }

  .wh-feature-item:nth-child(1),
  .wh-feature-item:nth-child(2),
  .wh-counter-item:nth-child(1),
  .wh-counter-item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 12px;
  }

  .wh-feature-number,
  .wh-counter-number {
    font-size: 32px;
  }

  .wh-feature-label,
  .wh-counter-title {
    font-size: 14px;
  }

  .wh-accordion-header {
    padding: 18px 20px;
  }

  .wh-accordion-title {
    font-size: 20px;
  }

  .wh-testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .wh-testimonial-item {
    border: 1px solid #eaeaea;
    border-radius: var(--wh-radius-sm, 4px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .wh-testimonial-item:last-child {
    border-right: 1px solid #eaeaea;
  }

  .wh-testimonial-item__footer {
    border-right: none;
  }

  .wh-cta-row {
    gap: 20px;
  }

  .wh-cta-hexagon-img {
    width: 180px;
    height: 200px;
    margin-top: -48px;
    margin-bottom: -48px;
  }

  .wh-cta-title {
    font-size: 22px;
  }

  .wh-cta-desc {
    font-size: 14px;
  }

  .wh-contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  :root {
    --wh-section-py: var(--wh-section-py-mobile);
    --wh-text-4xl: 28px;
    --wh-text-3xl: 24px;
    --wh-text-2xl: 20px;
    --wh-text-xl: 18px;
  }

  .wh-grid-2,
  .wh-grid-3,
  .wh-grid-4 {
    grid-template-columns: 1fr;
  }

  /* Keep 2 columns for categories on mobile as on reference site */
  .wh-grid-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  .wh-features-section {
    margin-top: -35px;
  }

  .wh-features-bar,
  .wh-counter-bar {
    padding: 16px 12px;
    margin-top: 0;
  }

  .wh-features-grid,
  .wh-counter-bar .wh-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }

  .wh-feature-item,
  .wh-counter-item {
    padding: 4px 6px;
  }

  .wh-feature-item:nth-child(2n),
  .wh-counter-item:nth-child(2n) {
    border-right: none;
  }

  .wh-feature-item:nth-child(1),
  .wh-feature-item:nth-child(2),
  .wh-counter-item:nth-child(1),
  .wh-counter-item:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding-bottom: 10px;
  }

  .wh-feature-number,
  .wh-counter-number {
    font-size: 26px;
  }

  .wh-feature-label,
  .wh-counter-title {
    font-size: 13px;
    line-height: 1.25;
  }

  .wh-section-header {
    margin-bottom: 24px;
  }

  .wh-section-desc {
    font-size: 15px;
    line-height: 1.5;
  }

  .wh-btn {
    padding: 8px 25px;
    width: 100%;
  }

  .wh-topbar {
    display: none;
  }

  .wh-accordion-header {
    padding: 15px;
  }

  .wh-accordion-title {
    font-size: 18px;
  }

  .wh-accordion-content {
    padding: 16px;
    font-size: 15px;
  }

  .wh-feature-card {
    padding: 16px;
  }

  .wh-apart-card {
    padding: 20px 18px;
    gap: 16px;
    border-radius: 14px;
  }

  .wh-apart-card__title {
    font-size: 18px;
  }

  .wh-apart-card__desc {
    font-size: 13.5px;
  }

  .wh-testimonial-item__body {
    padding: 24px 20px 20px 20px;
  }

  .wh-testimonial-item__footer {
    padding: 14px 20px;
  }

  .wh-faq-title {
    font-size: 18px;
    gap: 6px;
  }

  .wh-faq-badge {
    padding: 3px 8px;
    font-size: 15px;
  }

  .wh-faq-title__suffix {
    font-size: 15px;
  }

  .wh-faq-question {
    padding: 12px 14px;
    font-size: 14px;
    gap: 10px;
  }

  .wh-faq-answer {
    padding: 0 14px 14px 14px;
    font-size: 13.5px;
  }

  .wh-mission-card {
    padding: 25px 16px;
  }

  /* .wh-section-badge,
  .section-title-prefix {
    font-size: var(--wh-text-sm);
    padding: 3px 8px;
  } */

  .wh-cta-section {
    padding: 35px 0;
  }

  .wh-cta-strip {
    padding: 35px 0 25px 0;
    margin-top: 30px;
  }

  .wh-cta-row {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .wh-cta-hexagon-img {
    width: 155px;
    height: 175px;
    margin-top: -75px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .wh-cta-content {
    text-align: center;
  }

  .wh-cta-title {
    font-size: 20px;
  }

  .wh-cta-desc {
    font-size: 14px;
  }

  .wh-cta-action {
    width: 100%;
    margin-top: 4px;
  }

  .wh-cta-btn {
    width: 100%;
    padding: 10px 20px;
  }

  .wh-contact-section {
    padding: 35px 0;
  }

  .wh-contact-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wh-form-row-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .wh-contact-form-card {
    padding: 22px 16px;
  }

  .wh-btn-submit {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .wh-contact-map-wrap {
    height: 320px;
  }
}

/* ============================================================================
   18. FOOTER DESIGN SYSTEM & HIGH CONTRAST
   ============================================================================ */
.site-footer {
  position: relative;
  background-color: var(--wh-footer-bg, #121815);
  color: var(--wh-footer-text, #E5E7EB);
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.site-footer__main {
  position: relative;
  z-index: 2;
}

.site-footer .widget {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 30px;
}

.site-footer .widget__header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 20px !important;
  position: relative;
}

.site-footer .widget__title {
  color: var(--wh-footer-heading, #FFFFFF) !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  margin: 0 !important;
  display: inline-block;
  line-height: 1.3;
}

.site-footer .widget--transparent .widget__header:after,
.site-footer .widget__header:after {
  background-color: var(--wh-primary, #009845) !important;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 100%;
  width: 35px;
  z-index: 10;
}

.site-footer .widget__content {
  padding: 0 !important;
  color: var(--wh-footer-text, #E5E7EB) !important;
}

.site-footer .widget__content p,
.site-footer .widget__about p,
.site-footer .widget__content div,
.site-footer p {
  color: var(--wh-footer-text, #E5E7EB) !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  margin-bottom: 10px;
}

.site-footer .widget__content strong,
.site-footer .widget__content b,
.site-footer .widget__about strong,
.site-footer .widget__about b,
.site-footer strong,
.site-footer b {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.site-footer a,
.site-footer .widget__content a,
.site-footer .list li a {
  color: var(--wh-footer-link, #E5E7EB) !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px;
  transition: var(--wh-transition);
}

.site-footer a:hover,
.site-footer .widget__content a:hover,
.site-footer .list li a:hover {
  color: var(--wh-primary, #009845) !important;
}

.site-footer .list li {
  margin-bottom: 8px;
  color: var(--wh-footer-text, #E5E7EB);
  font-family: var(--wh-font-primary, 'Outfit', sans-serif);
  font-size: 14px;
}

.site-footer .list--fadeIn li:before,
.site-footer .list--dot li:before {
  background-color: var(--wh-primary, #009845);
}

/* ============================================================================
   19. FOOTER ENQUIRY FORM DESIGN SYSTEM
   ============================================================================ */
.footer-enquiry-wrap {
  width: 100%;
}

.footer-enquiry-title {
  color: var(--wh-footer-enquiry-heading, #22C55E) !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 14px 0 !important;
  display: block;
}

.footer-enquiry-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.footer-enquiry-form .footer-form-group {
  margin-bottom: var(--wh-footer-form-gap, 10px);
  width: 100%;
}

.footer-enquiry-form .footer-form-input {
  width: 100% !important;
  height: var(--wh-footer-form-input-height, 40px) !important;
  background-color: var(--wh-footer-form-input-bg, #FFFFFF) !important;
  color: var(--wh-footer-form-input-color, #333333) !important;
  border: 1px solid var(--wh-footer-form-border, #FFFFFF) !important;
  border-radius: var(--wh-footer-form-radius, 4px) !important;
  padding: 0 14px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: var(--wh-footer-form-input-height, 40px) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-enquiry-form .footer-form-input::placeholder {
  color: var(--wh-footer-form-placeholder-color, #6B7280) !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  opacity: 1;
}

.footer-enquiry-form .footer-form-input:focus {
  border-color: var(--wh-footer-form-border-focus, #22C55E) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
}

.footer-enquiry-form .footer-form-textarea {
  width: 100% !important;
  min-height: 85px !important;
  height: 85px !important;
  background-color: var(--wh-footer-form-input-bg, #FFFFFF) !important;
  color: var(--wh-footer-form-input-color, #333333) !important;
  border: 1px solid var(--wh-footer-form-border, #FFFFFF) !important;
  border-radius: var(--wh-footer-form-radius, 4px) !important;
  padding: 10px 14px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  outline: none !important;
  resize: vertical;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-enquiry-form .footer-form-textarea::placeholder {
  color: var(--wh-footer-form-placeholder-color, #6B7280) !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  opacity: 1;
}

.footer-enquiry-form .footer-form-textarea:focus {
  border-color: var(--wh-footer-form-border-focus, #22C55E) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
}

.footer-enquiry-form .footer-captcha-wrapper {
  margin-top: 2px;
  margin-bottom: var(--wh-footer-form-gap, 10px);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.footer-enquiry-form .footer-captcha-wrapper iframe {
  max-width: 100%;
}

.footer-enquiry-form .footer-enquiry-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 110px;
  height: 38px;
  background-color: var(--wh-footer-btn-bg, #22994D) !important;
  color: #FFFFFF !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--wh-footer-btn-radius, 4px) !important;
  padding: 0 24px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0.2px;
}

.footer-enquiry-form .footer-enquiry-submit:hover {
  background-color: var(--wh-footer-btn-hover, #1B7A3D) !important;
  color: #FFFFFF !important;
}

.footer-enquiry-form .footer-enquiry-submit.button-loading {
  opacity: 0.75;
  cursor: not-allowed !important;
}

.footer-enquiry-form .contact-message {
  padding: 8px 12px;
  border-radius: var(--wh-footer-form-radius, 4px);
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.footer-enquiry-form .contact-success-message {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.footer-enquiry-form .contact-error-message {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

@media (max-width: 380px) {
  .footer-enquiry-form .footer-captcha-wrapper .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

/* ============================================================================
   20. PRODUCT DETAILS SIDEBAR CONTACT FORM DESIGN SYSTEM
   ============================================================================ */
.wh-product-sidebar-widget {
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}

.wh-product-sidebar-title {
  background-color: var(--wh-primary, #009845) !important;
  color: #ffffff !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  border-radius: 3px 3px 0 0 !important;
  text-align: center !important;
}

.wh-product-sidebar-form {
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-top: none;
  padding: 18px 18px 22px 18px;
  border-radius: 0 0 3px 3px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wh-product-sidebar-form .wh-sidebar-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wh-product-sidebar-form .wh-sidebar-input {
  width: 100% !important;
  height: 38px !important;
  background-color: #ffffff !important;
  border: 1px solid #6B7280 !important;
  border-radius: 3px !important;
  padding: 0 12px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  color: #333333 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wh-product-sidebar-form .wh-sidebar-input::placeholder {
  color: #6B7280 !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  opacity: 1;
}

.wh-product-sidebar-form .wh-sidebar-input:focus {
  border-color: var(--wh-primary, #009845) !important;
  box-shadow: 0 0 0 1px var(--wh-primary, #009845) !important;
}

.wh-product-sidebar-form .wh-sidebar-select {
  width: 100% !important;
  height: 38px !important;
  background-color: #ffffff !important;
  border: 1px solid #6B7280 !important;
  border-radius: 3px !important;
  padding: 0 12px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  color: #333333 !important;
  outline: none !important;
  box-sizing: border-box !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23333333' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wh-product-sidebar-form .wh-sidebar-select:focus {
  border-color: var(--wh-primary, #009845) !important;
  box-shadow: 0 0 0 1px var(--wh-primary, #009845) !important;
}

.wh-product-sidebar-form .wh-sidebar-textarea {
  width: 100% !important;
  height: 105px !important;
  min-height: 80px !important;
  background-color: #ffffff !important;
  border: 1px solid #6B7280 !important;
  border-radius: 3px !important;
  padding: 10px 12px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  color: #333333 !important;
  outline: none !important;
  resize: vertical;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wh-product-sidebar-form .wh-sidebar-textarea::placeholder {
  color: #6B7280 !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  opacity: 1;
}

.wh-product-sidebar-form .wh-sidebar-textarea:focus {
  border-color: var(--wh-primary, #009845) !important;
  box-shadow: 0 0 0 1px var(--wh-primary, #009845) !important;
}

.wh-product-sidebar-form .wh-sidebar-captcha {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 2px 0;
}

.wh-product-sidebar-form .wh-sidebar-captcha iframe {
  max-width: 100%;
}

.wh-product-sidebar-form .wh-sidebar-submit-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 70px;
  height: 32px;
  background-color: transparent !important;
  border: 1.5px solid #C0264A !important;
  color: #C0264A !important;
  border-radius: 3px !important;
  padding: 0 18px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

.wh-product-sidebar-form .wh-sidebar-submit-btn:hover {
  background-color: #C0264A !important;
  color: #ffffff !important;
}

.wh-product-sidebar-form .wh-sidebar-submit-btn.button-loading {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.wh-product-sidebar-form .contact-message {
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.wh-product-sidebar-form .contact-success-message {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.wh-product-sidebar-form .contact-error-message {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

@media (max-width: 380px) {
  .wh-product-sidebar-form .wh-sidebar-row-2 {
    grid-template-columns: 1fr;
  }

  .wh-product-sidebar-form .wh-sidebar-captcha .g-recaptcha {
    transform: scale(0.82);
    transform-origin: 0 0;
  }
}

/* ============================================================================
   21. SIDEBAR ENQUIRY FORM (BLOGS & PAGES) DESIGN SYSTEM
   ============================================================================ */
.wh-sidebar-enquiry-widget {
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}

.wh-sidebar-enquiry-title {
  background-color: var(--wh-primary, #009845) !important;
  color: #ffffff !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  border-radius: 3px 3px 0 0 !important;
  text-align: center !important;
}

.wh-sidebar-enquiry-form {
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-top: none;
  padding: 18px 18px 22px 18px;
  border-radius: 0 0 3px 3px;
  display: flex;
  flex-direction: column;
}

.wh-sidebar-enquiry-form .footer-form-group {
  margin-bottom: 10px;
  width: 100%;
}

.wh-sidebar-enquiry-form .footer-form-input {
  width: 100% !important;
  height: 40px !important;
  background-color: #FFFFFF !important;
  color: #333333 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wh-sidebar-enquiry-form .footer-form-input::placeholder {
  color: #6B7280 !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  opacity: 1;
}

.wh-sidebar-enquiry-form .footer-form-input:focus {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
}

.wh-sidebar-enquiry-form .footer-form-textarea {
  width: 100% !important;
  min-height: 85px !important;
  height: 85px !important;
  background-color: #FFFFFF !important;
  color: #333333 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  outline: none !important;
  resize: vertical;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wh-sidebar-enquiry-form .footer-form-textarea::placeholder {
  color: #6B7280 !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
  opacity: 1;
}

.wh-sidebar-enquiry-form .footer-form-textarea:focus {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
}

.wh-sidebar-enquiry-form .footer-captcha-wrapper {
  margin-top: 2px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.wh-sidebar-enquiry-form .footer-captcha-wrapper iframe {
  max-width: 100%;
}

.wh-sidebar-enquiry-form .footer-enquiry-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 110px;
  height: 38px;
  background-color: #22994D !important;
  color: #FFFFFF !important;
  font-family: var(--wh-font-primary, 'Outfit', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 24px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.wh-sidebar-enquiry-form .footer-enquiry-submit:hover {
  background-color: #1B7A3D !important;
}

.wh-sidebar-enquiry-form .footer-enquiry-submit.button-loading {
  opacity: 0.75;
  cursor: not-allowed !important;
}

.wh-sidebar-enquiry-form .contact-message {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.wh-sidebar-enquiry-form .contact-success-message {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.wh-sidebar-enquiry-form .contact-error-message {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

@media (max-width: 380px) {
  .wh-sidebar-enquiry-form .footer-captcha-wrapper .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}