@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-family: "Inter", sans-serif; */

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-size: var(--fs-sixteen);
	color: var(--white);
	font-family: var(--font-family-inter);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	background-color: var(--white);
}

.container {
	max-width: 1550px;
	margin: 0px auto;
	padding: 0 50px;
	width: 100%;
}

:root {
	/**** colors ****/
	--white: #FFFFFF;
	--black: #000000;
	--gold: #A7955A;
	--gray: #6E6E6E;
	--bg-black: #1F1F1F;

	/*** font family ***/
	--font-family-inter: "Inter", sans-serif;

	/***** font size*******/
	--fs-sixty: 60px;
	--fs-thirty-two: 32px;
	--fs-twenty-six: 26px;
	--fs-twenty: 20px;
	--fs-twenty-four: 24px;
	--fs-eighteen: 18px;
	--fs-sixteen: 16px;

	/********* lineheight ***********/
	--lh-sixty: 121.67%;
	--lh-thirty-two: 121.88%;
	--lh-twenty-six: 119.23%;
	--lh-twenty: 120%;
	--lh-twenty-four: 120.83%;
	--lh-eighteen: 122.22%;
	--lh-sixteen: 118.75%;

	/***** font-weights ******/
	--fw-thin: 100;
	--fw-extra-light: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi-bold: 600;
	--fw-bold: 700;
	--fw-extra-bold: 800;
	--fw-black: 900;

	/************* transtition *************/
	--transition: all 0.4s ease-in-out;

	/*********** border-radius *************/
	--br-five: 5px;

	/************** shadows*************/
	--box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.45);
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
	display: inline-flex;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	user-select: none;
	width: auto;
	border: none;
}

/****************** Buttons *********************/

.btn {
	color: var(--gold);
	background-color: var(--white);
	font-size: var(--fs-twenty);
	font-weight: var(--fw-medium);
	line-height: var(--lh-twenty);
	font-family: var(--font-family-inter);
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	border: 1px solid var(--white);
	border-radius: var(--br-five);
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: var(--transition);
}

.btn:hover,
.btn:active,
.btn:focus {
	background: var(--gold);
	color: var(--black);
	border-color: var(--gold);
}

.gold_btn {
	color: var(--black);
	background-color: var(--gold);
	box-shadow: var(--box-shadow);
	border-color: var(--gold);
}

.gold_btn:hover,
.gold_btn:active,
.gold_btn:focus {
	color: var(--gold);
	background-color: var(--white);
	border-color: var(--white);
}


/******************** Main Typhography ************************/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-inter);
	font-style: normal;
	color: var(--black);
}

h1,
.title_h1 {
	font-size: var(--font_thirty);
	font-weight: var(--fw_medium);
	line-height: var(--lh_thirty_seven);
}

h2,
.title_h2 {
	font-size: var(--font_thirty);
	font-weight: var(--fw_bold);
	line-height: var(--lh_thirty_seven);
	color: var(--white);
}

h3,
.title_h3 {
	font-size: var(--font_twenty_four);
	line-height: var(--lh_twenty_nine);
	font-weight: var(--fw_bold);
}

h4,
.title_h4 {
	font-size: var(--font_twenty);
	line-height: var(--lh_twenty_three);
	font-weight: var(--fw_bold);
}

h5,
.title_h5 {
	font-size: var(--font_sixteen);
	line-height: var(--lh_eighteen);
	font-weight: var(--fw_bold);
	color: var(--white);
}

p,
li {
	font-size: var(--font_fourteen);
	font-weight: var(--fw_regular);
	line-height: var(--lh_sixteen);
	font-family: var(--font-family-inter);
}

p {
	color: var(--white);
}

.sixteen_p p {
	font-size: var(--font_sixteen);
	line-height: var(--lh_twenty);
}

.twelve_p p {
	font-size: var(--font_twelve);
	line-height: var(--lh_sixteen);
	font-weight: var(--fw_regular);
}