/* **********************************************************
	JUPITER X CHILD THEME
	- Add / Update Client Colors & Fonts Below
	- See Other CSS sheets to edit existing code
	- Add any new code to appropriate sheet
 * ******************************************************** */


/* *****************************
	COLORS & FONTS
 * *****************************
CLIENT COLORS
SPACE CADET  --color-big-stone	#1B2A41
STEEL BLUE --color-san-marino	#3A6EA5
PALE CORNFLOWER BLUE --color-spindle	#A8C6EA
CRIMSON RED --color-cardinal	#B8212A
DUSTY ROSE --color-apricot	#E87A7A

ELEMENTOR GLOBAL COLORS
Primary --color-big-stone	--e-global-color-primary  #1B2A41
Secondary --color-san-marino	--e-global-color-secondary  #3A6EA5
Text --color-neutral-darkest	--e-global-color-text  #080A0C
Accent --color-cardinal	--e-global-color-accent  #B8212A

Spindle   --color-spindle -e-global-color-6e3351d #A8C6EA
Card Text --color-big-stone-darker --e-global-color-c989875 #0A101A
Apricot   --color-apricot --e-global-color-3515b94 #E87A7A

White #fff
Lightest Gray #F2F2F2
Lighter Gray #D9DADA
Light Gray #B4B5B6
Gray #838485
Dark Gray #525354
Darker Gray #202224
Darkest Gray #080A0C
Black #000

VARIABLES
--e-global-color-primary: #1B2A41;
    --e-global-color-secondary: #3A6EA5;
    --e-global-color-text: #080A0C;
    --e-global-color-accent: #B8212A;
    --e-global-color-6e3351d: #A8C6EA;
    --e-global-color-3515b94: #E87A7A;
	--e-global-color-c989875: #0A101A;
    --e-global-color-c37cbc3: #FFFFFF;
    --e-global-color-f19b530: #F2F2F2;
    --e-global-color-06b2356: #D9DADA;
    --e-global-color-78fc7b4: #B4B5B6;
    --e-global-color-b7192ec: #838485;
    --e-global-color-d7e4202: #525354;
    --e-global-color-1849d1a: #202224;
    --e-global-color-a198975: #080A0C;
    --e-global-color-9932f5e: #000000;
    color: var(--e-global-color-text);
    font-family: "Lato", Sans-serif;
    font-size: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
    line-height: 1.5em;

FONTS 
Headings: Montserrat
Body: Lato

 * *************************** */


/* ******************************
 * DESIGN TOKENS - COLOR PALETTE
 * *************************** */
/* COLOR EXAMPLES - REPLACE WITH ACTUAL CLIENT COLOR VARS FROM FIGMA */


/* ******************************
 * DESIGN TOKENS — COLOR PALETTE
 * *************************** */

