/* Font: New Spirit, font-family: new-spirit */
@import url('https://use.typekit.net/jbx0jie.css');

/* Font: Inter, font-family: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Font: Brother, font-family: brother-1816 */
@import url('https://use.typekit.net/bax6fhv.css');

:root {

/*
===========================
Color Variables
===========================
*/

  /* Website Background */
  --body-bg-color: #fff;

  /* Main Colors */
  --text-color: #000;
  --primary-color: #fff600;
  --primary-color-text: #000;
  --secondary-color: #23c8d8;
  --secondary-color-text: #fff;
  --tertiary-color: #ff27ee;
  --tertiary-color-text: #fff;
  --quaternary-color: #fd7f32;
  --quaternary-color-text: #ffffff;
  --heading-color-text: #000;

  
  /* Shade Colors */
  --shade-color-1: #f9f8f7;
  --shade-color-2: #dfdfdf;
  --shade-color-3: #eee;
  --shade-color-4: #222;


  /* Custom Colors */
  --custom-color-1: #FD7F32;  
  --custom-color-2: #3a3738;  
  --custom-color-3: #cccccc;  
  --custom-color-4: #888888; 
  --custom-color-5: #888888; 
  --custom-color-6: #888888; 
  
  /* Font Colors */
  --small-text-color: var(--text-color);
  --big-text-color: var(--text-color);
  --body-text-color: var(--text-color);
  --h1-color: var(--heading-color-text);
  --h2-color: var(--heading-color-text);
  --h3-color: var(--heading-color-text);
  --h4-color: var(--heading-color-text);
  --h5-color: var(--heading-color-text);
  --h6-color: var(--heading-color-text);


  /* Link Colors */
  --link-color: var(--tertiary-color);
  --link-hover-color: var(--secondary-color);

  
  /* HR Colors */
  --hr-color: var(--tertiary-color);

/*
===========================
Button Variables
===========================
*/

  /* Primary Button Colors */
  --primary-button-bg-color: var(--primary-color);
  --primary-button-text-color: var(--primary-color-text);
  --primary-button-hover-bg-color: var(--secondary-color);
  --primary-button-hover-text-color: var(--secondary-color-text);
  --primary-button-selected-bg-color: var(--secondary-color);
  --primary-button-selected-text-color: var(--secondary-color-text);

  --primary-button-border-radius: 0px;

  /* Primary Button Padding */
  --primary-button-padding-top: 10px;
  --primary-button-padding-bottom: 10px;
  --primary-button-padding-right: 30px;
  --primary-button-padding-left: 30px;

  /* Primary Button Fonts */
  --primary-button-font-family: var(--sans-serif-font);
  --primary-button-font-weight: 400;

  /* Primary Button Border */
  --primary-button-border-width-top: 1px;
  --primary-button-border-type-top: solid;
  --primary-button-border-color-top: var(--primary-color);
  --primary-button-border-hover-color-top: var(--primary-color);
  --primary-button-border-selected-color-top: var(--primary-color);

  --primary-button-border-width-bottom: 1px;
  --primary-button-border-type-bottom: solid;
  --primary-button-border-color-bottom: var(--primary-color);;
  --primary-button-border-hover-color-bottom: var(--primary-color);;
  --primary-button-border-selected-color-bottom: var(--primary-color);;

  --primary-button-border-width-left: 1px;
  --primary-button-border-type-left: solid;
  --primary-button-border-color-left: var(--primary-color);;
  --primary-button-border-hover-color-left: var(--primary-color);;
  --primary-button-border-selected-color-left: var(--primary-color);;

  --primary-button-border-width-right: 1px;
  --primary-button-border-type-right: solid;
  --primary-button-border-color-right: var(--primary-color);;
  --primary-button-border-hover-color-right: var(--primary-color);;
  --primary-button-border-selected-color-right: var(--primary-color);;


  /* Secondary Button Colors */
  --secondary-button-bg-color: var(--secondary-color);
  --secondary-button-text-color: var(--secondary-color-text);
  --secondary-button-hover-bg-color: var(--primary-color);
  --secondary-button-hover-text-color: var(--primary-color-text);
  --secondary-button-selected-bg-color: var(--primary-color);
  --secondary-button-selected-text-color: var(--primary-color-text);

  --secondary-button-border-radius: 0px;

  /* Secondary Button Padding */
  --secondary-button-padding-top: 10px;
  --secondary-button-padding-bottom: 10px;
  --secondary-button-padding-right: 30px;
  --secondary-button-padding-left: 30px;

  /* Secondary Button Fonts */
  --secondary-button-font-family: var(--sans-serif-font);
  --secondary-button-font-weight: 400;

  /* Secondary Button Border */
  --secondary-button-border-width-top: 1px;
  --secondary-button-border-type-top: solid;
  --secondary-button-border-color-top: var(--secondary-color);;
  --secondary-button-border-hover-color-top: var(--secondary-color);;
  --secondary-button-border-selected-color-top: var(--secondary-color);;

  --secondary-button-border-width-bottom: 1px;
  --secondary-button-border-type-bottom: solid;
  --secondary-button-border-color-bottom: var(--secondary-color);;
  --secondary-button-border-hover-color-bottom: var(--secondary-color);;
  --secondary-button-border-selected-color-bottom: var(--secondary-color);;

  --secondary-button-border-width-left: 1px;
  --secondary-button-border-type-left: solid;
  --secondary-button-border-color-left: var(--secondary-color);;
  --secondary-button-border-hover-color-left: var(--secondary-color);;
  --secondary-button-border-selected-color-left: var(--secondary-color);;

  --secondary-button-border-width-right: 1px;
  --secondary-button-border-type-right: solid;
  --secondary-button-border-color-right: var(--secondary-color);;
  --secondary-button-border-hover-color-right: var(--secondary-color);;
  --secondary-button-border-selected-color-right: var(--secondary-color);;


   /* Tertiary Button Colors */
  --tertiary-button-bg-color: var(--tertiary-color);
  --tertiary-button-text-color: var(--tertiary-color-text);
  --tertiary-button-hover-bg-color: var(--primary-color);
  --tertiary-button-hover-text-color: var(--primary-color-text);
  --tertiary-button-selected-bg-color: var(--primary-color);
  --tertiary-button-selected-text-color: var(--primary-color-text);

  --tertiary-button-border-radius: 0px;

  /* Tertiary Button Padding */
  --tertiary-button-padding-top: 10px;
  --tertiary-button-padding-bottom: 10px;
  --tertiary-button-padding-right: 30px;
  --tertiary-button-padding-left: 30px;

  /* Tertiary Button Fonts */
  --tertiary-button-font-family: var(--sans-serif-font);
  --tertiary-button-font-weight: 400;

  /* Tertiary Button Border */
  --tertiary-button-border-width-top: 1px;
  --tertiary-button-border-type-top: solid;
  --tertiary-button-border-color-top: var(--tertiary-color);;
  --tertiary-button-border-hover-color-top: var(--tertiary-color);;
  --tertiary-button-border-selected-color-top: var(--tertiary-color);;

  --tertiary-button-border-width-bottom: 1px;
  --tertiary-button-border-type-bottom: solid;
  --tertiary-button-border-color-bottom: var(--tertiary-color);;
  --tertiary-button-border-hover-color-bottom: var(--tertiary-color);;
  --tertiary-button-border-selected-color-bottom: var(--tertiary-color);;

  --tertiary-button-border-width-left: 1px;
  --tertiary-button-border-type-left: solid;
  --tertiary-button-border-color-left: var(--tertiary-color);;
  --tertiary-button-border-hover-color-left: var(--tertiary-color);;
  --tertiary-button-border-selected-color-left: var(--tertiary-color);;

  --tertiary-button-border-width-right: 1px;
  --tertiary-button-border-type-right: solid;
  --tertiary-button-border-color-right: var(--tertiary-color);;
  --tertiary-button-border-hover-color-right: var(--tertiary-color);;
  --tertiary-button-border-selected-color-right: var(--tertiary-color);;


  /*
  ===========================
  Fonts Variables
  ===========================
  */

  /* Font Families */
  --serif-font: "new-spirit", sans-serif;
  --sans-serif-font: "Inter", sans-serif;
  --font-3: "serif";
  --font-4: "serif";
  --font-5: "serif";
  --font-6: "serif";

  /* Font Assignments */
  --small-font: var(--sans-serif-font);
  --big-font: var(--sans-serif-font);
  --body-font: var(--sans-serif-font);
  --h1-font: var(--serif-font);
  --h2-font: var(--serif-font);
  --h3-font: var(--serif-font);
  --h4-font: var(--serif-font);
  --h5-font: var(--serif-font);
  --h6-font: var(--serif-font);


  /* Font Weights */
  --small-font-weight: 400;
  --big-font-weight: 400;
  --body-font-weight: 400;
  --h1-font-weight: 600;
  --h2-font-weight: 600;
  --h3-font-weight: 600;
  --h4-font-weight: 600;
  --h5-font-weight: 600;
  --h6-font-weight: 600;


  /* Font Sizes */
  font-size: 16px;

  --small-font-size-max: 14;
  --small-font-size-min: 12;
  --small-line-height: 130%;

  --big-font-size-max: 26;
  --big-font-size-min: 22;
  --big-line-height: 130%;

  --body-font-size-max: 20;
  --body-font-size-min: 16;
  --body-line-height: 150%;

  --h1-font-size-max: 80;
  --h1-font-size-min: 35;
  --h1-line-height: 110%;

  --h2-font-size-max: 65;
  --h2-font-size-min: 30;
  --h2-line-height: 110%;

  --h3-font-size-max: 53;
  --h3-font-size-min: 28;
  --h3-line-height: 110%;

  --h4-font-size-max: 43;
  --h4-font-size-min: 23;
  --h4-line-height: 110%;

  --h5-font-size-max: 34;
  --h5-font-size-min: 20;
  --h5-line-height: 110%;

  --h6-font-size-max: 28;
  --h6-font-size-min: 20;
  --h6-line-height: 110%;


  /*
  ===========================
  Space Size Variables
  ===========================
  */

 
  --space-dt-3xs: 10px;
  --space-dt-2xs: 15px;
  --space-dt-xs: 20px;
  --space-dt-s: 30px;
  --space-dt-m: 50px;
  --space-dt-l: 80px;
  --space-dt-xl: 100px;
  --space-dt-2xl: 125px;
  --space-dt-3xl: 150px;
  --space-dt-4xl: 176px;

  --space-lp-3xs: 7px;
  --space-lp-2xs: 13px;
  --space-lp-xs: 18px;
  --space-lp-s: 25px;
  --space-lp-m: 40px;
  --space-lp-l: 60px;
  --space-lp-xl: 80px;
  --space-lp-2xl: 110px;
  --space-lp-3xl: 135px;
  --space-lp-4xl: clamp(141px, 104.6364px + 3.6364vw, 157px);

  --space-tb-3xs: 5px;
  --space-tb-2xs: 10px;
  --space-tb-xs: 15px;
  --space-tb-s: 20px;
  --space-tb-m: 30px;
  --space-tb-l: 45px;
  --space-tb-xl: 50px;
  --space-tb-2xl: 80px;
  --space-tb-3xl: 110px;
  --space-tb-4xl: clamp(128px, 108.5px + 3.25vw, 141px);

  --space-mb-3xs: 3px;
  --space-mb-2xs: 7px;
  --space-mb-xs: 10px;
  --space-mb-s: 15px;
  --space-mb-m: 20px;
  --space-mb-l: 25px;
  --space-mb-xl: 35px;
  --space-mb-2xl: 50px;
  --space-mb-3xl: 65px;
  --space-mb-4xl: 100px;

  /*
  ===========================
  Paragraph Spacing
  ===========================
  */

  --desktop-paragraph-space: var(--space-dt-s);
  --laptop-paragraph-space: var(--space-lp-s);
  --tablet-paragraph-space: var(--space-tb-s);
  --mobile-paragraph-space: var(--space-mb-s);

  /*
  ===========================
  Gloabl Spacings
  ===========================
  */

  /* Website Container Padding */
  --container-padding-desktop: var(--space-dt-l);
  --container-padding-laptop: var(--space-lp-l);
  --container-padding-tablet: var(--space-tb-s);
  --container-padding-mobile: var(--space-mb-s);


  /* Website default layout paddings for Desktop */
  --layout-padding-desktop-top: 0;
  --layout-padding-desktop-right: 0;
  --layout-padding-desktop-bottom: 0;
  --layout-padding-desktop-left: 0;

  /* Website default layout paddings for Laptop */
  --layout-padding-laptop-top: 0;
  --layout-padding-laptop-right: 0;
  --layout-padding-laptop-bottom: 0;
  --layout-padding-laptop-left: 0;

  /* Website default layout paddings for Tablet */
  --layout-padding-tablet-top: 0;
  --layout-padding-tablet-right: 0;
  --layout-padding-tablet-bottom: 0;
  --layout-padding-tablet-left: 0;

  /* Website default layout paddings for Mobile */
  --layout-padding-mobile-top: 0;
  --layout-padding-mobile-right: 0;
  --layout-padding-mobile-bottom: 0;
  --layout-padding-mobile-left: 0;
  

  /* Layout Margins for Desktop */
  --layout-margin-desktop-top: 0;
  --layout-margin-desktop-right: 0;
  --layout-margin-desktop-bottom: 0;
  --layout-margin-desktop-left: 0;
  
  /* Layout Margins for Laptop */
  --layout-margin-laptop-top: 0;
  --layout-margin-laptop-right: 0;
  --layout-margin-laptop-bottom: ;
  --layout-margin-laptop-left: 0;
  
  /* Layout Margins for Tablet */
  --layout-margin-tablet-top: 0;
  --layout-margin-tablet-right: 0;
  --layout-margin-tablet-bottom: 0;
  --layout-margin-tablet-left: 0;
  
  /* Layout Margins for Mobile */
  --layout-margin-mobile-top: 0;
  --layout-margin-mobile-right: 0;
  --layout-margin-mobile-bottom: 0;
  --layout-margin-mobile-left: 0;


   /* Website default zone paddings for Desktop */
  --zone-padding-desktop-top: 0;
  --zone-padding-desktop-right: 0;
  --zone-padding-desktop-bottom: 0;
  --zone-padding-desktop-left: 0; 

  /* Website default zone paddings for Laptop */
  --zone-padding-laptop-top: 0;
  --zone-padding-laptop-right: 0;
  --zone-padding-laptop-bottom: 0;
  --zone-padding-laptop-left: 0;

  /* Website default zone paddings for Tablet */
  --zone-padding-tablet-top: 0;
  --zone-padding-tablet-right: 0;
  --zone-padding-tablet-bottom: 0;
  --zone-padding-tablet-left: 0;

  /* Website default zone paddings for Mobile */
  --zone-padding-mobile-top: 0;
  --zone-padding-mobile-right: 0;
  --zone-padding-mobile-bottom: 0;
  --zone-padding-mobile-left: 0;
  

  /* Zone Margins for Desktop */
  --zone-margin-desktop-top: 0;
  --zone-margin-desktop-right: 0;
  --zone-margin-desktop-bottom: 0;
  --zone-margin-desktop-left: 0;
  
  /* Zone Margins for Laptop */
  --zone-margin-laptop-top: 0;
  --zone-margin-laptop-right: 0;
  --zone-margin-laptop-bottom: 0;
  --zone-margin-laptop-left: 0;
  
  /* Zone Margins for Tablet */
  --zone-margin-tablet-top: 0;
  --zone-margin-tablet-right: 0;
  --zone-margin-tablet-bottom: 0;
  --zone-margin-tablet-left: 0;
  
  /* Zone Margins for Mobile */
  --zone-margin-mobile-top: 0;
  --zone-margin-mobile-right: 0;
  --zone-margin-mobile-bottom: 0;
  --zone-margin-mobile-left: 0;
  

  /* Zone Margins for Desktop */
  --zone-margin-desktop-top: 0;
  --zone-margin-desktop-right: 0;
  --zone-margin-desktop-bottom: 0;
  --zone-margin-desktop-left: 0;
  

  /* Zone Margins for Laptop */
  --zone-margin-laptop-top: 0;
  --zone-margin-laptop-right: 0;
  --zone-margin-laptop-bottom: 0;
  --zone-margin-laptop-left: 0;


  /* Zone Margins for Tablet  */ 
  --zone-margin-tablet-top: 0;
  --zone-margin-tablet-right: 0;
  --zone-margin-tablet-bottom: 0;
  --zone-margin-tablet-left: 0;
  

  /* Zone Margins for Mobile  */
  --zone-margin-mobile-top: 0;
  --zone-margin-mobile-right: 0;
  --zone-margin-mobile-bottom: 0;
  --zone-margin-mobile-left: 0;
  

  /* Zone Spaces for Desktop */ 
  --zone-spacing-desktop-column: 0;
  --zone-spacing-desktop-row: 0;
  

  /* Zone Spaces for Laptop   */
  --zone-spacing-laptop-column: 0;
  --zone-spacing-laptop-row: 0;
  

  /* Zone Spaces for Tablet   */
  --zone-spacing-tablet-column: 0;
  --zone-spacing-tablet-row: 0;
  

  /* Zone Spaces for Mobile   */
  --zone-spacing-mobile-column: 0;
  --zone-spacing-mobile-row: 0;
  

  /*
  ===========================
  Responsive Size Variables
  ===========================
  */

  --toggle-menu: 1000px;

  /*
  ===========================
  Discuss with Jo
  ===========================
  */

  --page-hero-banner-mb-height: 450px;

  /*
  ===========================
  PRe-define veriables for CK5 inages
  ===========================
  */

  --image-border-radius: 20px;
  --image-overlay: rgba(0,0,0,0.4);
  --border-round-radius: 100px;
  --button-semi-round-radius: 10px;

  /*
  ===========================
  Email Variables
  ===========================
  */
  
  --email-fonts: var(--sans-serif-font);
  --email-font-size: 18px;
  --email-h1: 60px;
  --email-h2: 50px;
  --email-h3: 40px;
  --email-h4: 30px;
  --email-h5: 25px;
  --email-h6: 20px;
  /*
    --email-fonts: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    --email-fonts: Verdana, Geneva, sans-serif;
  */
}