:root {
	--primary-color: #634121; /* warna dasar sesuai permintaan */
	--secondary-color: #8a623f; /* opsional, gradasi / hover / gelap */
	--light-color: #e8dccf; /* opsional, background ringan */
}

* {
	scroll-behavior: smooth;
}

a {
	color: var(--primary-color);
}
a:hover {
	color: var(--secondary-color);
	text-decoration: none;
}

.my-bg-primary {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}
.my-bg-secondary {
	background-color: var(--secondary-color) !important;
	color: #fff !important;
}

.my-color-primary {
	color: var(--primary-color) !important;
}
.my-color-secondary {
	color: var(--secondary-color) !important;
}

.btn.btn-primary-mode {
	background-color: var(--secondary-color) !important;
	color: #fff !important;
	transition: all 0.3s ease-in;
}
.btn.btn-primary-mode:hover {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}
.btn.btn-secondary-mode {
	background-color: var(--secondary-color) !important;
	color: #fff !important;
	transition: all 0.3s ease-in;
}
.btn.btn-secondary-mode:hover {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}

/* .btn.btn-success {
	background-color: var(--primary-color);
	outline: none;
	border: none;
}
.btn.btn-success:hover {
	background-color: var(--secondary-color);
}
.btn.btn-success:active {
	background-color: var(--secondary-color) !important;
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}
.btn.btn-success:focus {
	background-color: var(--secondary-color) !important;
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
} */

input:focus {
	border: 1px solid var(--primary-color) !important;
	box-shadow: 0 0 6px rgba(99, 65, 33, 0.5) !important;
}
::-webkit-scrollbar {
	width: 10px;
	scrollbar-color: #f0f0f0 #808080;
}

::-webkit-scrollbar-thumb {
	scrollbar-highlight-color: var(--primary-color);
	background-color: var(--primary-color);
	border-radius: 10px;
	border: 2px solid #fff;
}

.bg-header-modal {
	background-color: var(--primary-color);
	color: #fff;
}

/* Running Text */
.running-text-wrapper {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.running-text {
	display: inline-block;
	padding-left: 100%;
	animation: jalan 12s linear infinite;
}
@keyframes jalan {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-100%);
	}
}

/* Topbar */
#topbar {
	background-color: #f8f9fa; /* Warna background */
	border-bottom: 1px solid #e9ecef; /* Garis bawah */
	font-size: 14px; /* Ukuran font */
}
#topbar a {
	color: var(--color-primary); /* Warna link */
	text-decoration: none;
}
#topbar a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}
#topbar .container-fluid {
	max-width: 100%;
}
.topbar .col-left {
	text-align: left;
}
.topbar .col-right {
	text-align: right;
}

/* Navbar */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1020;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.navbar a.navbar-brand {
	color: var(--primary-color);
	transition: all 0.3s ease-in;
}
.navbar a.navbar-brand:hover {
	color: var(--secondary-color);
}

.navbar-brand,
.navbar-nav {
	text-transform: uppercase;
	font-weight: bold;
}

/* =============== CSS MODE DEFAULT, DARK MODE, SKY MODE =============== */
/* Default mode (warna asli / coklat tetep) */
.navbar-brand img {
	transition: 0.3s ease;
}
/* Mode gelap → jadi putih */
.dark-mode .navbar-brand img,
.sky-mode .navbar-brand img {
	filter: brightness(0) invert(1);
}

/* Default / warna asli */
.img-service {
	transition: 0.3s ease;
}
/* Dark Mode → jadi putih */
.dark-mode .img-service {
	filter: brightness(0) invert(1);
}
/* Sky Mode → jadi biru (#2b7cf7) */
.sky-mode .img-service {
	filter: brightness(0) invert(30%) sepia(100%) saturate(500%)
		hue-rotate(180deg);
	/* Cara 2 (lebih akurat) -> pakai mask */
	/* mask-image: url('path_gambar.png'); 
       background-color: #2b7cf7; */
}
/* =============== END CSS MODE DEFAULT, DARK MODE, SKY MODE =============== */

.nav-item.dropdown:focus,
.dropdown-toggle:focus {
	color: var(--primary-color) !important;
}
.dropdown-menu .dropdown-item:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.navbar-nav .nav-link:hover {
	color: var(--primary-color) !important;
}

