/* **********************************************************
	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
Light Blue --color-cerulean	#00ADEF
Dark Blue --color-lucky-point	#1A2B6D		


ELEMENTOR GLOBAL COLORS
Primary Light Blue --color-cerulean	#00ADEF
Secondary --color-lucky-point-darkest	#070C20
Text #000
Accent --color-lucky-point-darker	#0A112B

White #fff
Lightest Gray #F2F2F2
Lighter Gray #D8D8D8
Light Gray #B2B2B2
Gray #9A9A9A
Dark Gray #7F7F7F
Darker Gray #4C4C4C
Darkest Gray #191919
Black #000

VARIABLES
    --e-global-color-primary: #00ADEF;
    --e-global-color-secondary: #1A2B6D;
    --e-global-color-text: #000000;
    --e-global-color-accent: #0A112B;
    --e-global-color-6990cf6: #142257;
    --e-global-color-a8f20ff: #070C20;
    --e-global-color-0358b33: #008ABF;
    --e-global-color-4fc8867: #00455F;
    --e-global-color-2c1313b: #003347;
    --e-global-color-c37cbc3: #FFFFFF;
    --e-global-color-f19b530: #F2F2F2;
    --e-global-color-06b2356: #D8D8D8;
    --e-global-color-78fc7b4: #B2B2B2;
    --e-global-color-b7192ec: #9A9A9A;
    --e-global-color-d7e4202: #7F7F7F;
    --e-global-color-1849d1a: #4C4C4C;
    --e-global-color-a198975: #191919;
    --e-global-color-9932f5e: #000000;
    color: var(--e-global-color-text);
    font-family: "Noto Sans", Sans-serif;
    font-size: var(--wst-body-text);
    line-height: 1.5em;

FONTS 
Headings: Roboto Condensed
Body: Noto Sans


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


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

:root {

/* WHITE */
--color-white: #FFFFFF;

/* NEUTRAL */
--color-neutral-lightest: #F2F2F2;
--color-neutral-lighter: #D8D8D8;
--color-neutral-light: #B2B2B2;
--color-neutral:	#9A9A9A;
--color-neutral-dark: #7F7F7F;
--color-neutral-darker: #4C4C4C;
--color-neutral-darkest: #191919;
--color-black: #000000;

/* LUCKY POINT */
--color-lucky-point-lightest: #E8E9F0;
--color-lucky-point-lighter: #D1D4E1;
--color-lucky-point-light: #5E6A98;
--color-lucky-point: #1A2B6D;
--color-lucky-point-dark: #142257;
--color-lucky-point-darker: #0A112B;
--color-lucky-point-darkest: #070C20;

/* CERULEAN */
--color-cerulean-lightest: #E5F6FD;
--color-cerulean-lighter: #CCEEFB;
--color-cerulean-light: #4CC5F3;
--color-cerulean: #00ADEF;
--color-cerulean-dark: #008ABF;
--color-cerulean-darker: #00455F;
--color-cerulean-darkest: #003347;
	
/* 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);
}


/* ******************************
 * FONT SIZE VARS
 * *************************** */
:root {
  --wst-body-text-lg: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 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(14px, calc(0.063vw + 13.8px + max(0px, (100vw - 1920px) * 0.0047)), 18px);
  --wst-body-text-xs: clamp(14px, calc(0vw + 14px + max(0px, (100vw - 1920px) * 0.0031)), 16px);
  --wst-h1: clamp(44px, calc(1.25vw + 40px + max(0px, (100vw - 1920px) * 0.0156)), 74px);
  --wst-h2: clamp(40px, calc(0.75vw + 37.6px + max(0px, (100vw - 1920px) * 0.0125)), 60px);
  --wst-h3: clamp(32px, calc(0.75vw + 29.6px + max(0px, (100vw - 1920px) * 0.0109)), 51px);
  --wst-h4: clamp(24px, calc(0.75vw + 21.6px + max(0px, (100vw - 1920px) * 0.0078)), 41px);
  --wst-h5: clamp(20px, calc(0.5vw + 18.4px + max(0px, (100vw - 1920px) * 0.0063)), 32px);
  --wst-h6: clamp(18px, calc(0.25vw + 17.2px + max(0px, (100vw - 1920px) * 0.0047)), 25px);
  --wst-h1-home: clamp(44px, calc(1.25vw + 40px + max(0px, (100vw - 1920px) * 0.0156)), 74px);
  --wst-h2-small: clamp(32px, calc(0.75vw + 29.6px + max(0px, (100vw - 1920px) * 0.0109)), 51px);
  --wst-h2-kicker: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-h2-small-kicker: clamp(19px, calc(0.188vw + 18.4px + max(0px, (100vw - 1920px) * 0.0063)), 26px);
  --wst-h1-long-words: clamp(30px, calc(2.125vw + 23.2px + max(0px, (100vw - 1920px) * 0.0156)), 74px);
  --wst-h2-long-words: clamp(26px, calc(1.625vw + 20.8px + max(0px, (100vw - 1920px) * 0.0125)), 60px);
  --wst-kicker: clamp(19px, calc(0.188vw + 18.4px + max(0px, (100vw - 1920px) * 0.0063)), 26px);
  --wst-header-menu: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-header-mobile-menu: clamp(18px, calc(0.125vw + 17.6px + max(0px, (100vw - 1920px) * 0.0047)), 23px);
  --wst-header-phone: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-footer-headings: clamp(17px, calc(0.188vw + 16.4px + max(0px, (100vw - 1920px) * 0.0047)), 23px);
  --wst-footer-links: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-footer-location-links: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-btn: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-card-title: clamp(24px, calc(0.75vw + 21.6px + max(0px, (100vw - 1920px) * 0.0078)), 41px);
  --wst-card-text: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-testimonial: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-testimonial-name: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-accordion-title: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-accordion-text: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-intro-text: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
}


/* ******************************
 * 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: 6.25rem;
  --space-lg: 8.25rem;
  --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;
  }
}


/* ******************************
 * BORDER 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;
  }
}