/* Figma Styles of your File */
:root {
  /* Colors */
  /* Fonts */
  --title-hero-font-family: PlayfairDisplay-Medium, sans-serif;
  --title-hero-font-size: 84px;
  --title-hero-line-height: 80px;
  --title-hero-font-weight: 500;
  --title-hero-font-style: normal;
  --subtitle-font-family: Lato-Regular, sans-serif;
  --subtitle-font-size: 26px;
  --subtitle-line-height: 26px;
  --subtitle-font-weight: 400;
  --subtitle-font-style: normal;
  --title-page-font-family: PlayfairDisplay-Bold, sans-serif;
  --title-page-font-size: 44px;
  --title-page-line-height: 44px;
  --title-page-font-weight: 700;
  --title-page-font-style: normal;
  --heading-font-family: Lato-Bold, sans-serif;
  --heading-font-size: 24px;
  --heading-line-height: 20px;
  --heading-font-weight: 700;
  --heading-font-style: normal;
  --subheading-font-family: Lato-Light, sans-serif;
  --subheading-font-size: 20px;
  --subheading-line-height: 18px;
  --subheading-font-weight: 300;
  --subheading-font-style: normal;
  --body-base-font-family: Lato-Regular, sans-serif;
  --body-base-font-size: 14px;
  --body-base-line-height: 16px;
  --body-base-font-weight: 400;
  --body-base-font-style: normal;

  /* Effects */
  --menu-button-hover-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25),
    -2px -4px 10px 0px rgba(255, 255, 255, 0.25);
  --active-2px-focused-box-shadow: 0px 0px 0px 2px rgba(100, 116, 139, 0.3);
  --box-shadow-small-box-shadow: 0px 1px 2px 0px rgba(59, 130, 246, 0.08),
    0px 1px 4px 0px rgba(59, 130, 246, 0.12);
  --box-shadow-middle-box-shadow: 0px 2px 8px 0px rgba(59, 130, 246, 0.1),
    0px 6px 16px 0px rgba(59, 130, 246, 0.12),
    0px 12px 32px 0px rgba(59, 130, 246, 0.08);
  --box-shadow-large-box-shadow: 0px 4px 12px 0px rgba(59, 130, 246, 0.08),
    0px 12px 32px 0px rgba(59, 130, 246, 0.12),
    0px 24px 64px 0px rgba(59, 130, 246, 0.16);
}
/* Figma Color Variables of your File */
:root,
[data-collection-1-mode="mode-1"] {
  /* mode-1 */
  --colors-1-general-color-bg-layoutlight: #f8fafc;
  --colors-1-general-color-bg-panelslight: var(
    --colors-3-neutral-solor-neutral-01
  );
  --colors-1-general-color-font-baselight: #334155;
  --colors-1-general-color-font-secondarylight: #64748b;
  --colors-1-general-color-dividerlight: #e2e8f0;
  --colors-1-general-color-input-bglight: #f1f5f9;
  --colors-2-accent-color-primarylight: #3b82f6;
  --colors-2-accent-color-primary-hoverlight: #2563eb;
  --colors-2-accent-color-state-successlight: #10b981;
  --colors-2-accent-color-state-errorlight: #ef4444;
  --colors-2-accent-color-state-warninglight: #f59e0b;
  --colors-1-general-color-font-disabledlight: #c1c7d1;
  --colors-1-general-color-input-disabledlight: #f8fafc;
  --colors-1-general-color-item-selectedlight: #dbeafe;
  --colors-3-neutral-solor-neutral-01: #ffffff;
  --colors-2-accent-color-primary-activelight: #1d4ed8;
  --colors-2-accent-color-state-error-hoverlight: #dc2626;
  --colors-3-neutral-color-neutral-02: #eaf0f6;
  --colors-1-general-color-font-secondarylight-85: rgba(100, 116, 139, 0.85);
}