.btn-login {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}
a.nav-link.btn-login:focus,
a.nav-link.btn-login:active,
.btn-login:focus,
.btn-login:active {
	box-shadow: none;
	outline: none;
}
a.nav-link.btn-login:hover,
a.nav-link.btn-login:focus {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #fff !important;
}

/* Banner Slider */
.carousel-item .banner-custom {
	background-color: var(--light-color);
	height: 100vh; /* fullscreen */
	display: flex;
	align-items: center; /* vertikal center */
	justify-content: center; /* horizontal center */
}
.carousel-item .greating span {
	text-decoration: underline;
}
.carousel-control-prev,
.carousel-control-next {
	z-index: 5;
}
.banner-custom {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: relative;
	z-index: 3;
}
.banner-custom .row {
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner-custom h2,
.banner-custom p {
	color: var(--primary-color);
}
.banner-custom h2.display-4 {
	font-size: 3.2rem !important; /* silakan ubah sesuai kebutuhan */
	font-weight: 600; /* opsional */
}

.img-container-banner {
	text-align: right;
}
.banner-custom .img-container-banner img {
	width: 410px !important;
}

.carousel-item .banner-custom,
.carousel .waves-banner .wave-path {
	background-color: var(--light-color);
	fill: var(--light-color);
}
.carousel-item .waves-banner {
	margin-top: -135px;
	z-index: 1;
}

.high-title {
	color: var(--primary-color);
	text-transform: uppercase;
}

.section-limit {
	margin-top: 8rem;
}

/* Category Unggulan */
.container-category {
	background-color: #fff;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	width: 90%;
	padding: 30px;
	border-radius: 12px;
	overflow: hidden;

	/* FIX agar bisa naik ke hero section */
	position: relative;
	margin: 0 auto;
	margin-top: -100px; /* atur sesuai keinginan */
	z-index: 10; /* agar tidak ketimpa slider/banner */
}
.kategori-card {
	transition: 0.3s ease-in-out;
	border: none;
	border-radius: 12px;
}
.kategori-card:hover {
	transform: translateY(-5px);
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.kategori-card img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Service */
section#whyUS .card {
	transition: all 0.3s;
}
section#whyUS .card:hover {
	transform: scale(1.1);
	box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2) !important;
}
/* End Service */

/* Testimoni */
section#testimoni {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background-color: #eaeaea;
	overflow: hidden;
}
.swiper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 70px;
}
.swiper-slide {
	background-color: rgba(99, 65, 33, 0.13);
	background-position: center;
	background-size: cover;
	width: 320px;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
	filter: blur(3px);
	border-radius: 10px;
}
.swiper-slide-active {
	background-color: #fff;
	filter: blur(0);
}
.swiper-slide img.testimoni-quote {
	width: 50px;
	position: absolute;
	top: 20px;
	right: 30px;
	opacity: 0.2;
}
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
	background-image: none;
}
.testimonialBox {
	position: relative;
	width: 100%;
	padding: 40px;
	padding-top: 90px;
	color: #999;
}
.testimonialBox .details {
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.testimonialBox .details .img-box {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
}
.testimonialBox .details .img-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.testimonialBox .details h3 {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	color: var(--primary-color);
	line-height: 1.1em;
}
.testimonialBox .details h3 span {
	font-size: 12px;
	color: #666;
}
/* End Testimoni */

/* FAQ */
section#faq a {
	color: #333;
	transition: all 0.3s;
}
section#faq a:hover {
	color: var(--primary-color);
}
/* End FAQ */

