@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

@font-face {
	font-family: 'CabinetGrotesk-Bold';
	src: url('../css/fonts/CabinetGrotesk-Bold.eot');
	src: url('../css/fonts/CabinetGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/CabinetGrotesk-Bold.woff2') format('woff2'),
			url('../css/fonts/CabinetGrotesk-Bold.woff') format('woff'),
			url('../css/fonts/CabinetGrotesk-Bold.ttf') format('truetype'),
			url('../css/fonts/CabinetGrotesk-Bold.svg#CabinetGrotesk-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'CabinetGrotesk-Regular';
	src: url('../css/fonts/CabinetGrotesk-Regular.eot');
	src: url('../css/fonts/CabinetGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/CabinetGrotesk-Regular.woff2') format('woff2'),
			url('../css/fonts/CabinetGrotesk-Regular.woff') format('woff'),
			url('../css/fonts/CabinetGrotesk-Regular.ttf') format('truetype'),
			url('../css/fonts/CabinetGrotesk-Regular.svg#CabinetGrotesk-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'CabinetGrotesk-Light';
	src: url('../css/fonts/CabinetGrotesk-Light.eot');
	src: url('../css/fonts/CabinetGrotesk-Light.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/CabinetGrotesk-Light.woff2') format('woff2'),
			url('../css/fonts/CabinetGrotesk-Light.woff') format('woff'),
			url('../css/fonts/CabinetGrotesk-Light.ttf') format('truetype'),
			url('../css/fonts/CabinetGrotesk-Light.svg#CabinetGrotesk-Light') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'CabinetGrotesk-Medium';
	src: url('../css/fonts/CabinetGrotesk-Medium.eot');
	src: url('../css/fonts/CabinetGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/CabinetGrotesk-Medium.woff2') format('woff2'),
			url('../css/fonts/CabinetGrotesk-Medium.woff') format('woff'),
			url('../css/fonts/CabinetGrotesk-Medium.ttf') format('truetype'),
			url('../css/fonts/CabinetGrotesk-Medium.svg#CabinetGrotesk-Medium') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'CabinetGrotesk-Extrabold';
	src: url('../css/fonts/CabinetGrotesk-Extrabold.eot');
	src: url('../css/fonts/CabinetGrotesk-Extrabold.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'),
			url('../css/fonts/CabinetGrotesk-Extrabold.woff') format('woff'),
			url('../css/fonts/CabinetGrotesk-Extrabold.ttf') format('truetype'),
			url('../css/fonts/CabinetGrotesk-Extrabold.svg#CabinetGrotesk-Extrabold') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'MillionDreams-Regular';
	src: url('../css/fonts/MillionDreams-Regular.eot');
	src: url('../css/fonts/MillionDreams-Regular.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/MillionDreams-Regular.woff2') format('woff2'),
			url('../css/fonts/MillionDreams-Regular.woff') format('woff'),
			url('../css/fonts/MillionDreams-Regular.ttf') format('truetype'),
			url('../css/fonts/MillionDreams-Regular.svg#MillionDreams-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Noteworthy-Light';
	src: url('../css/fonts/Noteworthy-Light.eot');
	src: url('../css/fonts/Noteworthy-Light.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/Noteworthy-Light.woff2') format('woff2'),
			url('../css/fonts/Noteworthy-Light.woff') format('woff'),
			url('../css/fonts/Noteworthy-Light.ttf') format('truetype'),
			url('../css/fonts/Noteworthy-Light.svg#Noteworthy-Light') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica';
	src: url('../css/fonts/Helvetica.eot');
	src: url('../css/fonts/Helvetica.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/Helvetica.woff2') format('woff2'),
			url('../css/fonts/Helvetica.woff') format('woff'),
			url('../css/fonts/Helvetica.ttf') format('truetype'),
			url('../css/fonts/Helvetica.svg#Helvetica') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Marion-Regular';
	src: url('../css/fonts/Marion-Regular.eot');
	src: url('../css/fonts/Marion-Regular.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/Marion-Regular.woff2') format('woff2'),
			url('../css/fonts/Marion-Regular.woff') format('woff'),
			url('../css/fonts/Marion-Regular.ttf') format('truetype'),
			url('../css/fonts/Marion-Regular.svg#Marion-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Reactin';
	src: url('../css/fonts/Reactin.eot');
	src: url('../css/fonts/Reactin.eot?#iefix') format('embedded-opentype'),
			url('../css/fonts/Reactin.woff2') format('woff2'),
			url('../css/fonts/Reactin.woff') format('woff'),
			url('../css/fonts/Reactin.ttf') format('truetype'),
			url('../css/fonts/Reactin.svg#Reactin') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


:root {

	--clr-primary-dark: #B1855F;
	--clr-primary: #AC6D4A;
	--clr-primary-light: #C99070;
	--clr-primary-lighter: #ECCDBB;
	--clr-primary-lightest: #ECE5E2;

	--clr-secondary: #251B16; 
	--clr-secondary-light: #79736F; 
	--clr-secondary-lighter: #B8B5B2; 

	--clr-tertiary-dark: #EEE2DC;
	--clr-tertiary: #F2EEEB;
	--clr-tertiary-light: #EBEBEB;
	
	--clr-accent: #5A3927;
	--clr-accent-light: #998579;


	--bg-clr-dark: #F6F0EC;
	--bg-clr: #F7F7F5;

	
	--main-bg-clr:var(--bg-clr);
	--secondary-bg-clr: var(--bg-clr-dark);

	--txt-T-clr:var(--clr-secondary);
	--txt-subT-clr:var(--clr-secondary-light);
	--txt-fT-clr:var(--clr-primary-lightest);
	--txt-fm-clr:var(--clr-secondary-lighter);
	

	--clr-black: #000000;
	--clr-white: #FFFFFF;

	--ff-primary:'DM Serif Display', serif;
	--ff-secondary:'Charmonman', cursive;
	--ff-tertiary:'EB Garamond', serif;
	--ff-accent:'Noto Sans', sans-serif;
	--ff-reactin:'Reactin';

	--ff-body:var(--ff-primary);
	--fw-light:300;
	--fw-regular:400;
	--fw-medium:500;
	--fw-semi-bold:600;
	--fw-bold:700;
	--fw-extra-bold:800;
	--fw-black:900;
}

body{text-rendering:optimizeSpeed;line-height:1.2;font-family:var(--ff-body);background-color:var(--bg-clr);font-weight: var(--fw-medium);}
body,h1,h2,h3,h4,h5,h6,p,ul,ul li{margin:0;padding:0;font-size:inherit;}
*,*::before,*::after{outline:none;box-sizing:border-box;}
*{margin:0;padding:0;}
input,button{-moz-appearance:none;-webkit-appearance:none;}
a:link,a:visited{text-decoration:none;border:none;outline:none;}
img,picture,svg{max-width:100%;display:block;}
img{border:none;outline:none;display:block;}
ul,ol{list-style:none;list-style-type:none;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
.relative{position:relative;}
.absolute{position:absolute;}
.clr{clear:both;}
.floatLft{float:left;}
.floatRgt{float:right;}
.inlineBlk{display:inline-block;vertical-align:middle;}
.table{display:table;}
.transition{transition:all 0.35s ease 0s;-moz-transition:all 0.35s ease 0s;-webkit-transition:all 0.35s ease 0s;}
.col-10{width:10%;}
.col-20{width:20%;}
.col-30{width:30%;}
.col-40{width:40%;}
.col-50{width:50%;}
.col-60{width:60%;}
.col-70{width:70%;}
.col-80{width:80%;}
.col-90{width:90%;}
.col-100{width:100%;}
.textCenter{text-align:center;}
.textJustify{text-align:justify;}
.textLeft{text-align:left;}
.textRight{text-align:right;}

.wrapper-1800{max-width:1830px;width:100%;padding:0 50px;margin:0 auto;}
.wrapperR-1700{max-width:1730px;width:100%;margin:0 0 0 auto;padding-left: 30px;}
.wrapperL-1700{max-width:1730px;width:100%;margin:0 auto 0 0 ;padding-right: 30px;}
.wrapper-1700{max-width:1730px;width:100%;padding:0 15px;margin:0 auto;}
.wrapper-1000{max-width:1030px;width:100%;padding:0 15px;margin:0 auto;}
.wrapper-815{max-width:863px;width:100%;padding:0 24px;margin:0 auto;}
.wrapper-615{max-width:663px;width:100%;padding:0 24px;margin:0 auto;}


/* Utility classes */
/* font weight */
.fw-black{font-weight:var(--fw-black);}
.fw-ex-bold{font-weight:var(--fw-extra-bold);}
.fw-bold{font-weight:var(--fw-bold);}
.fw-semi-bold{font-weight:var(--fw-semi-bold);}
.fw-medium{font-weight:var(--fw-medium);}
.fw-regular{font-weight:var(--fw-regular);}
.fw-light{font-weight:var(--fw-light);}
.ff-primary{font-family:var(--ff-primary);}
.textUp{text-transform:uppercase;}
.bg-transparent{background-color:transparent;}
/* scrollbar */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #79736F;-webkit-border-radius:10px;border-radius:10px;}
::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:10px;background:#AC6D4A;-webkit-box-shadow:inset 0 0 6px #79736F;}
::-webkit-scrollbar-thumb:window-inactive{background:#AC6D4A;}