/* ==================================================
   NX TYPOGRAPHY SYSTEM
   Elementor-safe
   Font: Montserrat (Award-Winning UI Scale)
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,300..900&display=swap');

:root{

  /* ==========================================
     FONT FAMILY
  ========================================== */

  --font-primary:
    "Montserrat",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;


  /* ==========================================
     FONT WEIGHT
  ========================================== */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;


  /* ==========================================
     FONT SIZE
  ========================================== */
/* ==========================================
    DISPLAY SIZE
========================================== */

--display-lg:
  clamp(
    2.75rem,
    1.25rem + 4.5vw,
    5.25rem
  );

--display-md:
  clamp(
    2.25rem,
    1.15rem + 3.5vw,
    4.25rem
  );

--display-sm:
  clamp(
    1.875rem,
    1.05rem + 2.6vw,
    3.375rem
  );

    
  --eyebrow:
    clamp(
      0.6875rem,
      0.65rem + 0.15vw,
      0.8125rem
    );

  --h1:
    clamp(
      1.75rem,
      1.1rem + 2.1vw,
      3.25rem
    );

  --h2:
    clamp(
      1.375rem,
      0.95rem + 1.4vw,
      2.25rem
    );

  --h3:
    clamp(
      1.125rem,
      0.9rem + 0.7vw,
      1.5rem
    );

  --h4:
    clamp(
      1rem,
      0.9rem + 0.3vw,
      1.1875rem
    );

  --body-large:
    clamp(
      1rem,
      0.92rem + 0.25vw,
      1.125rem
    );

  --body:
    clamp(
      0.9375rem,
      0.9rem + 0.12vw,
      1rem
    );

  --body-small:
    clamp(
      0.8125rem,
      0.78rem + 0.1vw,
      0.875rem
    );

  --caption:
    clamp(
      0.6875rem,
      0.66rem + 0.08vw,
      0.75rem
    );


  /* ==========================================
     LINE HEIGHT
  ========================================== */

  --line-height-display: 1.05;
  --line-height-heading: 1.15;
  --line-height-subheading: 1.25;
  --line-height-body-large: 1.6;
  --line-height-body: 1.65;
  --line-height-small: 1.55;


  /* ==========================================
     LETTER SPACING
  ========================================== */

  --tracking-h1: -0.03em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.02em;
  --tracking-h4: -0.01em;
  --tracking-eyebrow: 0.25em;
}


/* ==================================================
   GLOBAL TYPOGRAPHY
================================================== */

html{
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body{
  font-family: var(--font-primary);
  font-size: var(--body);
  line-height: var(--line-height-body);
  font-weight: var(--weight-regular);
}


/* ==================================================
   RESET
================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p{
  margin-top: 0;
  margin-bottom: 0;
}

button,
input,
textarea,
select{
  font: inherit;
}


/* ==================================================
   NATIVE HEADINGS
================================================== */

h1{
  font-family: var(--font-primary);
  font-size: var(--h1);
  line-height: var(--line-height-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-h1);
  text-wrap: balance;
}

h2{
  font-family: var(--font-primary);
  font-size: var(--h2);
  line-height: var(--line-height-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

h3{
  font-family: var(--font-primary);
  font-size: var(--h3);
  line-height: 1.25;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}

h4{
  font-family: var(--font-primary);
  font-size: var(--h4);
  line-height: var(--line-height-subheading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h4);
  text-wrap: balance;
}
/* ==================================================
   NX DISPLAY LG
================================================== */

.nx-display-lg,
.nx-display-lg .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--display-lg) !important;
  line-height: var(--line-height-display) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-h1) !important;
  text-wrap: balance;
}


/* ==================================================
   NX DISPLAY MD
================================================== */

.nx-display-md,
.nx-display-md .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--display-md) !important;
  line-height: var(--line-height-display) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-h1) !important;
  text-wrap: balance;
}


/* ==================================================
   NX DISPLAY SM
================================================== */

