/** GLOBAL STYLE **/

:root {
    /* Font Sizes */
    --sud-font-size-p: 16px;

    --sud-font-size-h1: 42px;
    --sud-font-size-h2: 36px;
    --sud-font-size-h3: 30px;
    --sud-font-size-h4: 24px;
    --sud-font-size-h5: 20px;
    --sud-font-size-h6: 18px;


    /* Line Heights */
    --sud-line-height-p: 1.8;

    --sud-line-height-h1: 1.2;
    --sud-line-height-h2: 1.25;
    --sud-line-height-h3: 1.3;
    --sud-line-height-h4: 1.35;
    --sud-line-height-h5: 1.4;
    --sud-line-height-h6: 1.45;


    /* Font Weight */
    --sud-font-weight-p: 400;

    --sud-font-weight-h1: 700;
    --sud-font-weight-h2: 700;
    --sud-font-weight-h3: 700;
    --sud-font-weight-h4: 600;
    --sud-font-weight-h5: 600;
    --sud-font-weight-h6: 600;


    /* Margin Bottom */
    --sud-margin-p: 16px;

    --sud-margin-h1: 24px;
    --sud-margin-h2: 22px;
    --sud-margin-h3: 20px;
    --sud-margin-h4: 18px;
    --sud-margin-h5: 16px;
    --sud-margin-h6: 14px;


    /* Letter Spacing */
    --sud-letter-spacing-heading: -0.02em;
    --sud-letter-spacing-p: 0;
}


/* Mobile */
@media (max-width: 767px) {

    :root {

        /* Font Sizes */
        --sud-font-size-p: 14px;

        --sud-font-size-h1: 32px;
        --sud-font-size-h2: 28px;
        --sud-font-size-h3: 24px;
        --sud-font-size-h4: 20px;
        --sud-font-size-h5: 18px;
        --sud-font-size-h6: 16px;


        /* Line Heights */
        --sud-line-height-p: 1.7;

        --sud-line-height-h1: 1.25;
        --sud-line-height-h2: 1.3;
        --sud-line-height-h3: 1.35;
        --sud-line-height-h4: 1.4;
        --sud-line-height-h5: 1.45;
        --sud-line-height-h6: 1.5;


        /* Margins */
        --sud-margin-p: 14px;

        --sud-margin-h1: 20px;
        --sud-margin-h2: 18px;
        --sud-margin-h3: 16px;
        --sud-margin-h4: 14px;
        --sud-margin-h5: 12px;
        --sud-margin-h6: 10px;
    }
}


/* Typography Classes */

.sud-p {
    font-size: var(--sud-font-size-p);
    line-height: var(--sud-line-height-p);
    font-weight: var(--sud-font-weight-p);
    letter-spacing: var(--sud-letter-spacing-p);
    margin-bottom: var(--sud-margin-p);
}


.sud-h1 {
    font-size: var(--sud-font-size-h1);
    line-height: var(--sud-line-height-h1);
    font-weight: var(--sud-font-weight-h1);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h1);
}


.sud-h2 {
    font-size: var(--sud-font-size-h2);
    line-height: var(--sud-line-height-h2);
    font-weight: var(--sud-font-weight-h2);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h2);
}


.sud-h3 {
    font-size: var(--sud-font-size-h3);
    line-height: var(--sud-line-height-h3);
    font-weight: var(--sud-font-weight-h3);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h3);
}


.sud-h4 {
    font-size: var(--sud-font-size-h4);
    line-height: var(--sud-line-height-h4);
    font-weight: var(--sud-font-weight-h4);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h4);
}


.sud-h5 {
    font-size: var(--sud-font-size-h5);
    line-height: var(--sud-line-height-h5);
    font-weight: var(--sud-font-weight-h5);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h5);
}


.sud-h6 {
    font-size: var(--sud-font-size-h6);
    line-height: var(--sud-line-height-h6);
    font-weight: var(--sud-font-weight-h6);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h6);
}

/* Content Typography */