/* Footer */
section#footer .call-center i {
	color: var(--primary-color);
}
section#footer .title-foot {
	font-weight: bold;
	text-transform: uppercase;
}
.icon-to-top {
	display: none;
	position: fixed;
	right: 25px;
	bottom: 15px;
	z-index: 10;
	transition: opacity 0.3s ease;
}
.icon-to-top i {
	font-size: 2.3rem;
	/* filter: invert(100%); */
	color: #333;
	opacity: 0.8;
	transition: all 0.3s;
}
.icon-to-top i:hover {
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
/* End Footer */

/* MEDIA QUERY */
/* Desktop */
@media screen and (min-width: 980px) {
	.btn-login,
	.elemen-dropdown-logged {
		margin-left: 30px;
	}
	.banner-custom h2 {
		font-size: 3.5rem !important;
	}
	.carousel-item .waves-banner {
		margin-top: -110px !important;
	}
}
@media screen and (min-width: 682px) {
	.banner-custom h2 {
		font-size: 2.5rem;
	}
	.banner-custom img {
		width: 350px;
	}
	.carousel-item .waves-banner {
		margin-top: -60px;
	}
}

/* Mobile */
@media screen and (max-width: 975px) {
	.topbar .col-left,
	.topbar .col-right {
		text-align: center !important;
	}
	.banner-custom h2.display-4 {
		font-size: 2.6rem !important; /* silakan ubah sesuai kebutuhan */
		text-align: center;
	}
	.banner-custom P {
		text-align: center;
	}
	.img-container-banner {
		text-align: center;
	}
	.banner-custom .img-container-banner img {
		width: 250px !important;
	}
	.carousel-item .waves-banner {
		margin-top: 0px !important;
	}
	.container-category {
		margin-top: -80px; /* lebih rendah di HP */
		width: 92%;
	}
	section#whyUS .card:hover {
		transform: scale(1);
	}
}

@media screen and (max-width: 400px) {
	.banner-custom {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.banner-custom h2.display-4 {
		font-size: 2.2rem !important; /* silakan ubah sesuai kebutuhan */
	}
	.banner-custom .img-container-banner img {
		width: 180px !important;
	}
}

/* ====================================== CSS DARK MODE ====================================== */
/* Variabel */
:root {
	--bg-primary-dark: #343a40;
	--bg-secondary-dark: #454d55;

	--color-primary-dark: #005f56;
	--color-primary-dark-hover: #028175;

	--color-secondary-dark: #28a745;
	--color-secondary-dark-hover: #1dce46;
}
/* End Variabel */

body.dark-mode .btn.btn-primary-mode {
	background-color: var(--color-primary-dark-hover) !important;
	color: #fff !important;
	transition: all 0.3s ease-in;
}
body.dark-mode .btn.btn-primary-mode:hover {
	background-color: var(--color-primary-dark) !important;
	color: #fff !important;
}
body.dark-mode .btn.btn-secondary-mode {
	background-color: var(--color-secondary-dark-hover) !important;
	color: #fff !important;
	transition: all 0.3s ease-in;
}
body.dark-mode .btn.btn-secondary-mode:hover {
	background-color: var(--color-secondary-dark) !important;
	color: #fff !important;
}

body.dark-mode .my-bg-primary {
	background-color: var(--color-primary-dark) !important;
	color: #fff !important;
}
body.dark-mode .my-bg-secondary {
	background-color: var(--color-primary-dark-hover) !important;
	color: #fff !important;
}

body.dark-mode .my-color-primary {
	color: #fff !important;
}
body.dark-mode .my-color-secondary {
	color: var(--color-primary-dark) !important;
}

body.dark-mode {
	background-color: #545d66;
	color: #eee;
}
body.dark-mode hr {
	border: 1px solid #aaa !important;
}
body.dark-mode .card {
	background-color: var(--bg-primary-dark);
	color: #eee !important;
}
body.dark-mode .card a {
	color: #eee !important;
	transition: all 0.3s;
}
body.dark-mode .card a:hover,
body.dark-mode .card a:focus {
	color: var(--color-secondary-dark-hover) !important;
}
body.dark-mode a {
	color: var(--color-secondary-dark-hover);
	transition: all 0.3s;
}
body.dark-mode a:hover {
	color: var(--color-secondary-dark);
}

body.dark-mode #topbar {
	background-color: var(--bg-secondary-dark); /* Warna background */
	border-bottom: none; /* Garis bawah */
	color: #fff !important;
}

body.dark-mode .navbar {
	background-color: var(--bg-primary-dark) !important;
}
body.dark-mode .navbar a,
body.dark-mode .navbar ul li a {
	color: #eee !important;
	transition: all 0.3s;
}
body.dark-mode .navbar a:hover,
body.dark-mode .navbar ul li a:hover {
	color: var(--color-secondary-dark-hover) !important;
}
body.dark-mode .navbar-toggler {
	border: 1px solid #aaa;
}
body.dark-mode .navbar-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
body.dark-mode .dropdown-menu.show {
	background-color: var(--color-primary-dark) !important;
}
body.dark-mode .dropdown-menu.show a:hover {
	background-color: var(--color-primary-dark-hover) !important;
	color: #fff !important;
}

