body {
	margin: 0 auto;
	padding: 0px;
	font-family: arial;
}

/* Define Custom Colors using CSS Variables */
:root {
	--primary-blue: #07686c; /* Dark Blue */
	--accent-cyan: #e29578;  /* Bright Cyan */
	--font-family: 'Inter', sans-serif;
}

.form-control:disabled,
.input-group-text,
.form-control[readonly] {
	background-color: #fcf5f3 !important;
	border-color: #e5d7d3;
	color: #6c757d;
}


/* Default navbar state */
#mainNav {
	position: relative;
	transition: all 0.3s ease;
	z-index: 999;
}

/* When scrolling down */
#mainNav.nav-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	animation: slideDown 0.3s ease;
}

/* Slide animation */
@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}


.navbar-brand img {
	height: 65px;
}

/* Custom button color */
.btn-brand {
	background-color: #017273;
	border-color: #017273;
	color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
	background-color: #015e60;
	border-color: #015e60;
	color: #fff;
}

.btn-outline-brand {
	color: #017273;
	border-color: #017273;
}

.btn-outline-brand:hover {
	background-color: #017273;
	color: #fff;
}

.top_menus {
	position: relative;
	width: 100%;
	min-height: 30px;
	background: #E29578;
}
.slider-main {
	position: relative;
	padding: 50px 0px;
	width: 100%;
	min-height: 690px;
	background: #036A6D url('../img/Jan 7, 2026, 05_46_47 PM.jpg');
	background-repeat: no-repeat;
	background-size: cover; 
}

.slider-main h1 {
	font-weight: 800;
	font-size: 65px;
	margin-top: 60px;
	color: #E29578;
}

.slider-main p {
	font-weight: 500; 
	margin-top: 40px;
	color: #fff;
}
.navbar-nav {
	position: sticky;
}
.navbar-nav .nav-link {
	text-transform: uppercase;
	font-weight: 600;
}
.navbar-nav .active {
	color: #E29578 !important;
}


.exchange-box {
	max-width: 520px;
	margin: 40px auto;
	margin-top: 60px;
	border: 4px solid #e29578 !important;
	border-radius: 14px;
}

.flag {
	font-size: 22px;
}
.rate-text {
	font-size: 0.9rem;
	color: #6c757d;
}

#exchange_box button {
	background: #E29578;
	color: #000;
}