.sud-content p {
    font-size: var(--sud-font-size-p);
    line-height: var(--sud-line-height-p);
    font-weight: var(--sud-font-weight-p);
    letter-spacing: var(--sud-letter-spacing-p);
    margin-bottom: var(--sud-margin-p);
}


.sud-content h1 {
    font-size: var(--sud-font-size-h1);
    line-height: var(--sud-line-height-h1);
    font-weight: var(--sud-font-weight-h1);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h1);
}


.sud-content h2 {
    font-size: var(--sud-font-size-h2);
    line-height: var(--sud-line-height-h2);
    font-weight: var(--sud-font-weight-h2);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h2);
}


.sud-content h3 {
    font-size: var(--sud-font-size-h3);
    line-height: var(--sud-line-height-h3);
    font-weight: var(--sud-font-weight-h3);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h3);
}


.sud-content h4 {
    font-size: var(--sud-font-size-h4);
    line-height: var(--sud-line-height-h4);
    font-weight: var(--sud-font-weight-h4);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h4);
}


.sud-content h5 {
    font-size: var(--sud-font-size-h5);
    line-height: var(--sud-line-height-h5);
    font-weight: var(--sud-font-weight-h5);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h5);
}


.sud-content h6 {
    font-size: var(--sud-font-size-h6);
    line-height: var(--sud-line-height-h6);
    font-weight: var(--sud-font-weight-h6);
    letter-spacing: var(--sud-letter-spacing-heading);
    margin-bottom: var(--sud-margin-h6);
}




/* ==========================================================================
   Design Tokens
   Source: Figma — 01.Color / 02.Typography / 03.Spacing / 04.Radius / 05.Shadow
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. COLOR — primitives
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --palette-brand-primary:   #08A45D;
  --palette-brand-hover:     #078A4E;
  --palette-brand-pressed:   #06733F;
  --palette-brand-light:     #E8F7F0;
  --palette-brand-disabled:  #A7D8C1;

  /* Neutral */
  --palette-neutral-100: #FFFFFF;
  --palette-neutral-200: #F9FAFB;
  --palette-neutral-300: #F2F4F7;
  --palette-neutral-400: #EAECF0;
  --palette-neutral-500: #D0D5DD;
  --palette-neutral-600: #98A2B3;
  --palette-neutral-700: #667085;
  --palette-neutral-800: #475467;
  --palette-neutral-900: #182230;

  /* Status */
  --palette-success-main:  #08A45D;
  --palette-success-hover: #078A4E;
  --palette-success-fill:  #F0FAF5;

  --palette-error-main:  #D92D20;
  --palette-error-hover: #B42318;
  --palette-error-fill:  #FEF3F2;

  --palette-info-main:  #0075FF;
  --palette-info-hover: #0C64DF;
  --palette-info-fill:  #EFF8FF;

  --palette-warning-main:  #DC6803;
  --palette-warning-hover: #B54708;
  --palette-warning-fill:  #FFFAEB;
}

/* 01. COLOR — semantic (reference the primitives above) */
:root {
  /* Brand */
  --color-brand-primary:  var(--palette-brand-primary);
  --color-brand-hovered:  var(--palette-brand-hover);
  --color-brand-pressed:  var(--palette-brand-pressed);
  --color-brand-light:    var(--palette-brand-light);
  --color-brand-disabled: var(--palette-brand-disabled);

  /* Text */
  --color-text-primary:   var(--palette-neutral-900);
  --color-text-secondary: var(--palette-neutral-800);
  --color-text-tertiary:  var(--palette-neutral-700);
  --color-text-input:     var(--palette-neutral-800);
  --color-text-disable:   var(--palette-neutral-600);
  --color-text-on-dark:   var(--palette-neutral-100);

  /* Neutral */
  --color-neutral-100: var(--palette-neutral-100);
  --color-neutral-200: var(--palette-neutral-200);
  --color-neutral-300: var(--palette-neutral-300);
  --color-neutral-400: var(--palette-neutral-400);
  --color-neutral-500: var(--palette-neutral-500);
  --color-neutral-600: var(--palette-neutral-600);
  --color-neutral-700: var(--palette-neutral-700);
  --color-neutral-800: var(--palette-neutral-800);
  --color-neutral-900: var(--palette-neutral-900);

  /* Status */
  --color-success-main:  var(--palette-success-main);
  --color-success-hover: var(--palette-success-hover);
  --color-success-fill:  var(--palette-success-fill);

  --color-error-main:  var(--palette-error-main);
  --color-error-hover: var(--palette-error-hover);
  --color-error-fill:  var(--palette-error-fill);

  --color-info-main:  var(--palette-info-main);
  --color-info-hover: var(--palette-info-hover);
  --color-info-fill:  var(--palette-info-fill);

  --color-warning-main:  var(--palette-warning-main);
  --color-warning-hover: var(--palette-warning-hover);
  --color-warning-fill:  var(--palette-warning-fill);

  /* Border */
  --color-border-focus:   var(--palette-neutral-900);
  --color-border-default: var(--palette-neutral-500);
  --color-border-subtle:  var(--palette-neutral-400);
  --color-border-strong:  var(--palette-neutral-600);
  --color-border-brand:   var(--palette-brand-primary);
}

