/* Uses the 12 native color variables and 2 native font variables in the active Elementor kit. */

/* conforma-esg-design-tokens:start */
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --type-16: 16px;
  --type-18: 18px;
  --type-20: 20px;
  --type-24: 24px;
  --type-32: 32px;
  --type-48: 48px;
  --type-64: 64px;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-heading: 1.2;
  --leading-body: 1.4;
  --tracking-heading: -0.02em;
  --container-max: 1312px;
  --border-width: 1px;
  --radius-button: 12px;
}
/* conforma-esg-design-tokens:end */

/* conforma-esg-utility-classes:start */
.heading-xl {
  font-family: var(--font-heading);
  font-size: var(--type-64);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin-bottom: var(--space-16);
}

.heading-l {
  font-family: var(--font-heading);
  font-size: var(--type-48);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin-bottom: var(--space-16);
}

.heading-m {
  font-family: var(--font-heading);
  font-size: var(--type-32);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin-bottom: var(--space-16);
}

.body {
  font-family: var(--font-body);
  font-size: var(--type-20);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}

.esg-btn-primary:hover {
  color: var(--color-surface); background-color: var(--color-brand-hover); border-color: var(--color-brand-hover);
}

.esg-btn-primary:focus-visible {
  outline: var(--space-4) solid var(--color-brand-hover); outline-offset: var(--space-4);
}

.esg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--type-16);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border-width: var(--border-width);
  border-style: solid;
  border-radius: var(--radius-button);
  color: var(--color-surface);
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.esg-btn-secondary:hover {
  color: var(--color-brand-hover); background-color: var(--color-surface-muted); border-color: var(--color-brand-hover);
}

.esg-btn-secondary:focus-visible {
  outline: var(--space-4) solid var(--color-brand-hover); outline-offset: var(--space-4);
}

.esg-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--type-16);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border-width: var(--border-width);
  border-style: solid;
  border-radius: var(--radius-button);
  color: var(--color-brand);
  background-color: var(--color-surface);
  border-color: var(--color-brand);
}

.section {
  padding-block: var(--space-64);
}

.esg-container {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

@media (max-width: 767px) {
  .heading-xl {
    font-size: var(--type-48);
  }

  .heading-l {
    font-size: var(--type-32);
  }

  .heading-m {
    font-size: var(--type-24);
  }

  .body {
    font-size: var(--type-18);
  }

  .section {
    padding-block: var(--space-48);
  }

  .esg-container {
    padding-inline: var(--space-16);
  }
}
/* conforma-esg-utility-classes:end */