@import url('dev-a.css');
@import url('dev-b.css');

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root{
	--main-bg: #FAFAFA;
	--white: #FFFFFF;
	--grey-50: #F2F2F2;
	--grey-100: #E6E6E6;
	--grey-500: #A6A6A6;
	--black-500: #151515;
	--black-700: #4D4D4D;
	--black-800: #333333;

	--gap-10: 10px;
	--gap-20: 20px;
	--gap-24: 24px;
	--gap-30: 30px;

	--radius-24: 24px;

	--container-padding: 50px;
	--row-max-width: 1716px;

	--h1-font-size: 60px;
    --h2-font-size: 60px;
    --h3-font-size: 42px;
    --h4-font-size: 34px;
    --h5-font-size: 28px;
    --h5-font-size: 24px;

    --p-font-size: 16px;

}

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

body{
	background-color: var(--main-bg);
	font-family: "Nunito Sans", sans-serif;

}

.container{
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.row{
	max-width: var(--row-max-width);
	width: 100%;
}

h1{
	font-size: var(--h1-font-size);
	font-weight: 600;
}
h2{
	font-size: var(--h2-font-size);
	font-weight: 600;
}
h3{
	font-size: var(--h3-font-size);
	font-weight: 600;
}
h4{
	font-size: var(--h4-font-size);
	font-weight: 600;
}
h5{
	font-size: var(--h5-font-size);
	font-weight: 600;
}
h6{
	font-size: var(--h6-font-size);
	font-weight: 600;
}
p{
	font-size: var(--p-font-size);
	line-height: 1.5em;
}
a{
	color: var(--black-500);
	text-decoration: none;
}

.text-sb{
	font-size: 16px;
	font-weight: 600;
}
.text-rg{
	font-size: 14px;
	font-weight: 400;
}


.grid{
	display: grid;
}
.flex{
	display: flex;
	flex-direction: column;
}
.gap-20{
	gap: var(--gap-30);
}


.btn{
	padding:12px 24px;
	border-radius:12px;
	text-align:center;
	cursor: pointer;
	min-width: 50px;
	color: var(--black-500);
	border: 1px solid var(--black-500);
	transition: all 0.3s ease;
	width: max-content;
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
}
.btn:hover{
	background-color: var(--grey-100);
}
.btn_black{
	background-color: var(--black-800);
	color: var(--white);
}
.btn_black:hover{
	background-color: var(--black-500);
}
.btn_full-width{
	width: 100%;
	justify-content: center;
}






@media (max-width: 768px) {
:root{
	--container-padding: 12px;
}
}