body.dark-mode .btn-login {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}
body.dark-mode a.nav-link.btn-login:focus,
body.dark-mode a.nav-link.btn-login:active,
body.dark-mode .btn-login:focus,
body.dark-mode .btn-login:active {
	box-shadow: none;
	outline: none;
}
body.dark-mode a.nav-link.btn-login:hover,
body.dark-mode a.nav-link.btn-login:focus {
	background-color: var(--color-primary-dark-hover);
	border-color: var(--color-primary-dark-hover);
	color: #fff !important;
}

body.dark-mode .carousel-item .banner-custom,
body.dark-mode .carousel .waves-banner .wave-path {
	background-color: var(--bg-secondary-dark) !important;
	fill: var(--bg-secondary-dark) !important;
}
body.dark-mode .banner-custom p,
body.dark-mode .banner-custom h2 {
	color: #fff !important;
}
body.dark-mode .high-title,
body.dark-mode .section-subtitle {
	color: #fff !important;
}
body.dark-mode section#testimoni,
body.dark-mode section#footer {
	background-color: var(--bg-primary-dark) !important;
}

body.dark-mode .icon-to-top i {
	color: #eee !important;
}
body.dark-mode .img-footer {
	background-color: #fefefe;
	padding: 8px;
	border-radius: 10px;
}

body.dark-mode .modal .modal-header,
body.dark-mode .modal .modal-header .close {
	background-color: var(--color-secondary-dark) !important;
	color: #fff !important;
}
body.dark-mode .modal .modal-body {
	background-color: var(--bg-secondary-dark);
}
body.dark-mode .modal .modal-footer,
body.dark-mode .modal .container-login-footer {
	background-color: var(--bg-primary-dark);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
	background-color: #545d66 !important;
	color: #fff !important;
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
	border: 1px solid #ccc !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
	color: #aaa !important; /* Warna placeholder */
}
body.dark-mode input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	/* Chrome, Safari, Edge */
	color: #aaa;
}
body.dark-mode input:-moz-placeholder,
textarea:-moz-placeholder {
	/* Firefox 18- */
	color: #aaa;
}
body.dark-mode input::-moz-placeholder,
textarea::-moz-placeholder {
	/* Firefox 19+ */
	color: #aaa;
}
body.dark-mode input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #aaa;
}

/* Category Unggulan */
body.dark-mode #kategoriProduk .container-category {
	background-color: #545d66 !important;
}

/* SCROLL BAR */
body.dark-mode::-webkit-scrollbar-thumb {
	scrollbar-highlight-color: var(--bg-primary-dark);
	background-color: var(--bg-primary-dark);
	border-radius: 10px;
	border: 1px solid #fff;
}

/* ============================== STYLE SKY MODE ============================== */
/* Variabel */
:root {
	--sky-primary-color: #2b7cf7; /* Biru utama */
	--sky-primary-color-hover: #115dcf; /* Biru lebih gelap untuk hover */
	--sky-primary-color-deep: #06429b; /* Biru lebih gelap untuk hover */

	--sky-secondary-color: #21a250; /* Hijau segar utama */
	--sky-secondary-color-hover: #1a8d44; /* Hijau lebih gelap untuk hover */

	--sky-accent-color: #f06909; /* Oranye terang untuk aksen */
	--sky-accent-color-hover: #c75a07; /* Oranye lebih gelap untuk hover */

	/* Gabungan warna primary dan secondary (Biru + Hijau) */
	--sky-accent-color-RGBA: rgba(
		9,
		142,
		237,
		0.5
	); /* Mengambil primary, memberikan transparansi */
}
/* End Variabel */

body.sky-mode .btn.btn-primary-mode {
	background-color: var(--sky-accent-color) !important;
	color: #fff !important;
	transition: all 0.3s ease-in;
}
body.sky-mode .btn.btn-primary-mode:hover {
	background-color: var(--sky-accent-color-hover) !important;
	color: #fff !important;
}
body.sky-mode .btn.btn-secondary-mode {
	background-color: var(--sky-secondary-color) !important;
	color: #fff !important;
	transition: all 0.3s ease-in;
}
body.sky-mode .btn.btn-secondary-mode:hover {
	background-color: var(--sky-secondary-color-hover) !important;
	color: #fff !important;
}

