:root {
	/* For Colors =========*/
	--bg-peach: #dbd3c3;
	--bg-skin: #e6dcd0;
	/* --bg-brown: #5e3e12; */
	--bg-brown: #5d2e14;
	--bg-darkbrown: #5d2e14;
	--bg-orange: #d6712e;
	--color-peach: #dbd3c3;
	--color-muted: #b9a98b;
	/* --color-brown: #5e3e12; */
	--color-brown: #5d2e14;
	--color-orange: #d6712e;
	/* For Size ==========*/
	--size-font-h0: 94px;
	--size-font-h1: 64px;
	--size-font-h2: 48px;
	--size-font-p1: 18px;
	--size-font-p2: 18px;
	--size-font-p3: 16px;
	--size-font-btn: 18px;
}

* {
	scroll-behavior: smooth;
}

/* Extra small devices (portrait phones, less than 576px) */
/* Font family & Weight================*/
@font-face {
	font-family: coolkids;
	src: url("../fonts/CoolkidsPersonalUse.ttf");
}
@font-face {
	font-family: chivo-r;
	src: url("../fonts/Chivo-Regular.ttf");
}
@font-face {
	font-family: chivo-b;
	src: url("../fonts/Chivo-Bold.ttf");
}
@font-face {
	font-family: anton-r;
	src: url("../fonts/Anton-Regular.ttf");
}

.coolkids {
	font-family: coolkids !important;
}
.chivo-r {
	font-family: chivo-r !important;
}
.chivo-b {
	font-family: chivo-b !important;
}
.anton-r {
	font-family: anton-r !important;
}

body {
	font-family: "chivo-r";
}

h1,
.h_0,
.h_1 {
	font-family: "coolkids";
}

button,
h2,
.h_2 {
	font-family: "anton-r", sans-serif;
}

p,
a,
.p_1 {
	font-family: "anton-r";
}

.p_2 {
	font-family: "chivo-b";
}
.p_3 {
	font-family: "chivo-r";
}

.p_btn {
	font-family: "anton-r";
	border-radius: 0px;
}

/* Heading Sizes =========================*/
.h_0 {
	font-size: var(--size-font-h0);
}
.h_1 {
	font-size: var(--size-font-h1);
}
.h_2 {
	font-size: var(--size-font-h2);
}
/* Paragraph sizes =====================*/
.p_1 {
	font-size: var(--size-font-p1);
}
.p_2 {
	font-size: var(--size-font-p2);
}
.p_3 {
	font-size: var(--size-font-p3);
}
.p_4 {
	font-size: 24px;
}
.p_btn {
	font-size: var(--size-font-btn);
}

/* Font color =======================*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
	color: var(--color-brown);
}
li{
	color: var(--color-brown);
}
/* backgrounds Color ==============*/
.bg_brown {
	background-color: var(--bg-brown);
}
.bg_orange {
	background-color: var(--bg-orange);
}
.bg_peach {
	background-color: var(--bg-peach);
}
.bg_skin {
	background-color: var(--bg-skin);
}
.bg_dbrown {
	background-color: var(--bg-darkbrown);
}
.bg_transparent {
	background-color: transparent;
}

/* font color =====================*/
.clr_brown {
	color: var(--color-brown);
}
.clr_orange {
	color: var(--color-orange);
}
.clr_peach {
	color: var(--color-peach);
}
.clr_white {
	color: white;
}
.clr_muted {
	color: var(--color-muted);
}

.border-orange {
	border: 2px solid var(--color-orange);
	border-radius: 0px;
}

.py-10 {
	padding: 6rem 0;
}
.pt-10 {
	padding-top: 6rem;
}
.mt-10 {
	margin-top: 6rem;
}
.pb-10 {
	padding-bottom: 6rem;
}
.pr-10 {
	padding-right: 6rem;
}
.pl-10 {
	padding-left: 6rem;
}
.p_80 {
	padding: 80px 0;
}
.p_50 {
	padding: 50px 0;
}
.m_50 {
	margin: 50px auto;
}
.line_height {
	line-height: 40px;
}

/* Smallest devices (landscape phones, 320px and up)*/
@media (min-width: 320px) {
	:root {
		/* For Size ==========*/
		--size-font-h0: 40px;
		--size-font-h1: 28px;
		--size-font-h2: 22px;
		--size-font-p1: 16px;
		--size-font-btn: 20px;
	}

	.m_100 {
		margin: 25px auto;
	}
	.p_150 {
		padding: 50px 0;
	}
	.m_150 {
		margin: 50px auto;
	}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	:root {
		/* For Size ==========*/
		--size-font-h0: 80px;
		--size-font-h1: 36px;
		--size-font-h2: 24px;
		--size-font-p1: 16px;
		--size-font-btn: 20px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	:root {
		/* For Size ==========*/
		--size-font-h0: 80px;
		--size-font-h1: 36px;
		--size-font-h2: 24px;
		--size-font-p1: 16px;
		--size-font-btn: 20px;
	}

	.py-md-10 {
		padding: 6rem 0;
	}
	.pr-md-10 {
		padding-right: 6rem;
	}

	.w-md-50 {
		width: 50% !important;
	}

	.w-md-100 {
		width: 100% !important;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	:root {
		/* For Size ==========*/
		--size-font-h0: 80px;
		--size-font-h1: 36px;
		--size-font-h2: 24px;
		--size-font-p1: 16px;
		--size-font-btn: 20px;
	}
	.m_100 {
		margin: 100px auto;
	}
	.p_150 {
		padding: 150px 0;
	}
	.bg_darkBlues-full {
		background-color: transparent;
	}
	.m_150 {
		margin: 150px auto;
	}

	.pt-lg-10 {
		padding-top: 6rem;
	}
	.mt-lg-10 {
		margin-top: 6rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	:root {
		/* For Size ==========*/
		--size-font-h0: 94px;
		--size-font-h1: 64px;
		--size-font-h2: 48px;
		--size-font-p1: 18px;
		--size-font-p2: 18px;
		--size-font-p3: 16px;
		--size-font-btn: 18px;
	}
}

/* XX large devices (HD desktops, 1440px and up) */
@media (min-width: 1500px) {
	.container_large {
		max-width: 1440px !important;
		margin: auto;
	}
}

/* ::-webkit-input-placeholder,
::placeholder {
	font-size: 13px;
	opacity: 0.1;
	color: #dadada;
} */
.btn-outline-warning:hover {
    color: #212529;
    background-color: #d6712e !important;
    border-color: #d6712e !important;
}