.btn-readmore {
	position: relative;
	display: inline-block;
	padding: 0px 20px;
	background: #fff;
	color: #036A6D;
	line-height: 45px;
	font-size: 22px;
	text-decoration: none;
	margin-top: 20px;
	border: 2px solid #fff;
	margin-right: 10px;
	transition: all 0.2s linear;
	-webkit-border-radius: 5em;
	-moz-border-radius: 5em;
	-ms-border-radius: 5em;
	-o-border-radius: 5em;
}
.btn-readmore2 {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.btn-readmore:hover,
.btn-readmore:focus,
.btn-readmore:active {
	background: transparent;
	color: #fff !important;
} 

.btn-readmore2:hover,
.btn-readmore2:focus,
.btn-readmore2:active {
	background: #fff;
	color: #036A6D !important;
}

.about-section {
	background: #e29578;
}

.about-section h2 {
	font-weight: 700;
	color: #07686c;
	font-size: 48px;
}

.about-section p {
	line-height: 1.7;
	color: #000;
}

.about-image img {
	object-fit: cover;
}

/* Utility Classes for Custom Colors */
.bg-primary-blue {
	background-color: var(--primary-blue) !important;
}
.text-primary-blue {
	color: var(--primary-blue) !important;
}
.bg-accent-cyan {
	background-color: var(--accent-cyan) !important;
}
.text-accent-cyan {
	color: var(--accent-cyan) !important;
}

.btn-primary-blue {
	background-color: var(--primary-blue);
	border-color: var(--primary-blue);
	color: #ffffff;
	box-shadow: 0 4px 6px rgba(18, 87, 164, 0.2);
	transition: all 0.3s;
}
.btn-primary-blue:hover {
	background-color: #07686c; /* Slightly darker hover */
	border-color: #07686c;
	box-shadow: 0 6px 10px rgba(18, 87, 164, 0.3);
}

.btn-accent-cyan {
	background-color: var(--accent-cyan);
	border-color: var(--accent-cyan);
	color: var(--primary-blue); /* Dark text on light button */
	font-weight: 600;
	box-shadow: 0 4px 6px rgba(101, 205, 245, 0.4);
	transition: all 0.3s;
}
.btn-accent-cyan:hover {
	background-color: #e29578; /* Slightly darker hover */
	border-color: #e29578;
}

.card {
	border-radius: 1rem; /* Rounded corners for modern look */
	border: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Styling for the main balance card */
.balance-card {
	background: linear-gradient(135deg, var(--primary-blue) 0%, #098d91 100%);
	color: white;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 8px 20px rgba(18, 87, 164, 0.4);
}

/* Fixed Bottom Navigation Bar */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 65px;
	background-color: #ffffff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: 1000;
}
.bottom-nav-item {
	color: #afafaf;
	transition: color 0.2s;
}
.bottom-nav-item.active {
	color: var(--primary-blue);
	font-weight: 600;
}

.bottom-nav-item:hover, 
.bottom-nav-item:focus, 
.bottom-nav-item:active {
	color: #fd7440;
}

.login_admin {
	position: relative;
	width: 100%;
	min-height: 300px;
	background: #fbf2ef;
	margin: 100px auto;
	padding: 20px;
}
 
.login_admin .input-group {
	margin-bottom: 12px;
	background: #fff;
}

.btn-primary {
	background: #036A6D !important;
	border-color: #036A6D !important;
}

.card-empty {
	width: 300px;
	max-width: 100%;
	min-height: 100px;
	background: #fbf1ee;
	margin: 0 auto;
	border-radius: 0.5em;
	border: solid 1px #e29578;
	padding: 20px;
	text-align: center;
	margin: 10px auto;
}
.card-empty i {
	font-size: 67px;
	color: #e29578;
}

.wrapped_content_log h3 {
	font-weight: 800;
	font-size: 45px;
	color: #08686b;
}

#btcExchangeModal .modal-header {
	background: #0a686c;
	color: #fff;
}
#btcExchangeModal .btn-close {
	filter: invert(1);
	opacity: 1;
}

#buyContinueBtn {
	background: #0a686c;
	color: #fff;
}

#sellContinueBtn {
	background: #fd7440;
	color: #fff;
}


.profile-modal {
	border-radius: 14px;
}

.profile-header {
	background: #f8f9fa;
	border-bottom: 1px solid #eee;
}

.profile-avatar {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #e29578;
	color: #fff; 
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

.profile-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	height: 100%;
}

.section-title {
	font-size: 13px;
	text-transform: uppercase;
	color: #6c757d;
	margin-bottom: 15px;
	font-weight: 600;
}

.info-box {
	background: #f9fafb;
	border-radius: 10px;
	padding: 12px 15px;
}

.info-box span {
	display: block;
	font-size: 12px;
	color: #6c757d;
}

.info-box strong {
	font-size: 14px;
	color: #212529;
}




































.scroll-top-btn {
	position: fixed;
	bottom: 80px;
	right: 25px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: #fd7440; /* brand color */
	color: #fff;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.scroll-top-btn:hover {
	background: #016469;
	transform: translateY(0);
}

.scroll-top-btn.show {
	opacity: 1;
	visibility: visible;
}



.how_it_works {
	position: relative;
	width: 100%;
	min-height: 200px;
	padding: 80px 0px;
	text-align: center;
}
.how_it_works h2 {
	font-weight: 700;
	margin-bottom: 21px;
	color: #e29578;
}

.block_howwrork {
	position: relative;
	width: 100%;
	min-height: 200px;
	background: #f3f3f3;
	padding: 20px;
	text-align: center;
	margin-bottom: 21px;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
}
.block_howwrork h4 {
	font-weight: 800;
	margin-bottom: 12px;
	color: #e29578;
}
.icon_works {
	position: relative;
	width: 100px;
	height: 100px;
	background: #07686c;
	margin: 0 auto;
	margin-bottom: 20px;
	overflow: hidden;
	-webkit-border-radius: 5em;
	-moz-border-radius: 5em;
	-o-border-radius: 5em;
	-ms-border-radius: 5em;
}

