/**
  * UPDATE THESE VARIABLES 
  */
.localized-service {
  --color-primary: #505050;
  --color-on-primary: white;
  --color-secondary: var(--secondary);
  --color-on-secondary: white;

  --color-primary-low: oklch(from var(--color-primary) calc(l - 0.15) c h);
  --color-primary-lowest: oklch(from var(--color-primary) calc(l - 0.3) calc(c - 0.01) h);
  --color-primary-high: oklch(from var(--color-primary) l calc(c + 0.03) h);
  --color-primary-highest: oklch(from var(--color-primary) l calc(c + 0.06) h);
  --color-secondary-low: oklch(from var(--color-secondary) calc(l - 0.05) c h);
  --color-secondary-lowest: oklch(from var(--color-secondary) calc(l - 0.1) c h);
  --color-secondary-high: oklch(from var(--color-secondary) l c h);
  --color-secondary-highest: oklch(from var(--color-secondary) l c h);

  --button-background: var(--primary);
  --button-text: black;
  --button-icon-background: var(--primary);
  --button-icon-color: var(--primary);

  --border-color: var(--primary);

  --header-height: 200px; /* Only set this if the title section needs to go under the header */
  --header-top-space: 50px;

  --font-heading: var(--font);
  --font-body: var(--font);
}

@media (width >= 1024px) {
  .localized-service {
    --header-top-space: 200px;
  }
}