@font-face {
	font-family: 'Albertus Nova';
	src: url('fonts/AlbertusNovaBlack.eot');
	src: local('Albertus Nova Black'), local('AlbertusNovaBlack'),
	url('fonts/AlbertusNovaBlack.eot?#iefix') format('embedded-opentype'),
	url('fonts/AlbertusNovaBlack.woff2') format('woff2'),
	url('fonts/AlbertusNovaBlack.woff') format('woff'),
	url('fonts/AlbertusNovaBlack.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'Albertus Nova';
	src: url('fonts/AlbertusNovaLight.eot');
	src: local('Albertus Nova Light'), local('AlbertusNovaLight'),
	url('fonts/AlbertusNovaLight.eot?#iefix') format('embedded-opentype'),
	url('fonts/AlbertusNovaLight.woff2') format('woff2'),
	url('fonts/AlbertusNovaLight.woff') format('woff'),
	url('fonts/AlbertusNovaLight.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Albertus Nova';
	src: url('fonts/AlbertusNovaThin.eot');
	src: local('Albertus Nova Thin'), local('AlbertusNovaThin'),
	url('fonts/AlbertusNovaThin.eot?#iefix') format('embedded-opentype'),
	url('fonts/AlbertusNovaThin.woff2') format('woff2'),
	url('fonts/AlbertusNovaThin.woff') format('woff'),
	url('fonts/AlbertusNovaThin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Albertus Nova';
	src: url('fonts/AlbertusNova.eot');
	src: local('Albertus Nova'), local('AlbertusNova'),
	url('fonts/AlbertusNova.eot?#iefix') format('embedded-opentype'),
	url('fonts/AlbertusNova.woff2') format('woff2'),
	url('fonts/AlbertusNova.woff') format('woff'),
	url('fonts/AlbertusNova.ttf') format('truetype');
	font-weight: normal;
}

@font-face {
	font-family: 'Myriad Pro Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Regular'), url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Condensed';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Condensed'), url('fonts/MYRIADPRO-COND.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Condensed Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Condensed Italic'), url('fonts/MYRIADPRO-CONDIT.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Light';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Light'), url('fonts/MyriadPro-Light.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Semibold';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Semibold'), url('fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Semibold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Semibold Italic'), url('fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Bold Condensed';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Condensed'), url('fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold'), url('fonts/MYRIADPRO-BOLD.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Italic'), url('fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}


@font-face {
	font-family: 'Myriad Pro Bold Condensed Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Myriad Pro Bold Condensed Italic'), url('fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}


body{
	background: url("images/bg.png") no-repeat top center;
	color: #99816e;
	font-family: 'Myriad Pro Regular', sans-serif;
	background-size: cover;
}

.btn-custom {
	background: url("images/join_website.png");
	width: 452px;
	height: 84px;
	color: #0000;
	transition: 0.4s;
	border-radius: 10px;
}

.btn-custom:hover{
	filter: brightness(1.2);
	/* add a shadow */
	box-shadow: 0 2px 10px 0 rgba(134, 58, 58, 0.45);
	color: #0000;
	transform: translateY(-5px);
}

.btn-pres {
	background: url("images/pres.webp");
	width: 452px;
	height: 84px;
	color: #0000;
	transition: 0.4s;
	border-radius: 10px;
}

.btn-pres:hover{
	filter: brightness(1.2);
	/* add a shadow */
	box-shadow: 0 2px 10px 0 rgba(134, 58, 58, 0.45);
	color: #0000;
	transform: translateY(-5px);
}

.features-section .col-md-4 *, .features-section .col-md-4 {
	transition: 0.4s;
}

.features-section .col-md-4:hover{
	transform: translateY(-5px);
}

.features-section .col-md-4:hover .feature-icon{
	filter: brightness(1.2) drop-shadow(0px 0px 6px rgba(186, 152, 91, 0.5));
}

.features-section .col-md-4:hover h3, .features-section .col-md-4:hover p{
	filter: drop-shadow(0px 0px 6px rgba(186, 152, 91, 0.3));
}

.feature-icon {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
}
.prologue-section p{
	text-align: center;
	font-size: 14px;
}

.title-img{
	max-height: 52px;
}

.subtitle{
	font-family: "Albertus Nova", sans-serif;
	font-size: 28px!important;
	color: #ba985b;
}

.features-section p{
	font-family: "Albertus Nova", sans-serif;
	font-size: 14px;
}

.social-section{
	background: url("images/social-bg.png") no-repeat top center;
	background-size: cover;
	width: 100%;
}

.social-icon{
	margin-left: 10px;
	margin-right:10px;
	transition: 0.4s;
}

.social-icon:hover{
	filter: brightness(1.2);
}

.video-container {
	display: block;
	max-width: 800px;
	padding: 20px;
	background: url("images/video-bg.png");
	margin: auto;
	border-radius: 20px;
	opacity: 0.6;
	transition: 0.5s;
}

.video-container:hover{
	opacity: 1;
}

.video {
	max-width: 900px;
}

h1, .h1{
	text-transform: uppercase;
	font-size: 54px;
	font-family: "Albertus Nova", sans-serif;
	background: rgb(212,195,156);
	background: linear-gradient(180deg, #f0dfbe 0%, #aa916b 50%, rgb(89, 52, 15) 100%);
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(2px 2px #402416) drop-shadow(-1px 0px #fbcb7e57) drop-shadow(0px 2px #0000008f);
	text-align: center;
}

a, a h1{
	text-decoration: none;
	transition: 0.4s;
}

a{
	color: #dac698;
}

a:hover{
	color: #f3ddaa;
}

a:hover h1 {
	filter: drop-shadow(2px 2px #402416) drop-shadow(-1px 0px #fbcb7e57) drop-shadow(0px 2px #0000008f) brightness(1.2);
	transform: translateY(-5px);
}

.bold{
	font-weight: 600;
}



@-webkit-keyframes levitate {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes levitate {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.arrow-container{
	margin: auto;
	font-size: 35px;
	-webkit-animation: levitate 1s infinite ease-in-out;
	animation: levitate 1s infinite ease-in-out;
	-webkit-transition: .5s;
	transition: .5s;
}

#animated-arrow {
	color: #ba985b;
}

.outline-button{
	padding: 10px 50px;
	border: 1px solid #764e3c;
	position: fixed;
	top: 30px;
	right: 30px;
	border-radius: 40px;
	text-transform: uppercase;
	color: #f3ddaa;
	font-weight: 600;
	font-family: "Albertus Nova", sans-serif;
	transition: .5s;

}

.outline-button:hover{
	background: #764e3c;
	color: #f8eed9;
}

@media(max-width: 920px){
	.outline-button{
		display:none!important;
	}
}

.main-character{
	animation: levitate 5s infinite ease-in-out;
}
#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1; /* Make sure it doesn't cover other elements */
}

/* Title */

/* Milestone Container with SVG Path */
.milestone-container {
	position: relative;
}

.milestone-container svg {
	position: relative;
	max-width: 100%;
	z-index: 1;
}

.milestone-container path {
	position: relative;
	z-index: 0;
}


.milestone img {
	width: 30px;
	height: 30px;
	margin-bottom: 5px;
}

/* Story Text */
.story {
	margin-top: 20px;
	font-size: 16px;
	color: #dabb8b;
	margin-bottom: 20px;
	font-family: "Albertus Nova", sans-serif;
	min-height: 7em; /* Ensure space for approximately 4-5 lines */
	line-height: 1.5; /* Adjust to control line spacing */
	display: flex;
	align-items: center; /* Centers text vertically if it’s less than 4-5 lines */
	text-align: center;
	justify-content: center;
}

.story p{
	font-size: 16px!important;
}

.milestone-icon {
	cursor: pointer;
}

.milestone-container{
	background: url("images/roadmap/bg.png") no-repeat;
	background-size: contain;
	background-position-y: center;
	background-position-x: -20px;
}

.language-dropdown {
	position: fixed;
	top: 30px;
	left: 30px;
	z-index: 10;
	display: inline-block;
}

.dropdown-toggle {
	background-color: #723e27;
	color: #f8e4c1;
	padding: 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.dropdown-toggle img {
	margin-right: 5px;
	width: 20px;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #723e27;
	border-radius: 5px;
	margin-top: 5px;
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	padding: 5px 0;
	width: 100%;
}

.dropdown-content .dropdown-item {
	color: #f8e4c1;
	padding: 10px;
	display: flex;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
}

.dropdown-content .dropdown-item img {
	margin-right: 5px;
	width: 20px;
}

.dropdown-content .dropdown-item:hover {
	background-color: #38190f;
}

.language-dropdown:hover .dropdown-content {
	display: block;
}