.nx-display-sm,
.nx-display-sm .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--display-sm) !important;
  line-height: var(--line-height-display) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-h1) !important;
  text-wrap: balance;
}

/* ==================================================
   NX H1
================================================== */

.nx-h1,
.nx-h1 .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--h1) !important;
  line-height: var(--line-height-display) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-h1) !important;
  text-wrap: balance;
}


/* ==================================================
   NX H2
================================================== */

.nx-h2,
.nx-h2 .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--h2) !important;
  line-height: var(--line-height-heading) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-h2) !important;
  text-wrap: balance;
}


/* ==================================================
   NX H3
================================================== */

.nx-h3,
.nx-h3 .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--h3) !important;
  line-height: 1.25 !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-h3) !important;
  text-wrap: balance;
}


/* ==================================================
   NX H4
================================================== */

.nx-h4,
.nx-h4 .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--h4) !important;
  line-height: var(--line-height-subheading) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-h4) !important;
  text-wrap: balance;
}


/* ==================================================
   NX EYEBROW
================================================== */

.nx-eyebrow,
.nx-eyebrow .elementor-heading-title{
  font-family: var(--font-primary) !important;
  font-size: var(--eyebrow) !important;
  line-height: 1 !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
}


/* ==================================================
   NX BODY LARGE
================================================== */

.nx-body-lg,
.nx-body-lg p,
.nx-body-lg .elementor-widget-container{
  font-family: var(--font-primary) !important;
  font-size: var(--body-large) !important;
  line-height: var(--line-height-body-large) !important;
  font-weight: var(--weight-regular) !important;
}


/* ==================================================
   NX BODY
================================================== */

.nx-body,
.nx-body p,
.nx-body .elementor-widget-container{
  font-family: var(--font-primary) !important;
  font-size: var(--body) !important;
  line-height: var(--line-height-body) !important;
  font-weight: var(--weight-regular) !important;
}


/* ==================================================
   NX BODY SMALL
================================================== */

.nx-body-sm,
.nx-body-sm p,
.nx-body-sm .elementor-widget-container{
  font-family: var(--font-primary) !important;
  font-size: var(--body-small) !important;
  line-height: var(--line-height-small) !important;
  font-weight: var(--weight-regular) !important;
}


/* ==================================================
   NX CAPTION
================================================== */

.nx-caption,
.nx-caption p,
.nx-caption .elementor-widget-container{
  font-family: var(--font-primary) !important;
  font-size: var(--caption) !important;
  line-height: 1.5 !important;
  font-weight: var(--weight-regular) !important;
}





/* ==================================================
   FONT WEIGHT UTILITIES
================================================== */

.nx-font-regular,
.nx-font-regular *{
  font-weight: var(--weight-regular) !important;
}

.nx-font-medium,
.nx-font-medium *{
  font-weight: var(--weight-medium) !important;
}

.nx-font-semibold,
.nx-font-semibold *{
  font-weight: var(--weight-semibold) !important;
}

.nx-font-bold,
.nx-font-bold *{
  font-weight: var(--weight-bold) !important;
}


/* ==================================================
   TEXT ALIGNMENT UTILITIES
================================================== */

.nx-text-left,
.nx-text-left *{
  text-align: left !important;
}

.nx-text-center,
.nx-text-center *{
  text-align: center !important;
}

.nx-text-right,
.nx-text-right *{
  text-align: right !important;
}


/* ==================================================
   TEXT WRAPPING UTILITIES
================================================== */

.nx-text-balance,
.nx-text-balance .elementor-heading-title{
  text-wrap: balance;
}

.nx-text-pretty,
.nx-text-pretty p{
  text-wrap: pretty;
}


/* ==================================================
   ELEMENTOR CLEANUP
================================================== */

.elementor-widget-heading .elementor-heading-title{
  margin: 0;
}

.elementor-widget-text-editor p:last-child{
  margin-bottom: 0;
}