/* Base */
:root {
--color-white: #FFFFFF;

/* NEUTRAL */
--color-neutral-lightest: #F2F2F2;
--color-neutral-lighter: #D9DADA;
--color-neutral-light: #B4B5B6;
--color-neutral: #838485;
--color-neutral-dark: #525354;
--color-neutral-darker: #202224;
--color-neutral-darkest: #080A0C;

/* BIG STONE */
--color-big-stone-lightest: #E8E9EC;
--color-big-stone-lighter: #D1D4D9;
--color-big-stone-light: #5F697A;
--color-big-stone: #1B2A41;
--color-big-stone-dark: #152134;
--color-big-stone-darker: #0A101A;
--color-big-stone-darkest: #080C13;

/* SAN MARINO */
--color-san-marino-lightest: #EBF0F6;
--color-san-marino-lighter: #D7E2ED;
--color-san-marino-light: #7599C0;
--color-san-marino: #3A6EA5;
--color-san-marino-dark: #2E5884;
--color-san-marino-darker: #172C42;
--color-san-marino-darkest: #112131;

/* SPINDLE */
--color-spindle-lightest: #F6F9FC;
--color-spindle-lighter: #EDF3FA;
--color-spindle-light: #C2D7F0;
--color-spindle: #A8C6EA;
--color-spindle-dark: #869EBB;
--color-spindle-darker: #434F5D;
--color-spindle-darkest: #323B46;

/* CARDINAL */
--color-cardinal-lightest: #F7E8E9;
--color-cardinal-lighter: #F0D2D4;
--color-cardinal-light: #CD6369;
--color-cardinal: #B8212A;
--color-cardinal-dark: #931A21;
--color-cardinal-darker: #490D10;
--color-cardinal-darkest: #37090C;

/* APRICOT */
--color-apricot-lightest: #FCF1F1;
--color-apricot-lighter: #FAE4E4;
--color-apricot-light: #EEA1A1;
--color-apricot: #E87A7A;
--color-apricot-dark: #B96161;
--color-apricot-darker: #5C3030;
--color-apricot-darkest: #452424;

/* OPACITY — NEUTRAL DARKEST OVERLAYS */
--color-opacity-dark-5: rgba(8, 10, 12, 0.05);
--color-opacity-dark-10: rgba(8, 10, 12, 0.10);
--color-opacity-dark-15: rgba(8, 10, 12, 0.15);
--color-opacity-dark-20: rgba(8, 10, 12, 0.20);
--color-opacity-dark-30: rgba(8, 10, 12, 0.30);
--color-opacity-dark-40: rgba(8, 10, 12, 0.40);
--color-opacity-dark-50: rgba(8, 10, 12, 0.50);
--color-opacity-dark-60: rgba(8, 10, 12, 0.60);
	
/* NEUTRAL */
--color-white: #FFFFFF;
--color-neutral-lightest: #EEEEEE;
--color-neutral-lighter: #DDDDDD;
--color-neutral-light: #AAAAAA;
--color-neutral: #888888;
--color-neutral-dark: #444444;
--color-neutral-darker: #222222;
--color-neutral-darkest: #000000;	
	
/* OPACITY - WHITE */
--color-opacity-white-0: rgba(255, 255, 255, 0);
--color-opacity-white-5: rgba(255, 255, 255, 0.05);
--color-opacity-white-10: rgba(255, 255, 255, 0.10);
--color-opacity-white-15: rgba(255, 255, 255, 0.15);
--color-opacity-white-20: rgba(255, 255, 255, 0.20);
--color-opacity-white-30: rgba(255, 255, 255, 0.30);
--color-opacity-white-40: rgba(255, 255, 255, 0.40);
--color-opacity-white-50: rgba(255, 255, 255, 0.50);
--color-opacity-white-60: rgba(255, 255, 255, 0.60);	
--color-opacity-white-70: rgba(255, 255, 255, 0.70);
--color-opacity-white-75: rgba(255, 255, 255, 0.75);
--color-opacity-white-80: rgba(255, 255, 255, 0.80);
--color-opacity-white-90: rgba(255, 255, 255, 0.90);
--color-opacity-white-95: rgba(255, 255, 255, 0.95);	
	
/* OPACITY - BLACK */
--color-opacity-black-0: rgba(0, 0, 0, 0);
--color-opacity-black-5: rgba(0, 0, 0, 0.05);
--color-opacity-black-10: rgba(0, 0, 0, 0.10);
--color-opacity-black-15: rgba(0, 0, 0, 0.15);
--color-opacity-black-20: rgba(0, 0, 0, 0.20);
--color-opacity-black-30: rgba(0, 0, 0, 0.30);
--color-opacity-black-40: rgba(0, 0, 0, 0.40);
--color-opacity-black-50: rgba(0, 0, 0, 0.50);
--color-opacity-black-60: rgba(0, 0, 0, 0.60);
--color-opacity-black-70: rgba(0, 0, 0, 0.70);
--color-opacity-black-75: rgba(0, 0, 0, 0.75);
--color-opacity-black-80: rgba(0, 0, 0, 0.80);
--color-opacity-black-90: rgba(0, 0, 0, 0.90);
--color-opacity-black-95: rgba(0, 0, 0, 0.95);
	
/* SEMANTIC - UI For Dark Backgrounds - FOR Dark Background Code in general-styles.css */
--color-text-light: var(--color-white);            /* light text for dark backgrounds */
--color-secondary: var(--color-san-marino-light);     /* link and button color */
--color-secondary-light: var(--color-san-marino-lighter); /* hover state */
}


/* ******************************
 * FONT SIZE VARS - replace with Client Values
 * *************************** */
