@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@200;300;400;500;600;700;800;900&family=Anuphan:wght@300;400;600&family=Heebo:wght@100;400;500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:wght@400;500&family=Rubik:wght@300&display=swap");

.body {
	background-color: white !important;
}

.nav-item {
	font-weight: 600;
	margin-bottom: 20px;
	font-family: "Albert Sans", sans-serif !important;
}
@media screen and (min-width: 1027px) {
	.nav-item {
		font-size: 16px;
	}
}
@media screen and (max-width: 1027px) {
	.nav-item {
		font-size: 14px;
	}
}

.nav-item a {
	padding: 2px 10px !important;
	color: #202020;
	cursor: pointer;
}

.nav-item a:hover {
	color: #216961;
	background-color: rgba(245, 248, 250, 0.8) !important;
}

.dropdown {
	color: rgb(0, 0, 0) !important;
	font-size: 16px;
	z-index: 99;
}

.dropdown-item {
	color: rgb(0, 0, 0) !important;
	font-size: 16px;
}

.active {
	color: #216961 !important;
	background-color: rgba(245, 248, 250, 0.8) !important;
}

.profile-card {
	position: relative;
}

.profile-card .card-body__custom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.profile-card__title {
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	color: white !important;
	font-family: "Albert Sans", sans-serif !important;
}

.profile-card__text {
	font-size: 50px;
	font-weight: 700;
	text-align: center;
	color: white !important;
	font-family: "Albert Sans", sans-serif !important;
}

.btn:not(.card-btn, .change-btn) {
	transition: transform 0.3s !important;
}

.btn:not(.card-btn, .change-btn):hover {
	transform: scale(1.03);
}

.card-btn {
	background-color: #e8fff3 !important;
	transition: background-color 0.5s !important;
}

.card-btn:hover,
.card-btn:focus {
	background-color: #e8431f !important;
}

.toolbar {
	background-color: #f7f7f7;
}

.main__card {
	position: relative;
}

.main__card-body {
	position: absolute;
}

.fa-image {
	font-size: 2.25rem !important;
}

.footer__text {
	font-size: 15px;
	font-family: "Albert Sans", sans-serif !important;
	font-weight: 500;
	color: #575757;
	text-align: center;
}

.footer__text a {
	color: black;
	text-decoration: none !important;
	font-weight: 700;
}

.dropdown-menu-container {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 105;
	/* Same z-index as before */
	/* Add any other styling you want for the dropdown menu container */
}

/* Optional: Add a class to hide the dropdown menu */
.dropdown-menu-hidden {
	display: none;
}

.menu-sub-dropdown {
	position: absolute;
	z-index: 105;
	inset: 45px -5px auto auto;
	margin: 0;
}

.nested-dropdown {
	z-index: 106;
	position: absolute;
	inset: 140px 270px auto auto;
	margin: 0;
}

#picture__input {
	display: none;
}

.picture {
	aspect-ratio: 1/1;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #afafaf;
	border: 2px dashed currentcolor;
	cursor: pointer;
	font-family: sans-serif;
	transition: color 300ms ease-in-out, background 300ms ease-in-out;
	outline: none;
	overflow: hidden;
}

.picture:hover {
	color: #777;
	background: #dedede;
}

.picture:active {
	border-color: turquoise;
	color: turquoise;
	background: #eee;
}

.picture:focus {
	color: #777;
	background: #dedede;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.picture__img {
	max-width: 100%;
}

#editModal .modal-content .modal-body .col-md-6 {
	text-align: left !important;
}

.Goodup-price-wrap {
	padding: 40px;
	margin-bottom: 30px;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 8px 16px rgb(146 152 198 / 8%);
	transition: 0.3s;
	text-align: left;
	position: relative;
	z-index: 1;
}

.Goodup-price-body {
	margin: 1rem 0;
	border-top: 1px solid #efeff4;
	padding: 1rem 0;
}

.memberBtnbronze {
	background: #964b00;
	border: 2px solid #964b00;
}

.Goodup-price-currency .Goodup-new-price {
	font-size: 15px;
	font-weight: 500;
}

.Goodup-price-currency .Goodup-new-price {
	margin-right: 15px;
}

.theme-cl {
	color: #f41b3b !important;
}

.Goodup-price-subtitle {
	font-size: 16px;
	color: #333c56;
}

/* Add a custom CSS class for the fade-in effect */
.fade-in {
	opacity: 0;
	animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media screen and (max-width: 576px) {
	.offcanvas {
		width: 70% !important;
	}
}

.illustration-holder .main-illustration {
	max-width: 45%;
}

.illustration-holder .bg-shape {
	right: 0;
	top: 58px;
}

.illustration-holder .shape-one {
	top: 37%;
	right: 22.7%;
	width: 2.25%;
	animation: jumpTwo 7s infinite linear;
}
.hero-banner-one .illustration-holder .shape-two {
	top: 35%;
	right: 6%;
	width: 2.72%;
	animation: jumpThree 7s infinite linear;
}

.hero-banner-one .illustration-holder .shape-three {
	top: 74%;
	right: 31.7%;
	width: 1.52%;
	animation: jumpFour 4s infinite linear;
}