.icon_works img {
	position: relative;
	width: 100px;
	height: 100px;
	display: block;
	object-fit: contain;
	object-position: center;
}
.whyle_folkoin {
	position: relative;
	width: 100%;
	min-height: 300px;
	padding: 0px;
	background: red url('../img/Jan 7, 2026, 05_46_47 PM.jpg')no-repeat center 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
}
.whyle_folkoin .container-fluid {
	padding-left: 0px;
}
.block_why {
	position: relative;
	color: #fff;
	width: 80%;
	margin: 0 auto;
	height: auto;
	padding: 50px 0px;
}
.block_why h1  {
	position: relative;
	color: #fff;
	font-weight: bolder;
	margin-bottom: 21px;
}
 
.block_why ul {
	padding: 0px 40px;
	display: block;

}
.block_why ul li {
	list-style-type: none;
	list-style-image: url('../img/like-icon.svg');
}
.block_why b {
	color: #1a7ee8;
}

.whyle_folkoin {
	position: relative;
	width: 100%;
	min-height: 600px;
	padding: 0px;
	background: #07686c;
}
.whyle_folkoin .container-fluid {
	padding-left: 0px;
}
.block_why {
	position: relative;
	color: #fff;
	width: 80%;
	margin: 0 auto;
	height: auto;
	padding: 50px 0px;
}
.block_why h1  {
	position: relative;
	color: #fff;
	font-weight: bolder;
	margin-bottom: 21px;
}
.whyle_folkoin .container-fluid div.col-sm-6:nth-child(2) {
	background: #07686c url('../img/bg-quote.jpg');
	min-height: 600px;
	background-repeat: no-repeat;
	background-size: cover;
}
.block_why ul {
	padding: 0px 40px;
	display: block;

}
.block_why ul li {
	list-style-type: none;
	list-style-image: url('../img/like-icon.svg');
}
.block_why b {
	color: #e29578;
}
.cusotermer_review {
	position: relative;
	width: 100%;
	min-height: 400px;
	padding: 80px 0px;
	background: #fff;
}
.sliders_costomer .item {
	position: relative;
	width: 100%;
	min-height: 200px;
	padding: 20px;
	text-align: center;
	border: 4px solid #f3f3f3;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
}
.cusotermer_review h4 {
	text-transform: uppercase !important;
	color: #666;
	font-size: 16px;
}
.cusotermer_review h2 {
	font-weight: 800;
	color: #e29578;
}
.sliders_costomer .item p {
	margin-bottom: 21px;
	position: relative;
	display: block;
}
.sliders_costomer .item p:after {
	position: absolute;
	display: block;
	width: 100px;
	height: 1px;
	background: #9f9f9f;
	content: '';
	bottom: -10px;
	left: 0px;
	right: 0px;
	margin: 0 auto;
}
.quotte_icons {
	position: relative;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	margin-bottom: 21px;
}
.quotte_icons img {
	display: block;
	object-fit: contain;
	object-position: center;
	width: 50px;
	height: 50px;
	pointer-events: none;
}
.testi_profile {
	position: relative;
	width: 50px;
	height: 50px;
	background: #f3f3f3;
	margin: 0 auto;
	overflow: hidden;
	-webkit-border-radius: 5em;
	-moz-border-radius: 5em;
	-ms-border-radius: 5em;
	-o-border-radius: 5em;
}
.testi_profile img {
	display: block;
	object-fit: contain;
	object-position: center;
	width: 50px;
	height: 50px;
	pointer-events: none;
}

.coming_soon_app {
	position: relative;
	width: 100%;
	min-height: 200px;
	background: #e29578;
	padding: 40px 0px;
}
.coming_soon_app i {
	font-size: 85px;
	display: inline-block;
	padding: 0px 30px;
}
.coming_soon_app h4 {
	font-weight: 700;
}
.app_imgs {
	position: relative;
	width: 100%;
	height: auto;
	padding: 30px 0px;
	text-align: center;
}
.app_imgs img {
	position: relative;
	width: 150px;
}

.login__pg {
	position: relative;
	width: 100%;
	min-height: 56vh;
	background: #ffebe3;
	padding: 100px 0px;
}
.login__form_pg {
	width: 100%;
	min-height: 400px;
	padding: 30px;
	background: #fff;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
}
.login__form_pg h3 {
	font-weight: 1000;
	color: #dd8361;
}
.login__form_pg .input-group {
	background: #fff;
	margin-bottom: 21px;
}
.login__form_pg .input-group-addon {
	width: 40px;
	text-align: center;
}
.login__form_pg .input-group-addon, .form-control {
	border: 0px;
	border-bottom: 2px solid #1257a4;
}
 .form-control:focus {
	 -webkit-box-shadow: none;
 }