:root {
  --wst-body-text-xl: clamp(21px, calc(0.313vw + 20px + max(0px, (100vw - 1920px) * 0.0063)), 30px);
	--wst-body-text-lg: clamp(19px, calc(0.313vw + 18px + max(0px, (100vw - 1920px) * 0.0063)), 28px);
  --wst-body-text-md-lg: clamp(18px, calc(0.188vw + 17.4px + max(0px, (100vw - 1920px) * 0.0063)), 25px);	
  --wst-body-text-md: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-body-text: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-body-text-sm: clamp(13px, calc(0.063vw + 12.8px + max(0px, (100vw - 1920px) * 0.0031)), 16px);
  --wst-body-text-xs: clamp(12px, calc(0vw + 12px + max(0px, (100vw - 1920px) * 0.0031)), 14px);
/*  --wst-h1: clamp(45px, calc(1.563vw + 40px + max(0px, (100vw - 1920px) * 0.0172)), 81px); */
  --wst-h1:	clamp(38px, calc(2vw + 31.6px + max(0px, (100vw - 1920px) * 0.0172)), 81px);
  /* --wst-h2: clamp(36px, calc(0.75vw + 33.6px + max(0px, (100vw - 1920px) * 0.0109)), 55px); */
  --wst-h2: clamp(30px, calc(1.125vw + 26.4px + max(0px, (100vw - 1920px) * 0.0109)), 55px);	
  --wst-h3: clamp(32px, calc(0.5vw + 30.4px + max(0px, (100vw - 1920px) * 0.0094)), 46px);
  --wst-h3: clamp(27px, calc(0.813vw + 24.4px + max(0px, (100vw - 1920px) * 0.0094)), 46px);	
  --wst-h4: clamp(24px, calc(0.5vw + 22.4px + max(0px, (100vw - 1920px) * 0.0078)), 37px);
  --wst-h5: clamp(20px, calc(0.25vw + 19.2px + max(0px, (100vw - 1920px) * 0.0063)), 28px);
  --wst-h6: clamp(18px, calc(0.125vw + 17.6px + max(0px, (100vw - 1920px) * 0.0047)), 23px);
  --wst-h1-home: clamp(44px, calc(1.938vw + 37.8px + max(0px, (100vw - 1920px) * 0.0172)), 86px);
  --wst-h2-large: clamp(40px, calc(1.5vw + 35.2px + max(0px, (100vw - 1920px) * 0.0156)), 74px);
  --wst-h2-small: clamp(32px, calc(0.5vw + 30.4px + max(0px, (100vw - 1920px) * 0.0094)), 46px);
  --wst-h2-kicker: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0063)), 26px);
  --wst-h2-small-kicker: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0063)), 26px);
  --wst-kicker: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 25px);
  --wst-header-menu: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 25px);
  --wst-header-mobile-menu: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 25px);
  --wst-header-phone: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 25px);
  --wst-footer-headings: clamp(17px, calc(0.125vw + 16.6px + max(0px, (100vw - 1920px) * 0.0047)), 22px);
  --wst-footer-links: clamp(17px, calc(0.125vw + 16.6px + max(0px, (100vw - 1920px) * 0.0047)), 22px);
  --wst-footer-location-links: clamp(17px, calc(0.125vw + 16.6px + max(0px, (100vw - 1920px) * 0.0047)), 22px);
  --wst-btn: clamp(16px, calc(0.25vw + 15.2px + max(0px, (100vw - 1920px) * 0.0063)), 24px);
  --wst-card-title: clamp(26px, calc(0.375vw + 24.8px + max(0px, (100vw - 1920px) * 0.0078)), 37px);
  --wst-card-text: clamp(17px, calc(0.125vw + 16.6px + max(0px, (100vw - 1920px) * 0.0047)), 22px);
  --wst-testimonial: clamp(20px, calc(0.375vw + 18.8px + max(0px, (100vw - 1920px) * 0.0063)), 30px);
  --wst-hero-subtext: clamp(20px, calc(0.25vw + 19.2px + max(0px, (100vw - 1920px) * 0.0063)), 28px);
  --wst-location-name: clamp(26px, calc(0.375vw + 24.8px + max(0px, (100vw - 1920px) * 0.0078)), 37px);
  --wst-location-detail: clamp(18px, calc(0.188vw + 17.4px + max(0px, (100vw - 1920px) * 0.0063)), 25px);
  --wst-cta-title: clamp(34px, calc(1.188vw + 30.2px + max(0px, (100vw - 1920px) * 0.0125)), 61px);
  --wst-cta-phone: clamp(28px, calc(0.875vw + 25.2px + max(0px, (100vw - 1920px) * 0.0094)), 48px);
  --wst-cta-text: clamp(20px, calc(0.25vw + 19.2px + max(0px, (100vw - 1920px) * 0.0063)), 28px);
  --wst-testimonial-name: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 25px);
  --wst-testimonial-position: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
}


/* ******************************
 * SPACING VARIABLES
 * *************************** */
:root {
  --space-0: 0;
  --space-0-5: 0.5rem;	
  --space-1: 1rem;
  --space-1-5: 1.5rem;
  --space-xs: 2rem;
  --space-3: 3rem;	
  --space-sm: 4rem;
  --space-md: 6rem;
  --space-lg: 8rem;
  --space-xl: 10rem;
}
@media (max-width: 1024px) {
  :root {
    --space-sm: 3rem;
    --space-md: 5rem;
    --space-lg: 7rem;
    --space-xl: 9rem;
  }
}
@media (max-width: 767px) {
  :root {
    --space-3: 2.5rem;	  
    --space-md: 4rem;
    --space-lg: 6rem;
    --space-xl: 8rem;
  }
}


/* ******************************
 * BORER RADIUS VARs
 * *************************** */
:root {
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 15px;
--radius-xl: 30px;
}
@media (max-width: 1024px) {
  :root {
	--radius-lg: 10px;
	--radius-xl: 20px;
  }
}
@media (max-width: 767px) {
  :root {
	--radius-lg: 8px;
	--radius-xl: 10px;
  }
}