/* **********************************************************
	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
--color-maroon	#701011	
--color-thunderbird	#C51C21	
--color-golden-grass	#DEA124	
--color-luxor-gold	#9A6F2A

ELEMENTOR GLOBAL COLORS
Primary --color-maroon #701011
Secondary --color-golden-grass #DEA124
Text --color-neutral-darkest #0B0802
Accent --color-thunderbird	#C51C21	

--color-luxor-gold	#9A6F2A

White --color-white: #FFFFFF;
Lightest Gray --color-neutral-lightest: #F2F2F2;
Lighter Gray --color-neutral-lighter: #DAD9D9;
Light Gray --color-neutral-light: #B5B4B3;
Gray --color-neutral: #858380;
Dark Gray --color-neutral-dark: #54524D;
Darker Gray --color-neutral-darker: #23201B;
Darkest Gray --color-neutral-darkest: #0B0802;
Black #000
  

VARIABLES
--e-global-color-primary: #990000;
--e-global-color-secondary: #800000;
--e-global-color-text: #555555;
--e-global-color-accent: #FF9900;
--e-global-color-c37cbc3: #FFFFFF;
--e-global-color-f19b530: #EEEEEE;
--e-global-color-06b2356: #DDDDDD;
--e-global-color-78fc7b4: #AAAAAA;
--e-global-color-b7192ec: #888888;
--e-global-color-d7e4202: #6A6A6A;
--e-global-color-1849d1a: #444444;
--e-global-color-a198975: #222222;
--e-global-color-9932f5e: #000000;

FONTS 


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


/* ******************************
 * DESIGN TOKENS - COLOR PALETTE
 * *************************** */

:root {

/* NEUTRAL */
--color-white: #FFFFFF;
  --color-neutral-lightest: #F2F2F2;
  --color-neutral-lighter: #DAD9D9;
  --color-neutral-light: #B5B4B3;
  --color-neutral: #858380;
  --color-neutral-dark: #54524D;
  --color-neutral-darker: #23201B;
  --color-neutral-darkest: #0B0802;
	
/* MAROON */
  --color-maroon-lightest: #F0E7E7;
  --color-maroon-lighter: #E2CFCF;
  --color-maroon-light: #9A5758;
  --color-maroon: #701011;
  --color-maroon-dark: #590C0D;
  --color-maroon-darker: #2C0606;
  --color-maroon-darkest: #210405;
 
/* THUNDERBIRD */
  --color-thunderbird-lightest: #F9E8E8;
  --color-thunderbird-lighter: #F3D1D2;
  --color-thunderbird-light: #D66063;
  --color-thunderbird: #C51C21;
  --color-thunderbird-dark: #9D161A;
  --color-thunderbird-darker: #4E0B0D;
  --color-thunderbird-darkest: #3B0809;
 
/* GOLDEN GRASS */
  --color-golden-grass-lightest: #FBF5E9;
  --color-golden-grass-lighter: #F8ECD3;
  --color-golden-grass-light: #E7BD65;
  --color-golden-grass: #DEA124;
  --color-golden-grass-dark: #B1801C;
  --color-golden-grass-darker: #58400E;
  --color-golden-grass-darkest: #42300A;
 
/* LUXOR GOLD */
  --color-luxor-gold-lightest: #F4F0E9;
  --color-luxor-gold-lighter: #EAE2D4;
  --color-luxor-gold-light: #B89A69;
  --color-luxor-gold: #9A6F2A;
  --color-luxor-gold-dark: #7B5821;
  --color-luxor-gold-darker: #3D2C10;
  --color-luxor-gold-darkest: #2E210C;	
	
/* 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 - replace with Client Values
 * *************************** */
:root {
  --wst-body-text-lg: clamp(20px, calc(0.375vw + 18.8px + max(0px, (100vw - 1920px) * 0.0063)), 30px);
  --wst-body-text-md: clamp(17px, calc(0.188vw + 16.4px + max(0px, (100vw - 1920px) * 0.0047)), 23px);
  --wst-body-text: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --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(38px, calc(1.375vw + 33.6px + max(0px, (100vw - 1920px) * 0.0141)), 69px);
  --wst-h2: clamp(32px, calc(1vw + 28.8px + max(0px, (100vw - 1920px) * 0.0125)), 56px);
  --wst-h3: clamp(28px, calc(1vw + 24.8px + max(0px, (100vw - 1920px) * 0.0109)), 51px);
  --wst-h4: clamp(25px, calc(0.813vw + 22.4px + max(0px, (100vw - 1920px) * 0.0094)), 44px);
  --wst-h5: clamp(22px, calc(0.625vw + 20px + max(0px, (100vw - 1920px) * 0.0078)), 37px);
  --wst-h6: clamp(19px, calc(0.313vw + 18px + max(0px, (100vw - 1920px) * 0.0063)), 28px);
  --wst-h1-home: clamp(30px, calc(1.875vw + 24px + max(0px, (100vw - 1920px) * 0.0141)), 69px);
  --wst-h2-large: clamp(34px, calc(1.25vw + 30px + max(0px, (100vw - 1920px) * 0.0125)), 62px);
  --wst-h2-small: clamp(29px, calc(0.563vw + 27.2px + max(0px, (100vw - 1920px) * 0.0094)), 44px);
  --wst-h2-small-kicker: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-h3-small: clamp(25px, calc(0.813vw + 22.4px + max(0px, (100vw - 1920px) * 0.0094)), 44px);	
  --wst-h1-long-words: clamp(30px, calc(1.875vw + 24px + max(0px, (100vw - 1920px) * 0.0141)), 69px);
  --wst-h2-long-words: clamp(27px, calc(1.313vw + 22.8px + max(0px, (100vw - 1920px) * 0.0125)), 56px);
  --wst-h2-kicker: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-kicker: clamp(15px, calc(0.063vw + 14.8px + max(0px, (100vw - 1920px) * 0.0031)), 18px);
  --wst-header-menu: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-header-mobile-menu: clamp(19px, calc(0.188vw + 18.4px + max(0px, (100vw - 1920px) * 0.0063)), 26px);
  --wst-header-phone: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-footer-headings: clamp(17px, calc(0.188vw + 16.4px + max(0px, (100vw - 1920px) * 0.0047)), 23px);
  --wst-footer-links: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --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(22px, calc(0.625vw + 20px + max(0px, (100vw - 1920px) * 0.0078)), 37px);
  --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-hero-subtext: clamp(20px, calc(0.375vw + 18.8px + max(0px, (100vw - 1920px) * 0.0063)), 30px);
  --wst-testimonial-name: clamp(16px, calc(0.125vw + 15.6px + max(0px, (100vw - 1920px) * 0.0047)), 21px);
  --wst-testimonial-role: clamp(13px, calc(0.063vw + 12.8px + max(0px, (100vw - 1920px) * 0.0031)), 16px);
  --wst-form-label: 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;
  }
}


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