@font-face {
  font-family: quickpen;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/QuickPen/QuickPen.ttf") format("ttf"),
       url("../fonts/QuickPen/QuickPen.ttf") format("truetype");
}



@font-face {
  font-family: natasha;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/natasha-walker-font/NatashawalkerRegular-lgede.otf") format("truetype");
}

@font-face {
  font-family: natashabold;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/natasha-walker-font/NatashawalkerBold-vmevO.otf") format("truetype");
}


:root {
		/*  TYPOGRAPHY  */
		--base-font: Montserrat, sans-serif;
		--base-font-size: 16;
		
		--heading-font-size-h1: 80;  
		--heading-font-size-h2: 56; 
		--heading-font-size: 45;
		--heading-font-size-h4: 30;
		--heading-font-size-h5: 24;
		--heading-font-size-h6: 16; 
		--heading-font-weight: 400;
		--heading-font-weight-h1: 400;
		--custom_large_font_size: 120;
		--custom_large_font_weight: 400;

		/*  COLORS  */
		--color-primary: #000000;
		--color-secondary: #cb6828;
		--color-white: #ffffff;
		--color-black: #000000;
		--color-grey-1: #f2f3f5;
		--color-grey-2: #bec0c4;
		--color-grey-3: #797b7e; 
		--color-grey-4: #333333;
		--color-grey-5: #669aa1;
		--color-grey-6: #f3f3f3;
		--color_success: #cdf1e8;
		--color-icon-success: #44bb9e;  
		--color-info: #edefff;
		--color-icon-info: #121212;
		--color-warning: #fff5bb;
	    --color-icon-warning: #fda828;
		--color-danger: #fef1f0;
	    --color-icon-danger: #ea3253;

		--color-text-field-text: #000;
		--color-text-field-border: #000000;
		--color-text-field: #fff;
		--body-background-color: #ffffff;
		--base-font-color: #000000;
		--heading-font-color: #000000;
		--border-color: #e1e2e4;
		--links-color: #000000;
		--links-color-hover: #cb6828;
		--product-name-color: #000000;
		--product-name-color-hover: #cb6828;
		--product-name-color-secondary: #222222;
		--product-name-color-secondary-hover: #f14e08;
		--product-price-color: #cb6828;
		--product-regular-price-color: #000000;
		--product-price-sale-color: #cb6828;
		--button-background-color: #ffffff;
		--button-text-color: #000000;
		--button-border-color: #000000;
		--button-hover-color: #000000;
		--button-hover-text-color: #ffffff;
		--button-hover-border-color: #000000;
		--primary-button-background-color: #cb6828;
		--primary-button-text-color: #000000;
		--primary-button-border-color: #cb6828;
		--primary-button-hover-background-color: #000000;
		--primary-button-hover-text-color: #ffffff;
		--primary-button-hover-border-color: #000000;
		--color-badge-new: #121212;
		--color-badge-sale: #ea3253;
		--color-badge-outstocksale: #5c6468;
		--color-badge-custom-1: #1383df;
		--color-badge-custom-text-color-1: #1383df;
		--color-badge-custom-2: #394cb3;
		--color-badge-custom-text-color-2: #222222;
		--rout_gradient: 90deg;
		--gradient_color_1 : #64ecf5;
		--gradient_color_2 : #1cebbc;
		--gradient_start_color_1: 0%;
		--gradient_end_color_2: 100%;
		--rout2_gradient: 90deg;
		--gradient2_color_1 : #E3FDFF;
		--gradient2_color_2 : #E3FDF7;
		--gradient2_start_color_1: 0%;
		--gradient2_end_color_2: 100%;
		--max-width-container: 1200px;
		--spacer: 30px;     
	}	
	
	  *,
	  *::before,
	  *::after {
	 	 box-sizing: inherit;
	  }
	
	  html {
	  	box-sizing: border-box;
	  	height: 100%;
	  }
	
	  body {
	  	display: grid;
	  	grid-template-rows: auto auto 1fr auto;
	  	grid-template-columns: 100%;
	  	min-height: 100%;
	  	margin: 0;
	  	-webkit-font-smoothing: antialiased;
	  	-moz-osx-font-smoothing: grayscale;
	  	color: #666;
	  	background: var(--body-background-color);
	  	font-family: var(--base-font);
	  	font-size: var(--base-font-size);
	  	font-weight: 400;
	  	line-height: 1.2;
	  }