body.sky-mode .my-bg-primary {
	background-color: var(--sky-primary-color-hover) !important;
	color: #fff !important;
}
body.sky-mode .my-bg-secondary {
	background-color: var(--sky-primary-color-deep) !important;
	color: #fff !important;
}

body.sky-mode .my-color-primary {
	color: var(--sky-primary-color-deep) !important;
}
body.sky-mode .my-color-secondary {
	color: var(--sky-primary-color) !important;
}

body.sky-mode .btn-login {
	background-color: var(--sky-accent-color);
	border-color: var(--sky-accent-color);
}
body.sky-mode a.nav-link.btn-login:focus,
body.sky-mode a.nav-link.btn-login:active,
body.sky-mode .btn-login:focus,
body.sky-mode .btn-login:active {
	box-shadow: none;
	outline: none;
}
body.sky-mode a.nav-link.btn-login:hover,
body.sky-mode a.nav-link.btn-login:focus {
	background-color: var(--sky-accent-color-hover);
	border-color: var(--sky-accent-color-hover);
	color: #fff !important;
}

/* Body / General */
body.sky-mode {
	background-color: #daefff !important;
}
body.sky-mode a {
	color: var(--sky-accent-color);
	transition: all 0.3s;
}
body.sky-mode a:hover {
	color: var(--sky-accent-color-hover);
}
body.sky-mode hr {
	border: 1px solid #ccc !important;
}
body.sky-mode .card,
body.sky-mode .card-header {
	background-color: var(--sky-primary-color);
	color: #eee !important;
}
body.sky-mode .card-body {
	background-color: #daefff !important;
	color: #333 !important;
}
body.sky-mode .card-body.card-login,
body.sky-mode .card-body.card-register,
body.sky-mode .card-body.card-forgot-password,
body.sky-mode .card-body.card-change-password {
	background-color: var(--sky-primary-color) !important;
	color: #fff !important;
}
body.sky-mode .card-body.card-login a,
body.sky-mode .card-body.card-register a,
body.sky-mode .card-body.card-forgot-password a,
body.sky-mode .card-body.card-change-password a {
	color: #eee !important;
}
body.sky-mode .card-body.card-login a:hover,
body.sky-mode .card-body.card-register a:hover,
body.sky-mode .card-body.card-forgot-password a:hover,
body.sky-mode .card-body.card-change-password a:hover {
	color: #fff !important;
}
body.sky-mode .card-footer {
	background-color: #fff !important;
	color: #333 !important;
}
body.sky-mode .card-link a {
	color: #eee !important;
	transition: all 0.3s;
}
body.sky-mode .card-link a:hover {
	color: #fff !important;
}
body.sky-mode .card a {
	color: var(--sky-accent-color);
	transition: all 0.3s;
}
body.sky-mode .card a:hover {
	color: var(--sky-accent-color-hover);
}
body.sky-mode .card-header a {
	color: #eee !important;
	transition: all 0.3s;
}
body.sky-mode .card-header a:hover,
body.sky-mode .card-header a:focus {
	color: #fff !important;
}

/* BUTTON / BTN */
body.sky-mode .btn {
	box-shadow: 2px 2px 5px var(--sky-accent-color-RGBA) !important;
	border: 1px solid var(--sky-accent-color) !important;
}
/* body.sky-mode .btn-success {
	background-color: var(--sky-accent-color) !important;
}
body.sky-mode .btn-success:hover {
	background-color: var(--sky-accent-color-hover) !important;
} */

body.sky-mode #topbar {
	background-color: var(--sky-primary-color-hover); /* Warna background */
	color: #fff !important;
}

