/* animated svg */
  .svg-animated path {
    stroke: #fff;
    stroke-dasharray: 600;
    stroke-dashoffset: 0;
    animation: moveLine 4s linear infinite;
  }
  html.dark .svg-animated path {
	stroke: #000 !important;
}
  
  @keyframes moveLine {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: -1200;
    }
  }
  /* progressbar alert */
  .swal2-timer-progress-bar {
    background: #259e7a !important;
  }

  /* sidebar brand  */
  .brand-tab {
    border-radius: 8px;
    font-size: 1.4rem;
    padding: 24px 32px !important;
    margin: 0 0 16px 0;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
  }


  /* ==== mode ====== */

html.dark .custom-el-pos-2 svg path {
	fill: #1E1E1E !important;
}
html.dark .text-color-dark {
	color: #f1f1f1 !important; 
}
html.dark .text-color-hover-primary:hover {
	color: #259e7a !important; 
}
html.dark #toggle-theme {
	border-color: #fff !important;
	color: #fff !important;
}
html.dark #toggle-theme:hover {
	background-color: #fff !important;
	color: #1a1a1a !important;
}

html.dark .card {
	background-color: #1e1e1e !important;
	border-color: #333 !important;
	color: #f1f1f1;
}

html.dark .card h4,
html.dark .card p {
	color: #e6e6e6 !important;
}

html.dark .text-muted {
	color: #999 !important;
}
html.dark .card.anim-hover-translate-top-10px:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
	transform: translateY(-10px);
	transition: all 0.3s ease;
}

html.dark .box-shadow-1::before {
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6) !important;
	opacity: 0.25; 
}

/* brand */
html.dark .brand-tab {
	background-color: transparent;
	color: #ccc !important;
}

html.dark .brand-tab.active-brand {
	background-color: #000 !important;
	color: #fff !important;
	font-weight: 600;
}

html.dark .brand-tab:hover {
	background-color: #111;
	color: #fff !important;
}

.brand-tab.active-brand.bg-white.text-primary {
	background-color: #fff !important;
	font-weight: 600;
}
.text-produk {
	color: #fff;
}
html.dark .text-produk {
	color: #000;
}

/* faq */
html.dark .accordion .accordion-toggle.text-color-dark {
	color: #fff !important;
}

/* hero */
html.dark .dark-mode-support {
	background-color: rgba(30, 30, 30, 0.85) !important;
	color: #f8f9fa !important;
}
.text-mode {
	color: #000 !important;
}
html.dark .text-mode {
	color: #fff !important;
}

/* parallax */
.dark-mode-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
	display: none;
}

html.dark .dark-mode-overlay {
	display: block;
}