/* --------------------------------------------------------------------------
   02. TYPOGRAPHY
   -------------------------------------------------------------------------- */
:root {
  --font-family-primary: 'IRANYekanX', Tahoma, sans-serif;
 
  --font-weight-thin:       100; /* T  */
  --font-weight-extralight: 200; /* EL */
  --font-weight-light:      300; /* L  */
  --font-weight-regular:    400; /* R  */
  --font-weight-medium:     500; /* M  */
  --font-weight-demibold:   600; /* DB */
  --font-weight-bold:       700; /* B  */
  --font-weight-extrabold:  800; /* EB */
  --font-weight-black:      900; /* Bl */
 
  /* Desktop sizes (default, >= 768px) */
  --font-size-display-xl: 80px;  --line-height-display-xl: 100px;
  --font-size-display-l:  64px;  --line-height-display-l:  80px;
  --font-size-heading-xl: 32px;  --line-height-heading-xl: 40px;
  --font-size-heading-l:  28px;  --line-height-heading-l:  36px;
  --font-size-heading-m:  24px;  --line-height-heading-m:  32px;
  --font-size-heading-s:  20px;  --line-height-heading-s:  28px;
  --font-size-body-xl:    18px;  --line-height-body-xl:    28px;
  --font-size-body-l:     16px;  --line-height-body-l:     24px;
  --font-size-body-m:     14px;  --line-height-body-m:     22px;
  --font-size-body-s:     12px;  --line-height-body-s:     18px;
}
 
/* Mobile overrides — always max-width: 767px per project convention */
@media (max-width: 767px) {
  :root {
    --font-size-display-xl: 44px;  --line-height-display-xl: 60px;
    --font-size-display-l:  28px;  --line-height-display-l:  36px;
    --font-size-heading-xl: 24px;  --line-height-heading-xl: 32px;
    --font-size-heading-l:  20px;  --line-height-heading-l:  28px;
    --font-size-heading-m:  18px;  --line-height-heading-m:  26px;
    --font-size-heading-s:  16px;  --line-height-heading-s:  24px;
    --font-size-body-xl:    14px;  --line-height-body-xl:    22px;
    --font-size-body-l:     13px;  --line-height-body-l:     21px;
    --font-size-body-m:     12px;  --line-height-body-m:     20px;
    --font-size-body-s:     10px;  --line-height-body-s:     15px;
  }
}
 


/* --------------------------------------------------------------------------
   Display — fixed weight: ExtraBold
   -------------------------------------------------------------------------- */
.font-display-xl {
  font-size: var(--font-size-display-xl);
  line-height: var(--line-height-display-xl);
  font-weight: var(--font-weight-extrabold);
}
.font-display-l {
  font-size: var(--font-size-display-l);
  line-height: var(--line-height-display-l);
  font-weight: var(--font-weight-extrabold);
}

/* --------------------------------------------------------------------------
   Heading — fixed weight: Bold
   -------------------------------------------------------------------------- */