.bottom_log_page {
	position: absolute;
	bottom: 0px;

}
.login__form_pg a {
	color: #000 !important;
}
.login__form_pg button {
	display: inline-block;
	line-height: 40px;
	width: 48%;
	background: #dd8361;
	color: #fff;
	border: 0px;
	border: 2px solid #dd8361;
	margin-top: 21px;
	-webkit-transition: all 0.2s linear;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
}
.login__form_pg button:hover {
	background: #fff;
	color: #dd8361 !important;
	border: 0px;
	border: 2px solid #dd8361;
}
.login__form_pg a.sign_upLink {
	background: #fff;
	border: 2px solid #dd8361;
	color: #dd8361;
	display: inline-block;
	line-height: 40px;
	width: 48%;
	margin-top: 21px;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-webkit-transition: all 0.2s linear;
}
.login__form_pg a.sign_upLink:hover  {
	background: #dd8361;
	border: 2px solid #dd8361;
	color: #fff !important;
} 

.animating-box {
	position: relative;
	width: 100%;
	min-height: 250px;
}

#typing-text::after {
	content: "|";
	margin-left: 6px;
	animation: blink 1s infinite;
}

@keyframes blink {
	0%, 50%, 100% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
}


.crypto-alert {
	background: linear-gradient(135deg, #e29578, #c0392b);
	color: #fff;
	border: none;
	border-radius: 0px;
	padding: 1rem 1.25rem;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0px;
}

.bi-currency-bitcoin {
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 1px solid #fff;
	border-radius: 50px;
	text-align: center;
}

.crypto-alert strong {
	color: #fff;
	font-weight: 700;
}

.crypto-alert .bi {
	font-size: 1.3rem;
}

.crypto-alert .btn-close {
	filter: invert(1);
	opacity: 0.8;
}

.crypto-alert .btn-close:hover {
	opacity: 1;
}



.footer {
	position: relative;
	width: 100%;
	background: #07686c;
	min-height: 200px;
	padding: 40px 0px 20px 0px;
}

.wrap_btm_menu {
	display: block;
	border-left: 1px solid #fff;
	color: #fff;
	padding-left: 10px;
}
.footer label {
	color: #fff;
	text-transform: uppercase;
}
.footer .form-control {
	background: transparent;
	color: #fff;
	font-weight: 400;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
}
.footer .form-control:placeholder {
	color: #f3f3f3;
}
.footer button:focus,
.footer .form-control:focus {
	-webkit-box-shadow: none;
	border-color: #fff;
}
.footer .form-control {
	-webkit-box-shadow: none;
	border: 1px solid #fff;
}
.footer button {
	-webkit-box-shadow: none;
	border: 0px;
	color: #000;
	background: #fff;
	font-weight: bold;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
}
.footer button:hover {
	color: #000;
	background: #fff;
}
.wrap_btm_menu h4 {
	font-size: 16px;
	text-transform: uppercase;
}
.footer ul {
	padding: 0px;
}
.footer ul li {
	list-style-type: none;
	font-size: 12px;
}

.footer ul li a {
	color: #fff !important;
	line-height: 38px;
	font-size: 20px;
}
.footer ul li a i {
	background: #fff;
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	margin-right: 6px;
	font-weight: bolder;
	color: #000 !important;
	-webkit-border-radius: 5em;
	-moz-border-radius: 5em;
	-ms-border-radius: 5em;
	-o-border-radius: 5em;

}

.footer-bottom {
	position: relative;
	width: 100%;
	min-height: 50px;
	background: #000;
	color: #fff;
	text-align: center;
	padding: 20px;
}
.footer-bottom a {
	color: #fff;
	display: inline-block;
	padding: 0px 10px 0px 10px;
	border: 1px solid #fff;
	font-size: 12px;
	line-height: 25px;
	margin-left: 12px;
	-webkit-border-radius: 5em;
	-moz-border-radius: 5em;
	-ms-border-radius: 5em;
	-o-border-radius: 5em;
}


@media (min-width: 992px) {
	.navbar-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (max-width: 991px) {
	.navbar-center {
		position: static;
		transform: none;
	}
}