/* Dark Mode Overrides for Quanto Template */

body,
#smooth-content {
    background-color: #000 !important;
    color: #f5f5f5 !important;
}

:root {
    --color-primary: #fff;
    --color-primary-rgb: 245, 245, 245;
    --color-white: #000;
    --color-white-rgb: 24, 24, 24;
    --color-black: #ffffff;
    --color-black-rgb: 255, 255, 255;
    --color-1: #444;
    --color-1-rgb: 68, 68, 68;
    --color-2: #232323;
    --color-2-rgb: 35, 35, 35;
    --color-3: #222;
    --color-3-rgb: 34, 34, 34;
    --color-4: #313131;
    --color-4-rgb: 49, 49, 49;
    --color-5: #222;
    --color-5-rgb: 34, 34, 34;
    --color-6: #ef832b;
    --color-6-rgb: 239, 131, 43, 1;
    --color-7: #444;
}

/* Section backgrounds */
.bg-color-white,
.bg-color-2-imp,
.bg-color-5 {
    background-color: #000 !important;
}

.bg-color-2 {
    background: #444 !important;
}

.bg-color-primary {
    background-color: #000 !important;
}

.text-color-primary,
.text-color-black,
.text-color-2 {
    color: #fff !important;
}

.text-color-white {
    color: #000 !important;
}

/* Borders */
hr,
.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
.section-margin-top,
.section-margin-bottom,
.section-padding-top,
.section-padding-bottom {
    border-color: #333 !important;
}

/* Card/Box backgrounds */
.quanto-service-box,
.quanto-project-box,
.quanto-pricing-box,
.quanto-team-box,
.quanto-blog-box,
/* .quanto-funfact-box, */
/* .quanto-awards-box, */
.process-box,
.footer-widgets,
.breadcrumb-area,
.quanto-header.v6.sticky-menu,
.desktop-sidemenu,
.quanto-menu-wrapper,
.quanto-menu-area,
.quanto-mobile-menu,
.quanto-testimonial__navigation,
.optech-default-btn,
.optech-full-btn {
    color: #f5f5f5 !important;
    border-color: #333 !important;
}

/* Inputs */
input,
textarea,
select {
    background-color: #232323 !important;
    color: #f5f5f5 !important;
    border-color: #444 !important;
}
input::placeholder,
textarea::placeholder {
    color: #bbb !important;
}

/* Dropdown */
.dropdown-menu {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #444 !important;
}
.dropdown-item {
    background-color: #fff !important;
    color: #000 !important;
}
/* .dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover {
    background-color: #333 !important;
    color: #fff !important;
} */

.dropdown-item:active {
    background-color: #fff !important;
    color: #000 !important; /* warna gelap sesuai dark mode */
}
.dropdown-item:hover {
    background-color: #000 !important;
    color: #fff !important; /* warna gelap sesuai dark mode */
}

/* Testimonial navigation
.quanto-testimonial__prev,
.quanto-testimonial__next {
    background: #232323 !important;
    color: #f5f5f5 !important;
    border-color: #444 !important;
}
.quanto-testimonial__prev:hover,
.quanto-testimonial__next:hover {
    background: #444 !important;
    color: #fff !important;
} */

.quanto-testimonial__prev,
.quanto-testimonial__next .fa-solid {
    color: white;
}
.quanto-testimonial__prev:hover,
.quanto-testimonial__next:hover .fa-solid {
    color: white;
}

/* Footer */
.footer-widgets,
.footer__bottom-content {
    color: #f5f5f5 !important;
    border-color: #333 !important;
}

/* Custom scrollbar */
body::-webkit-scrollbar-thumb {
    background-color: #444 !important;
    outline: 1px solid #232323 !important;
}

/* Preloader */
.preloader {
    background: #181818 !important;
}

/* Misc */
hr,
.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: #333 !important;
}

/* Testimonial2 Box: lebih gelap dari section */
.quanto-testimonial2__box {
    background: #444 !important; /* Lebih gelap dari #232323 section */
    color: #f5f5f5 !important;
    border: 1px solid #232323;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.18);
    background-color: #000;
}

.quanto-service2-section {
    background-color: #000 !important; /* Lebih gelap dari #232323 section */
}

/* Funfacts section: latar belakang berbeda pada dark mode */
.quanto-funfacts-section {
    background: #444 !important; /* Lebih gelap dari #232323 section */
}

.accordion-item {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
    border-color: #444 !important;
}
.accordion-header {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
}

.accordion-button {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
    border-color: #ffffff !important;
}
.quanto-faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--color-white) !important;
}
.quanto-faq-accordion .accordion-button:focus {
    background-color: var(--color-white) !important;
}

/* 
.accordion-button:not(.collapsed) {
    color: var(--color-black) !important;
}
 */

.squad-client-text {
    color: var(--color-black) !important;
}

.quanto-awards-box::before {
    background-color: var(--color-black) !important;
}
.quanto-awards-box::after {
    color: var(--color-white) !important;
}
.quanto-awards-box:hover .awards-title,
.quanto-awards-box:hover .awards-info {
    color: var(--color-white) !important;
}

.page-link {
    color: var(--color-black) !important;
    background-color: var(--color-white) !important;
}
.page-link:hover:not(.next):not(.prev) {
    color: white !important;
    background-color: var(--color-6) !important;
}

.quanto-link-btn:hover {
    color: #ef832b;
    border-bottom: 1px solid #ef832b;
}

.footer-area .quanto-link-btn.btn-pill {
    background-color: #ff8c00;
    color: white;
    border: none;
    transition: all 0.3s ease; /* untuk animasi halus saat hover */
}

.footer-area .quanto-link-btn.btn-pill:hover {
    background-color: #000;
    color: #fff;
    border: none;
}

.quanto-header {
    background: rgba(0, 0, 0, 0.6); /* Putih transparan */
    backdrop-filter: blur(12px); /* Blur background di belakang header */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-radius: 45px;
    box-shadow: 0 6px 30px rgba(255, 255, 255, 0.235); /* Tambahan shadow biar makin soft */
    transition: all 0.4s;
}