.font-heading-xl {
  font-size: var(--font-size-heading-xl);
  line-height: var(--line-height-heading-xl);
  font-weight: var(--font-weight-bold);
}
.font-heading-l {
  font-size: var(--font-size-heading-l);
  line-height: var(--line-height-heading-l);
  font-weight: var(--font-weight-bold);
}
.font-heading-m {
  font-size: var(--font-size-heading-m);
  line-height: var(--line-height-heading-m);
  font-weight: var(--font-weight-bold);
}
.font-heading-s {
  font-size: var(--font-size-heading-s);
  line-height: var(--line-height-heading-s);
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Body — each size has 3 weight variants: mid / db / b
   -------------------------------------------------------------------------- */

/* Body XL (Default) */
.font-body-xl-mid , .font-body-xl{
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-body-xl);
  font-weight: var(--font-weight-medium);
}
.font-body-xl-db {
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-body-xl);
  font-weight: var(--font-weight-demibold);
}
.font-body-xl-b {
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-body-xl);
  font-weight: var(--font-weight-bold);
}

/* Body L */
.font-body-l-mid , .font-body-l{
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-medium);
}
.font-body-l-db {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-demibold);
}
.font-body-l-b {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-bold);
}

/* Body M */
.font-body-m-mid , .font-body-m{
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-medium);
}
.font-body-m-db {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-demibold);
}
.font-body-m-b {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-bold);
}

/* Body S */
.font-body-s-mid , .font-body-s{
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  font-weight: var(--font-weight-medium);
}
.font-body-s-db {
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  font-weight: var(--font-weight-demibold);
}
.font-body-s-b {
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  font-weight: var(--font-weight-bold);
}
/* --------------------------------------------------------------------------
   03. SPACING — base 4px scale
   -------------------------------------------------------------------------- */
:root {
  --space-none:    0px;
  --space-micro:   4px;
  --space-tiny:    8px;
  --space-small:   12px;
  --space-base:    16px;
  --space-medium:  24px;
  --space-large:   32px;
  --space-2xl:     48px;
  --space-3xl:     56px;
  --space-4xl:     64px;
  --space-5xl:     80px;
  --space-6xl:     112px;
  --space-7xl:     136px;
}

/* --------------------------------------------------------------------------
   04. RADIUS
   -------------------------------------------------------------------------- */
:root {
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-s:    8px;
  --radius-m:    16px;
  --radius-l:    24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 999px;
}

.space-none   { margin: var(--space-none); }
.space-micro  { margin: var(--space-micro); }
.space-tiny   { margin: var(--space-tiny); }
.space-small  { margin: var(--space-small); }
.space-base   { margin: var(--space-base); }
.space-medium { margin: var(--space-medium); }
.space-large  { margin: var(--space-large); }
.space-2xl    { margin: var(--space-2xl); }
.space-3xl    { margin: var(--space-3xl); }
.space-4xl    { margin: var(--space-4xl); }
.space-5xl    { margin: var(--space-5xl); }
.space-6xl    { margin: var(--space-6xl); }
.space-7xl    { margin: var(--space-7xl); }

/* Class Radius */
.radius-none { border-radius: var(--radius-none); }
.radius-xs   { border-radius: var(--radius-xs); }
.radius-s    { border-radius: var(--radius-s); }
.radius-m    { border-radius: var(--radius-m); }
.radius-l    { border-radius: var(--radius-l); }
.radius-xl   { border-radius: var(--radius-xl); }
.radius-2xl  { border-radius: var(--radius-2xl); }
.radius-full { border-radius: var(--radius-full); }

/* --------------------------------------------------------------------------
   05. SHADOW
   -------------------------------------------------------------------------- */
:root {
  --shadow-none:    none;
  --shadow-subtle:  0px 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-soft:    0px 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-overlay: 0px 12px 24px rgba(16, 24, 40, 0.12);
}

/* Class Shadow */
.shadow-none    { box-shadow: var(--shadow-none); }
.shadow-subtle  { box-shadow: var(--shadow-subtle); }
.shadow-soft    { box-shadow: var(--shadow-soft); }
.shadow-overlay { box-shadow: var(--shadow-overlay); }
 

/* Global Style Elementor */