/* Navbar */
body.sky-mode .navbar {
	background-color: var(--sky-primary-color) !important;
}
body.sky-mode .navbar a,
body.sky-mode .navbar ul li a {
	color: #eee !important;
	transition: all 0.3s;
}
body.sky-mode .navbar a:hover,
body.sky-mode .navbar ul li a:hover {
	color: #fff !important;
}
body.sky-mode .navbar-toggler {
	border: 1px solid #eee;
}
body.sky-mode .navbar-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
body.sky-mode .dropdown-menu.show {
	background-color: var(--sky-primary-color-hover) !important;
}
body.sky-mode .dropdown-menu.show a:hover {
	background-color: var(--sky-primary-color) !important;
	color: #fff !important;
}

/* Carousel */
body.sky-mode .carousel-item .banner-custom,
body.sky-mode .carousel .waves-banner .wave-path {
	background-color: #73bdf1 !important;
	fill: #73bdf1 !important;
}
body.sky-mode .banner-custom p,
body.sky-mode .banner-custom h2 {
	color: var(--sky-primary-color-deep) !important;
}
body.sky-mode .high-title,
body.sky-mode .section-subtitle {
	color: var(--sky-primary-color-deep) !important;
}

/* Category Unggulan */
body.sky-mode #kategoriProduk .container-category {
	background-color: #daefff !important;
}

/* Testimoni */
body.sky-mode section#testimoni,
body.sky-mode section#footer {
	background-color: var(--sky-primary-color-hover) !important;
}
body.sky-mode section#testimoni .high-title,
body.sky-mode section#testimoni .section-subtitle {
	color: #fff !important;
}
body.sky-mode section#testimoni .swiper-pagination-bullet {
	background-color: #fff !important;
}
body.sky-mode section#testimoni .cta-testimoni {
	background-color: var(--sky-accent-color) !important;
}
body.sky-mode section#testimoni .cta-testimoni .btn {
	background-color: var(--sky-primary-color) !important;
}
body.sky-mode section#testimoni .cta-testimoni .btn:hover {
	background-color: var(--sky-primary-color-hover) !important;
}

/* Footer */
body.sky-mode .icon-to-top i {
	color: #333 !important;
	filter: invert(1);
}
body.sky-mode #footer {
	color: #fff !important;
}
body.sky-mode #footer a {
	color: #ddd !important;
}
body.sky-mode #footer a:hover {
	color: var(--sky-accent-color) !important;
}
body.sky-mode #footer i {
	color: var(--sky-accent-color) !important;
}
body.sky-mode .img-footer {
	background-color: #fefefe;
	padding: 8px;
	border-radius: 10px;
}

/* Modal */
body.sky-mode .modal .modal-header,
body.sky-mode .modal .modal-header .close {
	background-color: var(--sky-primary-color) !important;
	color: #fff !important;
}
body.sky-mode .modal .modal-body {
	background-color: var(--sky-accent-color-RGBA);
}
body.sky-mode .modal .modal-footer,
body.sky-mode .modal .container-login-footer {
	background-color: var(--sky-primary-color);
}
body.sky-mode .modal .modal-footer a,
body.sky-mode .modal .container-login-footer a {
	color: #eee;
}
body.sky-mode .modal .modal-footer a:hover,
body.sky-mode .modal .container-login-footer a:hover {
	color: #fff;
}

/* Input */
body.sky-mode input,
body.sky-mode select,
body.sky-mode textarea {
	background-color: #f2f9ff !important;
	color: #fff !important;
}
body.sky-mode input:focus,
body.sky-mode select:focus,
body.sky-mode textarea:focus {
	border: 1px solid var(--sky-accent-color-RGBA) !important;
	box-shadow: 0 0 5px var(--sky-accent-color-RGBA) !important;
}
body.sky-mode input::placeholder,
body.sky-mode textarea::placeholder {
	color: #aaa !important; /* Warna placeholder */
}
body.sky-mode input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	/* Chrome, Safari, Edge */
	color: #aaa;
}
body.sky-mode input:-moz-placeholder,
textarea:-moz-placeholder {
	/* Firefox 18- */
	color: #aaa;
}
body.sky-mode input::-moz-placeholder,
textarea::-moz-placeholder {
	/* Firefox 19+ */
	color: #aaa;
}
body.sky-mode input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #aaa;
}

/* SCROLL BAR */
body.sky-mode::-webkit-scrollbar-thumb {
	scrollbar-highlight-color: var(--sky-primary-color);
	background-color: var(--sky-primary-color);
	border-radius: 10px;
	border: 1px solid #fff;
}