@import url("https://fonts.googleapis.com/css2?family=Asul:wght@400;700&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
	scroll-behavior: smooth;
	/* outline: 1px dotted red; */
	font-style: normal;
}

html,
body {
	height: 100%;
	width: 100%;
	font-size: 16px;
}

:root {
	--black: #141414;
	--green: #576238;
	--white: #f0eadc;
	--p: 5vw;
	--p-side: 10vw;
	--heading-size: 8rem;
	--sub-heading-size: 1.5rem;
	--para-size: 1rem;
	--nav-size: 1.2rem;
	--icon-size: 1.5rem;
	--heading-font: "windhavi", sans-serif;
	--para-font: "Asul", sans-serif;
}

@font-face {
	font-family: "windhavi";
	src: url("../assets/fonts/Windhavi.woff");
}

*::selection {
	background-color: var(--green);
}

a::selection {
	background-color: var(--white);
}

.b-bg {
	background-color: var(--black);
}

.w-t {
	color: var(--white);
}

.g-t {
	color: var(--green);
}

.f-s {
	height: 100dvh;
	width: 100%;
	padding: var(--p) var(--p-side);
	overflow: hidden;
}

.about {
	height: 110dvh;
}

.dfac {
	display: flex;
	align-items: center;
}

.fcsb {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.loader {
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.counter {
	font-size: var(--heading-size);
	font-family: var(--heading-font);
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--white);
	cursor: default;
}

.hero {
	text-align: center;
}

.heading {
	font-size: var(--heading-size);
	font-family: var(--heading-font);
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1;
	color: var(--white);
	cursor: default;
}

.sub-heading {
	font-size: var(--sub-heading-size);
	font-family: var(--heading-font);
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1;
	color: var(--white);
	cursor: default;
}

.para {
	font-family: var(--para-font);
	font-size: var(--para-size);
	font-weight: normal;
	margin-top: var(--p);
	line-height: 1.5;
	color: var(--white);
}

.hero .para {
	width: 80%;
	margin: 0;
	text-transform: capitalize;
}

.cta {
	width: fit-content;
	padding: 1vw var(--p);
	font-size: var(--para-size);
	font-family: var(--para-font);
	font-weight: normal;
	line-height: 1;
	text-transform: capitalize;
	border: 2px solid var(--green);
	color: var(--white);
	background-color: var(--black);
	cursor: pointer;
}

.tabs .cta {
	width: 100%;
	border: none;
}

.cta:hover {
	background-color: var(--green);
}

.icons {
	justify-content: center;
  flex-wrap: wrap;
	gap: var(--p);
}

.icon {
	font-size: var(--icon-size);
	color: var(--white);
	cursor: pointer;
}

.boxed-icon {
	height: var(--p);
	aspect-ratio: 1/1;
	justify-content: center;
	font-size: var(--icon-size);
	border: 2px solid var(--green);
	color: var(--white);
	cursor: pointer;
}

.boxed-icon:hover {
	background-color: var(--green);
}

.about .icons {
	margin-top: var(--para-size);
	justify-content: space-between;
}

.about .icon {
	font-size: calc(var(--icon-size) + 0.5rem);
	background-color: var(--green);
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--p);
}

.footer > .para {
	text-align: center;
}

.para > a:hover {
	text-decoration: underline;
}