/* Base Theme */
body {
  background-color: #FFFFFF;
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  overflow-x: hidden;
}

/* Light Grey Section */
.section-grey {
  background-color: #F8F8F8;
}

/* Navbar - Transparent at top, glass effect on scroll */

.navbar-transparent {
  background-color: transparent;
  backdrop-filter: blur(0px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: inherit;
}

#navbar a:not(.btn-primary),
#navbar p {
  color: inherit;
}

/* Force white text in transparent navbar when on dark background pages */
.navbar-dark-bg .navbar-transparent,
.navbar-dark-bg .navbar-transparent a:not(.btn-primary),
.navbar-dark-bg .navbar-transparent p,
.navbar-dark-bg .navbar-transparent span,
.navbar-dark-bg .navbar-transparent i,
.navbar-dark-bg .navbar-transparent svg,
.navbar-dark-bg .navbar-transparent .nav-link-with-menu {
  color: white !important;
}

.navbar-dark-bg .navbar-transparent .nav-link-with-menu::after {
  color: white !important;
}

/* Ensure Mega Menu content remains dark even on dark background pages */
.navbar-dark-bg .mega-menu:not(.why-us-cta),
.navbar-dark-bg .mega-menu a:not(.btn-animate),
.navbar-dark-bg .mega-menu p,
.navbar-dark-bg .mega-menu span,
.navbar-dark-bg .mega-menu i,
.navbar-dark-bg .mega-menu h4,
.navbar-dark-bg .mega-menu h5 {
  color: #333 !important;
}

.navbar-dark-bg .why-us-cta h4,
.navbar-dark-bg .why-us-cta p,
.navbar-dark-bg .why-us-cta span {
  color: white !important;
}

.navbar-dark-bg .mega-menu i {
  color: #3A7BFF !important;
}

.navbar-dark-bg .category-item {
  color: #444 !important;
}

.navbar-dark-bg .category-item.active,
.navbar-dark-bg .category-item:hover {
  color: #3A7BFF !important;
}

.navbar-dark-bg .subcategory-column a {
  color: #666 !important;
}

.navbar-dark-bg .subcategory-column a:hover {
  color: #3A7BFF !important;
}

.navbar-dark-bg .subcategory-header h4 {
  color: #333 !important;
}

.navbar-dark-bg .subcategory-column h5 {
  color: #555 !important;
}

.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  color: #000000 !important;
}

.navbar-scrolled .text-black,
.navbar-scrolled a:not(.btn-primary),
.navbar-scrolled p {
  color: #000000 !important;
}

/* Button Styles with Slide Animation */
.btn-primary {
  background-color: #000000;
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background-color: #333333;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-primary:active,
.btn-primary:focus {
  background-color: #1a1a1a;
  outline: 2px solid rgba(0, 0, 0, 0.5);
  outline-offset: 2px;
}

/* Accent Colors */
.text-blue {
  color: #3A7BFF;
}

.text-mint {
  color: #4DF2C0;
}

.text-purple {
  color: #B39DFF;
}

.bg-blue {
  background-color: #3A7BFF;
}

.bg-mint {
  background-color: #4DF2C0;
}

.bg-purple {
  background-color: #B39DFF;
}

/* Hero Gradient */
.hero-gradient {
  background: linear-gradient(135deg, #B39DFF 0%, #3A7BFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scroll Container */
.scroll-container {
  overflow: hidden;
  height: 520px;
  position: relative;
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%);
  border-radius: 16px;
}

.scroll-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: absolute;
  width: 100%;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

.scroll-up {
  animation: scrollUp linear infinite;
  animation-duration: 25s;
  transition: animation-duration 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-down {
  animation: scrollDown linear infinite;
  animation-duration: 20s;
  transition: animation-duration 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-container:hover .scroll-up,
.scroll-container:hover .scroll-down {
  animation-duration: 80s;
}

.scroll-img {
  border-radius: 12px;
  width: 90%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-img:hover {
  transform: scale(1.03);
}

/* Footer */
.footer-black {
  background-color: #000000;
  color: #FFFFFF;
}

.footer-link {
  color: #4DF2C0;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #3A7BFF;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #3A7BFF;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4DF2C0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .scroll-container {
    height: 380px;
  }

  .scroll-img {
    height: 160px;
  }

  .hero-heading {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  /* Prevent body scroll when mobile menu is open */
  body.menu-open {
    overflow: hidden;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

/* Smooth transitions */
.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Underline effect for nav links */
.nav-underline {
  position: relative;
}

.nav-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3A7BFF;
  transition: width 0.3s ease;
}

.nav-underline:hover::after {
  width: 100%;
}

/* Simple button animation */
.btn-animate {
  position: relative;
  overflow: hidden;
}

.btn-animate .btn-text {
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-animate::after {
  content: attr(data-hover);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-animate:hover .btn-text {
  transform: translateY(-200%);
}

.btn-animate:hover::after {
  transform: translateY(-100%);
}

/* Enhanced Mobile Menu Styles */
#mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 400px;
  height: 100vh;
  background: white;
  z-index: 1000;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding-top: 70px;
}

#mobile-menu.active {
  right: 0;
}


/* Mobile menu scrollable content */
.mobile-menu-content {
  padding: 20px 24px 40px;
  height: calc(100vh - 70px);
  overflow-y: auto;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Theme toggle button for mobile menu */
.mobile-theme-btn {
  position: absolute;
  top: 20px;
  right: 70px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
}

.mobile-theme-btn:hover {
  background: #e0e0e0;
  transform: scale(1.1);
}

/* Dark mode for mobile theme button */
.dark .mobile-theme-btn {
  background: rgba(255, 255, 255, 0.15);
}

.dark .mobile-theme-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Theme toggle button in header (next to hamburger) */
.theme-toggle-btn-mobile {
  font-size: 18px;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.dark .theme-toggle-btn-mobile {
  color: white;
}

/* Mobile menu button container - flex row */
.mobile-menu-btn {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

/* Close button for mobile menu */
.mobile-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-close-btn:hover {
  background: #3A7BFF;
}

.mobile-close-btn:hover svg {
  stroke: white;
}

/* Dark mode for mobile close button */
.dark .mobile-close-btn {
  background: rgba(255, 255, 255, 0.15);
}

.dark .mobile-close-btn svg {
  stroke: white;
}

.dark .mobile-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Keep text-black icons black in dark mode */
.dark .text-black {
  color: #000000 !important;
}


/* Enhanced mobile menu links */
.mobile-menu-link {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
}

.mobile-menu-link:last-child {
  border-bottom: none;
}

.mobile-menu-link:hover {
  color: #3A7BFF;
  padding-left: 10px;
}

/* Mobile menu buttons */
.mobile-menu-buttons {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

/* Tablet view - burger menu visible */
@media (max-width: 1023px) {

  .desktop-nav,
  .desktop-buttons {
    display: none !important;
  }

  .mobile-menu-btn {
    display: block !important;
  }
}

@media (min-width: 1024px) {

  .mobile-menu-btn,
  #mobile-menu,
  .mobile-menu-overlay {
    display: none !important;
  }
}

/* ========== TWO-LEVEL MEGA MENU STYLES ========== */
.mega-menu-container {
  position: relative;
}

.mega-menu {
  position: absolute;
  top: 200%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 800px;
  max-width: 95vw;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  min-height: 500px;
  max-height: 600px;
}

.mega-menu-container:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Left Side - Categories */
.mega-menu-left {
  width: 280px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding: 24px 0;
  overflow-y: auto;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  position: relative;
}

.category-item:hover {
  background: rgba(58, 123, 255, 0.05);
  color: #3A7BFF;
  border-left-color: #3A7BFF;
}

.category-item.active {
  background: white;
  color: #3A7BFF;
  border-left-color: #3A7BFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-item i {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: #666;
}

.category-item:hover i,
.category-item.active i {
  color: #3A7BFF;
}

/* Right Side - Subcategories */
/* .mega-menu-right {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  } */
.mega-menu-right {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  position: relative;
}


.subcategory-panel {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.subcategory-panel.active {
  display: block;
}

.subcategory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.subcategory-header h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.subcategory-header i {
  color: #3A7BFF;
  font-size: 20px;
}

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.subcategory-column h5 {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 8px;
}

.subcategory-column h5 i {
  color: #3A7BFF;
  font-size: 13px;
}

.subcategory-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subcategory-column li {
  margin-bottom: 10px;
}

.subcategory-column a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  text-decoration: none;
  padding: 8px 0;
  font-size: 13px;
  transition: all 0.2s ease;
  border-radius: 6px;
  padding-left: 8px;
}

.subcategory-column a:hover {
  color: #3A7BFF;
  background-color: rgba(58, 123, 255, 0.05);
  padding-left: 12px;
}

.subcategory-column a i {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: #888;
}

.subcategory-column a:hover i {
  color: #3A7BFF;
}

/* Video Categories Special Grid */
.video-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.video-category-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.video-category-item:hover {
  background: white;
  border-color: rgba(58, 123, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.video-category-item i {
  display: block;
  font-size: 20px;
  color: #3A7BFF;
  margin-bottom: 8px;
}

.video-category-item span {
  font-size: 12px;
  color: #555;
  font-weight: 500;
  line-height: 1.3;
}

/* Arrow indicator */
.nav-link-with-menu {
  position: relative;
  padding-right: 18px;
}

.nav-link-with-menu::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #3A7BFF;
  transition: all 0.3s ease;
}

.mega-menu-container:hover .nav-link-with-menu::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ========== SIMPLE SERVICES MENU ========== */
.services-simple-menu {
  width: 420px !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 20px !important;
  display: block !important;
}

.services-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.service-category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9ff;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.service-category-item:hover {
  background: white;
  border-color: rgba(58, 123, 255, 0.3);
  box-shadow: 0 8px 20px rgba(58, 123, 255, 0.15);
  transform: translateY(-2px);
  color: #3A7BFF;
}

.service-category-item i {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #3A7BFF 0%, #4DF2C0 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  flex-shrink: 0;
}

.service-category-item span {
  flex: 1;
  line-height: 1.3;
}

/* Dark mode for simple services menu */
body.dark .services-simple-menu {
  background: #1a1a2e;
}

body.dark .service-category-item {
  background: rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
}

body.dark .service-category-item:hover {
  background: rgba(58, 123, 255, 0.15);
  border-color: rgba(58, 123, 255, 0.4);
  color: #4DF2C0;
}

/* Service Menu Item Hover Effect */
.service-menu-item:hover {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.25), rgba(2, 6, 23, 0)) !important;
  color: #ffffff !important;
  transform: translateX(4px);
}

.service-menu-item:hover span {
  color: #ffffff !important;
}

/* ========== WHY US MEGA MENU ========== */
.why-us-mega-menu {
  padding: 20px;
  display: flex;
  justify-content: center;
  width: 360px;
  max-width: 90vw;
}

.why-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.why-us-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 5px;
}

.why-us-feature i {
  color: #3A7BFF;
  background-color: rgba(58, 123, 255, 0.1);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-us-feature span {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* CTA in Why Us */
.why-us-cta {
  background: linear-gradient(to right, #3A7BFF, #4DF2C0);
  border-radius: 12px;
  padding: 20px;
  color: white;
  margin-top: 16px;
}

.why-us-cta h4 {
  color: white !important;
  border: none !important;
  font-size: 18px;
  margin-bottom: 8px;
}

.why-us-cta p {
  font-size: 14px;
  opacity: 0.95;
  margin-bottom: 16px;
}

.why-us-cta .btn-animate {
  background: white;
  color: #3A7BFF;
  border: none;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 768px) {
  .mega-menu {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 95vw;
    max-height: 70vh;
    border-radius: 12px;
    flex-direction: column;
    min-height: auto;
  }

  .mega-menu-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 200px;
    overflow-y: auto;
  }

  .category-item {
    padding: 12px 20px;
    font-size: 13px;
  }

  .subcategory-grid {
    grid-template-columns: 1fr;
  }

  .video-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== MOBILE DROPDOWN STYLES ========== */
.mobile-dropdown {
  border-bottom: 1px solid #f0f0f0;
}

.mobile-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  user-select: none;
}

.mobile-dropdown-header i {
  transition: transform 0.3s ease;
  color: #3A7BFF;
}

.mobile-dropdown-header.active i {
  transform: rotate(180deg);
}

.mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding-left: 20px;
}

.mobile-dropdown-content.active {
  max-height: 1000px;
  padding-bottom: 16px;
}

.mobile-submenu {
  padding: 8px 0;
}

.mobile-submenu h5 {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-submenu h5 i {
  font-size: 14px;
}

.mobile-submenu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.mobile-submenu li {
  margin-bottom: 6px;
}

.mobile-submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #555;
  text-decoration: none;
  padding: 6px 0;
  font-size: 14px;
  transition: all 0.2s ease;
  border-radius: 4px;
  padding-left: 8px;
}

.mobile-submenu a:hover {
  color: #3A7BFF;
  background-color: rgba(58, 123, 255, 0.05);
  padding-left: 12px;
}

.mobile-submenu a i {
  width: 18px;
  text-align: center;
  font-size: 12px;
}

/* Mobile Why Us Content */
.mobile-why-us-features {
  margin-top: 12px;
}

.mobile-why-us-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 8px;
}

.mobile-why-us-feature i {
  color: #3A7BFF;
  font-size: 14px;
}

.mobile-why-us-feature span {
  font-size: 14px;
  color: #333;
}

/* Mobile CTA */
.mobile-cta {
  background: linear-gradient(to right, #3A7BFF, #4DF2C0);
  border-radius: 8px;
  padding: 16px;
  color: white;
  margin-top: 16px;
  text-align: center;
}

.mobile-cta h5 {
  font-size: 16px;
  margin-bottom: 8px;
}

.mobile-cta p {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 12px;
}

/* Mobile dropdown animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-dropdown-content.active .mobile-submenu {
  animation: slideDown 0.3s ease forwards;
  opacity: 0;
  animation-delay: calc(var(--item-index, 0) * 0.05s);
}

/* Hide mega menu on mobile */
@media (max-width: 767px) {
  .mega-menu-container .mega-menu {
    display: none;
  }

  .mega-menu-container:hover .mega-menu {
    display: none;
  }
}

/* Service Page Styles */
.service-hero {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  padding: 100px 0 60px;
  margin-top: 0;
}

.service-icon {
  font-size: 48px;
  color: #3A7BFF;
  margin-bottom: 20px;
}

.service-feature-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  height: 100%;
}

.service-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(58, 123, 255, 0.1);
  border-color: #3A7BFF;
}

.process-step {
  position: relative;
  padding-left: 40px;
  margin-bottom: 30px;
}

.process-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #3A7BFF, #4DF2C0);
}

.process-step-number {
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  height: 30px;
  background: #3A7BFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.service-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(58, 123, 255, 0.15);
}


/* extra */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== FORCE STATS HORIZONTAL ON MOBILE ===== */
@media (max-width: 768px) {
  .stats-horizontal {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }

  .stats-horizontal>div {
    flex: 1;
    padding: 10px;
  }

  .stats-horizontal .countup {
    font-size: 16px;
  }

  .stats-horizontal div div:last-child {
    font-size: 11px;
    line-height: 1.2;
  }
}

/* ===== STATS: DESKTOP HORIZONTAL, MOBILE SAME ===== */
@media (min-width: 1024px) {
  .stats-horizontal {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
    width: 100%;
  }

  .stats-horizontal>div {
    flex: 1;
    padding: 24px;
  }

  .stats-horizontal .countup {
    font-size: 32px;
  }

  .stats-horizontal div div:last-child {
    font-size: 14px;
  }
}

/* ================= FORCE DARK THEME ================= */
body.dark {
  background: #020617 !important;
  color: #e5e7eb !important;
}

/* NAVBAR */
body.dark #navbar {
  background: rgba(2, 6, 23, 0.9) !important;
  backdrop-filter: blur(20px);
}

body.dark #navbar a,
body.dark #navbar p,
body.dark #navbar span {
  color: #e5e7eb !important;
}

body.dark .mega-menu i {
  color: #60a5fa !important;
}

/* MEGA MENU */
body.dark .mega-menu {
  background: #020617 !important;
  border: 1px solid #1e293b;
}

body.dark .mega-menu * {
  color: #e5e7eb !important;
}

/* CATEGORY */
body.dark .category-item {
  color: #c7d2fe !important;
}

body.dark .category-item.active,
body.dark .category-item:hover {
  background: #020617 !important;
  color: #60a5fa !important;
}

/* MOBILE MENU */
body.dark #mobile-menu {
  background: #020617 !important;
}

body.dark .mobile-menu-link,
body.dark .mobile-dropdown-header {
  color: #e5e7eb !important;
}

/* CARDS */
body.dark .service-card,
body.dark .service-feature-card {
  background: #020617 !important;
  border: 1px solid #1e293b;
  color: #e5e7eb;
}

/* BUTTON */
body.dark .btn-primary {
  background: #2563eb !important;
  color: white !important;
}

/* ===== DARK MODE ===== */
body.dark {
  background-color: #0f172a;
  color: #e5e7eb;
}

body.dark header {
  background: rgba(15, 23, 42, 0.9) !important;
}

body.dark .mega-menu,
body.dark .service-card,
body.dark .service-feature-card {
  background-color: #020617;
  color: #e5e7eb;
}

body.dark a {
  color: #e5e7eb;
}

/* ================= GLOBAL DARK MODE ================= */
body.dark {
  background-color: #020617 !important;
  color: #e5e7eb !important;
}

/* TEXT COLORS */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
  color: #f8fafc !important;
}

body.dark p,
body.dark span,
body.dark li,
body.dark label {
  color: #cbd5f5 !important;
}

/* LINKS */
body.dark a {
  color: #93c5fd !important;
}

body.dark a:hover {
  color: #4df2c0 !important;
}

/* BACKGROUNDS */
body.dark .bg-white {
  background-color: #020617 !important;
}

body.dark .bg-gray-50,
body.dark .bg-gray-100 {
  background-color: #020617 !important;
}

/* CARDS / SECTIONS */
body.dark section,
body.dark .card,
body.dark .service-card,
body.dark .feature-box,
body.dark .slider-card {
  background-color: #020617 !important;
  border-color: #1e293b !important;
}

/* NAVBAR */
body.dark #navbar {
  background: rgba(2, 6, 23, 0.9) !important;
  backdrop-filter: blur(20px);
}

/* MOBILE MENU */
body.dark #mobile-menu {
  background-color: #020617 !important;
}

body.dark .mobile-menu-link,
body.dark .mobile-dropdown-header {
  color: #e5e7eb !important;
}

/* BUTTONS */
body.dark .btn-primary {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

body.dark .btn-primary:hover {
  background-color: #1d4ed8 !important;
}

/* INPUTS */
body.dark input,
body.dark textarea {
  background-color: #020617 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

/* BORDERS */
body.dark .border,
body.dark .border-gray-200,
body.dark .border-gray-100 {
  border-color: #1e293b !important;
}

/* GRADIENT SECTIONS SAFE */
body.dark .hero-gradient {
  background: linear-gradient(135deg, #93c5fd, #4df2c0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================= THEME TOGGLE (MOBILE) ================= */

#theme-toggle-mobile {
  transition: all 0.3s ease;
  font-size: 18px;
}

/* hover effect */
#theme-toggle-mobile:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* dark mode button look */
body.dark #theme-toggle-mobile {
  background: #1e293b;
  /* slate-800 */
  color: #facc15;
  /* yellow moon/sun */
}

/* ================= THEME TOGGLE BUTTON ================= */
.theme-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  border: none;
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.3s ease;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 0 0 rgba(0, 0, 0, 0);
}

/* ✨ Hover */
.theme-toggle-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.18),
    inset 0 0 0 rgba(0, 0, 0, 0);
}

/* 👇 Click feel */
.theme-toggle-btn:active {
  transform: scale(0.92);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 🌟 Glow ring */
.theme-toggle-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3A7BFF, #4DF2C0);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.theme-toggle-btn:hover::after {
  opacity: 0.55;
}

/* ================= DARK MODE LOOK ================= */
body.dark .theme-toggle-btn {
  background: linear-gradient(135deg, #020617, #1e293b);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.6);
  color: #facc15;
  /* sun color */
}

body.dark .theme-toggle-btn:hover {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.75);
}

/* Optional subtle rotate animation */
body.dark .theme-toggle-btn:hover,
.theme-toggle-btn:hover {
  animation: toggle-wiggle 0.6s ease;
}

@keyframes toggle-wiggle {
  0% {
    transform: rotate(0deg) scale(1.05);
  }

  25% {
    transform: rotate(6deg) scale(1.05);
  }

  50% {
    transform: rotate(-6deg) scale(1.05);
  }

  100% {
    transform: rotate(0deg) scale(1.05);
  }
}

/* ================= MOBILE THEME TOGGLE ================= */
.theme-toggle-mobile {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: none;
  cursor: pointer;
  position: relative;

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.3s ease;
}

/* 👆 tap / hover feel */
.theme-toggle-mobile:hover,
.theme-toggle-mobile:active {
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.25);
}

/* 🌟 Glow ring */
.theme-toggle-mobile::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3A7BFF, #4DF2C0);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.theme-toggle-mobile:hover::after,
.theme-toggle-mobile:active::after {
  opacity: 0.6;
}

/* ================= DARK MODE LOOK ================= */
body.dark .theme-toggle-mobile {
  background: linear-gradient(135deg, #020617, #1e293b);
  color: #facc15;
  /* sun */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.7);
}

/* 🌙 → 🌞 bounce animation */
body.dark .theme-toggle-mobile:hover,
.theme-toggle-mobile:hover {
  animation: mobile-toggle-bounce 0.6s ease;
}

@keyframes mobile-toggle-bounce {
  0% {
    transform: scale(1.08);
  }

  30% {
    transform: scale(0.95);
  }

  60% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1.08);
  }
}

/* ================= PREMIUM DARK MEGA MENU ================= */

body.dark .mega-menu {
  background: radial-gradient(circle at top left, #0f172a, #020617);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px);
}

/* LEFT PANEL */
body.dark .mega-menu-left {
  background: linear-gradient(180deg, #020617, #020617);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* CATEGORY ITEM BASE */
body.dark .mega-menu-left .category-item {
  position: relative;
  padding: 14px 18px;
  color: #cbd5f5;
  border-radius: 12px;
  transition: all 0.35s ease;
  overflow: hidden;
}

/* ICON */
body.dark .mega-menu-left .category-item i {
  color: #60a5fa;
  transition: transform 0.35s ease;
}

/* HOVER EFFECT */
body.dark .mega-menu-left .category-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

body.dark .mega-menu-left .category-item:hover::before {
  opacity: 1;
}

body.dark .mega-menu-left .category-item:hover {
  background: rgba(30, 64, 175, 0.18);
  color: #ffffff;
  transform: translateX(6px);
}

body.dark .mega-menu-left .category-item:hover i {
  transform: scale(1.15);
  color: #93c5fd;
}

/* ACTIVE ITEM */
body.dark .mega-menu-left .category-item.active {
  background: linear-gradient(90deg, #1e40af, #2563eb);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
}

body.dark .mega-menu-left .category-item.active i {
  color: #ffffff;
}

/* RIGHT PANEL HEADINGS */
body.dark .mega-menu-right h4 {
  color: #ffffff;
  font-weight: 600;
}

body.dark .mega-menu-right h5 {
  color: #e5e7eb;
  margin-bottom: 10px;
}

/* RIGHT LINKS */
body.dark .mega-menu-right a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #c7d2fe;
  transition: all 0.3s ease;
}

/* LINK HOVER */
body.dark .mega-menu-right a:hover {
  background: rgba(96, 165, 250, 0.15);
  color: #ffffff;
  transform: translateX(4px);
}

/* ICON HOVER */
body.dark .mega-menu-right a i {
  color: #60a5fa;
  transition: transform 0.3s ease;
}

body.dark .mega-menu-right a:hover i {
  transform: scale(1.2);
}

/* CTA AREA */
body.dark .why-us-cta {
  margin-top: 20px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(79, 70, 229, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* CTA BUTTON */
body.dark .why-us-cta .btn-animate {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.5);
}

body.dark .why-us-cta .btn-animate:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 15px 45px rgba(79, 70, 229, 0.8);
}

/* ================= VIDEO EDITING DARK MODE FIX ================= */

/* Section Header */
body.dark .subcategory-header h4 {
  color: #ffffff;
}

/* Video Cards Grid */
body.dark .video-categories-grid {
  gap: 16px;
}

/* CARD BASE */
body.dark .video-category-item {
  background: linear-gradient(145deg, #020617, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  transition: all 0.35s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

/* ICON */
body.dark .video-category-item i {
  font-size: 22px;
  color: #60a5fa;
  margin-bottom: 10px;
  transition: all 0.35s ease;
}

/* TEXT */
body.dark .video-category-item span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #cbd5f5;
}

/* HOVER EFFECT */
body.dark .video-category-item:hover {
  transform: translateY(-6px) scale(1.03);
  background: linear-gradient(145deg, #1e40af, #2563eb);
  box-shadow:
    0 20px 50px rgba(37, 99, 235, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body.dark .video-category-item:hover i,
body.dark .video-category-item:hover span {
  color: #ffffff;
}

/* VIEW ALL LINK */
body.dark .subcategory-panel a {
  color: #93c5fd;
  transition: all 0.3s ease;
}

body.dark .subcategory-panel a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* ================= WHY US DARK MODE FIX ================= */

/* Main Why Us Box */
body.dark .why-us-mega-menu {
  background: radial-gradient(circle at top left, #0f172a, #020617);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px);
}

/* Heading */
body.dark .why-us-grid h4 {
  color: #ffffff;
  font-weight: 600;
}

/* WHY US FEATURE CARD */
body.dark .why-us-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #020617, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 16px;
  border-radius: 14px;
  color: #cbd5f5;
  margin-bottom: 12px;
  transition: all 0.35s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ICON */
body.dark .why-us-feature i {
  color: #60a5fa;
  font-size: 16px;
  transition: transform 0.3s ease;
}

/* HOVER EFFECT */
body.dark .why-us-feature:hover {
  transform: translateX(6px);
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #ffffff;
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.5);
}

body.dark .why-us-feature:hover i {
  color: #ffffff;
  transform: scale(1.2);
}

/* CTA BOX */
body.dark .why-us-cta {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(79, 70, 229, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* CTA TEXT */
body.dark .why-us-cta h4 {
  color: #ffffff;
}

body.dark .why-us-cta p {
  color: #c7d2fe;
  font-size: 13px;
}

/* CTA BUTTON */
body.dark .why-us-cta .btn-animate {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.6);
}

body.dark .why-us-cta .btn-animate:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 50px rgba(79, 70, 229, 0.9);
}

/* ================= TRUSTED BRANDS – DARK MODE ================= */

body.dark section.bg-gradient-to-br.from-gray-50.to-gray-100 {
  background: radial-gradient(circle at top, #0f172a, #020617);
}

/* Heading */
body.dark section h2 {
  color: #ffffff;
}

/* Paragraph */
body.dark section p {
  color: #cbd5f5;
}

/* Fade gradients left/right */
body.dark .absolute.bg-gradient-to-r.from-gray-50,
body.dark .absolute.bg-gradient-to-l.from-gray-50 {
  background: linear-gradient(to right, #020617, transparent);
}

/* BRAND CARD */
body.dark .brand-card {
  background: linear-gradient(145deg, #020617, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}

/* Brand Name */
body.dark .brand-name {
  color: #e5e7eb;
}

/* Icon container */
body.dark .brand-icon {
  background: rgba(255, 255, 255, 0.08);
}

/* Hover effect */
body.dark .brand-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);
}

/* Icon glow on hover */
body.dark .brand-card:hover .brand-icon {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

body.dark .brand-card:hover i {
  color: #ffffff !important;
}

/* ================= DIM LIGHT MODE FOOTER ================= */

body:not(.dark) footer {
  background: #f1f5f9 !important;
  /* soft slate */
  color: #0f172a !important;
}

/* Headings */
body:not(.dark) footer h1,
body:not(.dark) footer h3,
body:not(.dark) footer h4 {
  color: #0f172a !important;
}

/* Text */
body:not(.dark) footer p,
body:not(.dark) footer span,
body:not(.dark) footer li {
  color: #475569 !important;
}

/* Brand subtitle */
body:not(.dark) footer .text-gray-300,
body:not(.dark) footer .text-gray-400 {
  color: #64748b !important;
}

/* Newsletter box */
body:not(.dark) footer .border {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

/* Newsletter input */
body:not(.dark) footer .footer-newsletter-input {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body:not(.dark) footer .footer-newsletter-input::placeholder {
  color: #94a3b8 !important;
}

/* Links */
body:not(.dark) footer a {
  color: #334155 !important;
}

body:not(.dark) footer a:hover {
  color: #3a7bff !important;
}

/* Social icons */
body:not(.dark) footer .bg-gray-900 {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

body:not(.dark) footer .bg-gray-900:hover {
  background: rgba(58, 123, 255, 0.12) !important;
  color: #3a7bff !important;
}

/* Divider */
body:not(.dark) footer .border-gray-800 {
  border-color: #cbd5e1 !important;
}

/* Back to top button */
body:not(.dark) footer button {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

body:not(.dark) footer button:hover {
  border-color: #3a7bff !important;
  color: #3a7bff !important;
}

/* ================= BLOG FILTER BAR FIX ================= */

/* Filter pills (inactive) */
body.dark button.rounded-full:not(.bg-\[\#3A7BFF\]) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Active pill */
body.dark button.bg-\[\#3A7BFF\] {
  background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
  color: #ffffff !important;
}

/* Hover */
body.dark button.rounded-full:hover {
  background: rgba(96, 165, 250, 0.18) !important;
}

/* ================= SORT DROPDOWN ================= */

body.dark select,
body.dark .sort-select {
  background: #020617 !important;
  color: #e5e7eb !important;
  border: 1px solid #1e293b !important;
}

/* ================= SEARCH INPUT ================= */

body.dark input[type="text"],
body.dark input[type="search"] {
  background: #020617 !important;
  color: #e5e7eb !important;
  border: 1px solid #1e293b !important;
}

body.dark input::placeholder {
  color: #94a3b8 !important;
}

/* ================= BLOG CARDS ================= */

body.dark article {
  background: linear-gradient(145deg, #020617, #0f172a) !important;
  border-color: #1e293b !important;
}

/* ================= SIDEBAR CARDS ================= */

body.dark .sidebar-card,
body.dark .rounded-xl.bg-white,
body.dark .rounded-2xl.bg-white {
  background: linear-gradient(145deg, #020617, #0f172a) !important;
  border: 1px solid #1e293b !important;
}

/* Sidebar tags */
body.dark .sidebar-card .rounded-full {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #93c5fd !important;
}

/* ================= EXPERT CARDS ================= */

body.dark .expert-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark .expert-card:hover {
  background: rgba(96, 165, 250, 0.15) !important;
  transform: translateY(-4px);
}

/* ================= BLOG HERO ONLY – DARK FIX ================= */

/* Target ONLY first hero section */
body.dark section.relative.overflow-hidden {

  background: radial-gradient(circle at top,
      #0f172a 0%,
      #020617 70%) !important;
}

/* Top badge / pill */
body.dark section.relative .inline-flex {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px;
  padding: 10px;
}


body.dark section.relative .inline-flex span,
body.dark section.relative .inline-flex i {
  color: #e5e7eb !important;
}

/* Main heading */
body.dark section.relative h1 span {
  background: linear-gradient(90deg,
      #e5e7eb,
      #b39dff,
      #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Subheading */
body.dark section.relative p {
  color: #cbd5f5 !important;
}

/* Underline stroke */
body.dark section.relative svg path {
  stroke: #93c5fd !important;
}

/* Stats numbers */
body.dark section.relative .text-\[\#000000\] {
  color: #f8fafc !important;
}

/* Stats labels */
body.dark section.relative .text-\[\#666666\] {
  color: #94a3b8 !important;
}

/* ================= BLOG HERO – DARK MODE FIX (ONLY THIS SECTION) ================= */

body.dark section.relative.overflow-hidden.bg-white {
  background: radial-gradient(circle at top,
      #0f172a 0%,
      #020617 70%) !important;
}

/* Badge */
body.dark section.relative .bg-\[\#F8F8F8\] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark section.relative .text-\[\#000000\] {
  color: #f8fafc !important;
}

body.dark section.relative .text-\[\#666666\] {
  color: #94a3b8 !important;
}

/* Heading gradient */
body.dark section.relative h1 span {
  background: linear-gradient(90deg,
      #e5e7eb,
      #b39dff,
      #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Underline stroke */
body.dark section.relative svg path {
  stroke: #93c5fd !important;
}

/* Stats hover polish (optional) */
body.dark section.relative .group:hover div:first-child {
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.6);
}

/* ===============================
   BLOG META TEXT – DARK MODE FIX
   =============================== */
body.dark .blog-meta,
body.dark .blog-meta * {
  color: #ffffff !important;
  opacity: 0.9;
}

/* ================= DARK MODE ================= */
.dark {
  background-color: #050914;
}

/* text */
.dark .text-gray-900 {
  color: #ffffff !important;
}

.dark .text-gray-800 {
  color: #e5e7eb !important;
}

.dark .text-gray-700 {
  color: #d1d5db !important;
}

.dark .text-gray-600 {
  color: #9ca3af !important;
}

.dark .text-gray-500 {
  color: #9ca3af !important;
}

/* sections */
.dark section {
  background-color: transparent !important;
}

/* glass cards */
.dark .glass-card {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* cards hover */
.dark .hover-3d:hover {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

/* buttons */
.dark .bg-white {
  background-color: #0b1220 !important;
}

.dark button {
  color: #ffffff;
}

/* inputs */
.dark input,
.dark textarea {
  background-color: #020617 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b;
}

/* dashed upload */
.dark .border-dashed {
  background-color: #020617;
  border-color: #334155;
}

/* job tags */
.dark .bg-gray-100 {
  background-color: #020617 !important;
}

.dark .text-gray-700 {
  color: #e5e7eb !important;
}

/* footer fix */
.dark footer {
  background-color: #020617;
}

/* gradient border */
.dark .gradient-border {
  background:
    linear-gradient(#020617, #020617) padding-box,
    linear-gradient(135deg, #3A7BFF, #B39DFF, #4DF2C0) border-box;
}

/* icons */
.dark i {
  color: inherit;
}

/* ================= CONTACT PAGE DARK MODE ================= */
.dark body {
  background-color: #050914;
  color: #e5e7eb;
}

/* HERO */
.dark section {
  background-color: transparent !important;
}

.dark h1,
.dark h2,
.dark h3 {
  color: #ffffff !important;
}

/* HERO TEXT */
.dark .text-gray-900 {
  color: #ffffff !important;
}

.dark .text-gray-700 {
  color: #cbd5f5 !important;
}

.dark .text-gray-600 {
  color: #9aa4d2 !important;
}

.dark .text-gray-500 {
  color: #8b94c5 !important;
}

/* CONTACT CARDS */
.dark .contact-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.dark .contact-card:hover {
  border-color: #3A7BFF;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

/* FORM CONTAINER */
.dark .form-container {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* FORM LABELS */
.dark .form-label {
  color: #e5e7eb;
}

/* INPUTS & TEXTAREA */
.dark .form-input {
  background: #020617;
  border-color: #1e293b;
  color: #ffffff;
}

.dark .form-input:focus {
  background: #020617;
  border-color: #3A7BFF;
  box-shadow: 0 0 0 3px rgba(58, 123, 255, 0.25);
}

.dark .form-input::placeholder {
  color: #64748b;
}

/* CHECKBOX */
.dark .checkbox-text {
  color: #cbd5f5;
}

/* SUBMIT BUTTON */
.dark .submit-btn {
  box-shadow: 0 10px 30px rgba(58, 123, 255, 0.4);
}

/* SUCCESS MESSAGE */
.dark .form-message {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

/* FAQ SECTION */
.dark .faq-item {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.15);
}

.dark .faq-question:hover {
  background: rgba(30, 41, 59, 0.5);
}

.dark .faq-answer p {
  color: #cbd5f5;
}

/* FAQ ICON */
.dark .faq-question i {
  color: #94a3b8;
}

/* FOOTER FIX */
.dark footer {
  background-color: #020617;
}

/* REMOVE PURE WHITE */
.dark .bg-white {
  background-color: #020617 !important;
}

/* =================================================
   BOOK DEMO PAGE – DARK MODE
   ================================================= */

/* PAGE BACKGROUND */
.dark body {
  background:
    radial-gradient(1200px 600px at 20% -10%,
      #0f172a 0%,
      #020617 55%),
    #020617;
  color: #e5e7eb;
}

/* CARD (GLASS) */
.dark .card {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

/* HEADINGS */
.dark h1,
.dark h3 {
  color: #ffffff;
}

/* SUBTITLE / TEXT */
.dark .subtitle {
  color: #cbd5f5;
}

.dark .quote {
  color: #e5e7eb;
}

.dark .author {
  color: #cbd5f5;
}

.dark .author span {
  color: #94a3b8;
}

/* INPUTS / TEXTAREA / SELECT */
.dark input,
.dark textarea,
.dark select.country-select {
  background: #020617 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b;
}

.dark input:focus,
.dark textarea:focus,
.dark select.country-select:focus {
  border-color: #3A7BFF !important;
  box-shadow: 0 0 0 3px rgba(58, 123, 255, 0.35) !important;
}

/* COUNTRY DROPDOWN ICON */
.dark .country-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* OPTIONS (CHECKBOX CARDS) */
.dark .option {
  background: rgba(2, 6, 23, 0.85);
  border-color: #1e293b;
}

.dark .option:hover {
  border-color: #3A7BFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.dark .label-text {
  color: #e5e7eb;
}

.dark .option input:checked+.control {
  background: #3A7BFF;
  border-color: #3A7BFF;
}

/* SECTION LABEL */
.dark .section-label {
  color: #e5e7eb;
}

/* BUTTON */
.dark form button {
  background: linear-gradient(135deg, #3A7BFF, #B39DFF);
  box-shadow: 0 12px 30px rgba(58, 123, 255, 0.45);
}

/* POLICY TEXT */
.dark .policy {
  color: #94a3b8;
}

/* HERO GRAPHIC CARD */
.dark .hero-graphic {
  background: linear-gradient(135deg, #020617, #0f172a);
}

/* STATS */
.dark .stat-item {
  background: linear-gradient(135deg, #020617, #0b1220);
  border-color: rgba(99, 102, 241, 0.25);
}

.dark .stat-label {
  color: #94a3b8;
}

/* BRANDS */
.dark .brands span {
  background: rgba(99, 102, 241, 0.12);
  color: #e5e7eb;
}

.dark .brands span:hover {
  background: rgba(99, 102, 241, 0.25);
}

/* REMOVE PURE WHITE */
.dark .bg-white {
  background-color: #020617 !important;
}

/* =====================================================
   WHY US + PORTFOLIO PAGE – DARK MODE
   ===================================================== */

.dark body {
  background: linear-gradient(180deg, #020617, #020617);
  color: #e5e7eb;
}

/* ---------- GLOBAL TEXT FIX ---------- */
.dark .text-gray-900 {
  color: #ffffff !important;
}

.dark .text-gray-800 {
  color: #e5e7eb !important;
}

.dark .text-gray-700 {
  color: #cbd5f5 !important;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

.dark .text-gray-500 {
  color: #94a3b8 !important;
}

/* ---------- SECTIONS ---------- */
.dark section {
  background: transparent !important;
}

/* ---------- WHITE CARDS (portfolio, process, testimonials) ---------- */
.dark .bg-white,
.dark .portfolio-item,
.dark .testimonial-card,
.dark .process-card {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

/* ---------- HOVER ---------- */
.dark .portfolio-item:hover,
.dark .bg-white:hover {
  border-color: #3A7BFF !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.75);
}

/* ---------- TAGS / BADGES ---------- */
.dark span.bg-blue,
.dark span.bg-purple,
.dark span.bg-mint {
  filter: brightness(1.1);
}

/* ---------- FILTER BUTTONS ---------- */
.dark .portfolio-filter-btn {
  background: transparent;
  border-color: #334155;
  color: #cbd5f5;
}

.dark .portfolio-filter-btn:hover {
  border-color: #3A7BFF;
  color: #3A7BFF;
  background: rgba(58, 123, 255, 0.08);
}

.dark .portfolio-filter-btn.active {
  background: #3A7BFF;
  color: white;
  border-color: #3A7BFF;
}

/* ---------- VIEW BUTTON ---------- */
.dark .portfolio-view-btn {
  background: rgba(2, 6, 23, 0.95);
  color: #3A7BFF;
}

.dark .portfolio-view-btn:hover {
  background: #020617;
}

/* ---------- TESTIMONIAL SECTION ---------- */
.dark .from-blue\/5 {
  background: linear-gradient(135deg, rgba(58, 123, 255, 0.12), rgba(77, 242, 192, 0.08));
}

/* ---------- PROCESS ICON BOX ---------- */
.dark .bg-blue\/10,
.dark .bg-mint\/10,
.dark .bg-purple\/10 {
  background: rgba(58, 123, 255, 0.15) !important;
}

/* ---------- CTA SECTION ---------- */
.dark section.py-20.bg-white {
  background: #020617 !important;
}

/* ---------- MOBILE MENU ---------- */
.dark #mobile-menu {
  background: #020617;
}

.dark .mobile-menu-link,
.dark .mobile-dropdown-header,
.dark .mobile-why-us-feature span {
  color: #e5e7eb;
}

.dark .mobile-menu-link:hover {
  background: rgba(58, 123, 255, 0.12);
}

.dark .mobile-dropdown-content {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.15);
}

/* ---------- BUTTONS ---------- */
.dark .btn-primary,
.dark .btn-animate {
  /* box-shadow: 0 12px 30px rgba(58, 123, 255, 0.45); */
}

/* ---------- SCROLLBAR ---------- */
.dark ::-webkit-scrollbar-thumb {
  background-color: #3A7BFF;
}

/* ======================================================
   PRICING / SERVICES PAGE – DARK MODE
   ====================================================== */

/* -------- PAGE BASE -------- */
.dark body {
  background: linear-gradient(180deg, #020617, #020617);
  color: #e5e7eb;
}

/* -------- GLOBAL TEXT -------- */
.dark .text-gray-900 {
  color: #ffffff !important;
}

.dark .text-gray-800 {
  color: #e5e7eb !important;
}

.dark .text-gray-700 {
  color: #cbd5f5 !important;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

.dark .text-gray-500 {
  color: #94a3b8 !important;
}

/* -------- HERO SECTION -------- */
.dark section[class*="bg-gradient"] {
  background: linear-gradient(180deg, #020617, #020617) !important;
}

/* .dark span.bg-gradient-to-r {
  box-shadow: 0 10px 30px rgba(58, 123, 255, 0.35);
} */

/* -------- WHITE CARDS (pricing, stats, testimonials, faq) -------- */
.dark .bg-white,
.dark .faq-item,
.dark .scroll-container>div {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

/* -------- PRICING CARDS -------- */
.dark .border-gray-200 {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

.dark .bg-gradient-to-b.from-white {
  background: linear-gradient(180deg, #020617, #0f172a) !important;
  border-color: #3A7BFF;
}

.dark span.bg-gray-100,
.dark span.bg-purple-100 {
  background: rgba(58, 123, 255, 0.15) !important;
  color: #cbd5f5 !important;
}

/* -------- PRICE TEXT -------- */
.dark span[data-monthly] {
  color: #ffffff !important;
}

/* -------- FEATURE LIST -------- */
.dark li span {
  color: #cbd5f5;
}

.dark li.text-gray-400 {
  color: #64748b !important;
}

/* -------- BUTTONS -------- */
.dark .btn-primary,
.dark button.btn-primary {
  background: linear-gradient(135deg, #3A7BFF, #B39DFF);
  /* box-shadow: 0 14px 35px rgba(58, 123, 255, 0.45); */
}

.dark button:hover {
  box-shadow: 0 20px 45px rgba(58, 123, 255, 0.6);
}

/* -------- TABLE -------- */
.dark table {
  background: rgba(15, 23, 42, 0.85);
}

.dark thead tr {
  background: rgba(2, 6, 23, 0.9) !important;
}

.dark tbody tr {
  border-color: rgba(148, 163, 184, 0.15);
}

.dark tbody tr:hover {
  background: rgba(58, 123, 255, 0.08);
}

/* -------- TESTIMONIALS -------- */
.dark img {
  background-color: #020617;
}

.dark .text-yellow-400 {
  filter: brightness(1.1);
}

/* -------- FAQ -------- */
.dark .faq-question span {
  color: #ffffff;
}

.dark .faq-answer p {
  color: #cbd5f5;
}

/* -------- CTA SECTION -------- */
.dark section.py-8.bg-white {
  background: #020617 !important;
}

/* -------- MOBILE MENU -------- */
.dark #mobile-menu {
  background: #020617;
}

.dark .mobile-menu-link,
.dark .mobile-dropdown-header,
.dark .mobile-why-us-feature span {
  color: #e5e7eb;
}

.dark .mobile-dropdown-content {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.15);
}

.dark .mobile-menu-link:hover {
  background: rgba(58, 123, 255, 0.12);
}

/* -------- REMOVE PURE WHITE -------- */
.dark .bg-white {
  background-color: rgba(15, 23, 42, 0.85) !important;
}

/* -------- SCROLLBAR -------- */
.dark ::-webkit-scrollbar-thumb {
  background-color: #3A7BFF;
}

/* =====================================================
   PRIVACY / TERMS PAGE – DARK MODE
   ===================================================== */

.dark body {
  background: linear-gradient(180deg, #020617, #020617);
  color: #e5e7eb;
}

/* ---------- HERO BACKGROUND ---------- */
.dark .terms-hero {
  background: linear-gradient(180deg, #020617, #020617) !important;
}

/* ---------- SIDEBAR (TOC) ---------- */
.dark .toc-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.dark .toc-header h3 {
  color: #ffffff;
}

.dark .toc-link {
  background: rgba(2, 6, 23, 0.7);
  color: #cbd5f5;
}

.dark .toc-link:hover {
  background: rgba(58, 123, 255, 0.15);
  color: #ffffff;
}

.dark .toc-link.active {
  background: rgba(58, 123, 255, 0.25);
  color: #ffffff;
}

.dark .toc-number {
  background: rgba(15, 23, 42, 1);
  color: #cbd5f5;
}

.dark .toc-link.active .toc-number {
  background: #3A7BFF;
  color: #fff;
}

/* ---------- TITLE CARD ---------- */
.dark .terms-title-section {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
}

.dark .terms-subtitle,
.dark .terms-meta {
  color: #94a3b8;
}

.dark .terms-meta {
  background: rgba(2, 6, 23, 0.7);
}

/* ---------- CONTENT SECTIONS ---------- */
.dark .content-section {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.dark .content-section:hover {
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.75);
}

.dark .section-title {
  color: #ffffff;
}

.dark .section-content {
  color: #cbd5f5;
}

.dark .section-content strong {
  color: #ffffff;
}

/* ---------- LIST MARKERS ---------- */
.dark .section-content li::marker {
  color: #3A7BFF;
}

/* ---------- HIGHLIGHT BOX ---------- */
.dark .highlight-box {
  background: linear-gradient(to right,
      rgba(58, 123, 255, 0.15),
      rgba(179, 157, 255, 0.15));
  border-left-color: #3A7BFF;
}

.dark .highlight-text p {
  color: #e5e7eb;
}

/* ---------- IMPORTANT NOTE ---------- */
.dark .important-note {
  background: rgba(124, 45, 18, 0.25);
  border-color: rgba(251, 146, 60, 0.4);
}

.dark .important-note p,
.dark .important-note h4 {
  color: #fed7aa;
}

/* ---------- LINKS ---------- */
.dark .text-link {
  color: #93c5fd;
}

.dark .text-link:hover {
  color: #ffffff;
}

/* ---------- CONTACT CTA ---------- */
.dark .contact-cta {
  background: linear-gradient(135deg, #1e3a8a, #3A7BFF);
}

.dark .contact-cta .btn {
  background: #020617;
  color: #93c5fd;
}

.dark .contact-cta .btn:hover {
  background: #020617;
  color: #ffffff;
}

/* ---------- MOBILE MENU ---------- */
.dark #mobile-menu {
  background: #020617;
}

.dark .mobile-menu-link,
.dark .mobile-dropdown-header span,
.dark .mobile-why-us-feature span {
  color: #e5e7eb;
}

.dark .mobile-dropdown-content {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.15);
}

/* ---------- SCROLLBAR ---------- */
.dark ::-webkit-scrollbar-thumb {
  background-color: #3A7BFF;
}

/* =====================================================
   REFUND POLICY – DARK MODE (EXACT PAGE FIX)
   ===================================================== */

.dark body {
  background: #020617;
  color: #e5e7eb;
}

/* ---------- HERO ---------- */
.dark .terms-hero {
  background: linear-gradient(180deg, #020617, #020617) !important;
}

/* ---------- SIDEBAR ---------- */
.dark .toc-card {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dark .toc-header {
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

.dark .toc-header h3 {
  color: #ffffff;
}

.dark .toc-link {
  background: rgba(2, 6, 23, 0.8);
  color: #cbd5f5;
}

.dark .toc-link:hover {
  background: rgba(58, 123, 255, 0.15);
  color: #ffffff;
}

.dark .toc-link.active {
  background: rgba(58, 123, 255, 0.25);
  color: #ffffff;
}

.dark .toc-number {
  background: #020617;
  color: #cbd5f5;
}

.dark .toc-link.active .toc-number {
  background: #3A7BFF;
  color: #ffffff;
}

.dark .toc-progress {
  background: rgba(148, 163, 184, 0.2);
}

/* ---------- TITLE SECTION ---------- */
.dark .terms-title-section {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
}

.dark .terms-subtitle {
  color: #94a3b8;
}

.dark .terms-meta {
  background: rgba(2, 6, 23, 0.8);
  border-color: rgba(148, 163, 184, 0.15);
  color: #cbd5f5;
}

/* ---------- CONTENT SECTIONS ---------- */
.dark .content-section {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.15);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
}

.dark .content-section:hover {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8);
}

.dark .section-header {
  border-bottom-color: rgba(148, 163, 184, 0.15);
}

.dark .section-title {
  color: #ffffff;
}

.dark .section-content {
  color: #cbd5f5;
}

.dark .section-content strong {
  color: #ffffff;
}

/* ---------- LIST MARKERS ---------- */
.dark .section-content li::marker {
  color: #3A7BFF;
}

/* ---------- HIGHLIGHT BOX ---------- */
.dark .highlight-box {
  background: linear-gradient(to right,
      rgba(58, 123, 255, 0.18),
      rgba(179, 157, 255, 0.18));
  border-left-color: #3A7BFF;
}

.dark .highlight-icon {
  background: rgba(58, 123, 255, 0.25);
  color: #93c5fd;
}

.dark .highlight-text p {
  color: #e5e7eb;
}

/* ---------- IMPORTANT NOTE ---------- */
.dark .important-note {
  background: rgba(124, 45, 18, 0.25);
  border-color: rgba(251, 146, 60, 0.4);
}

.dark .important-note h4,
.dark .important-note p {
  color: #fed7aa;
}

/* ---------- TABLES ---------- */
.dark .refund-table,
.dark .processing-table {
  background: rgba(15, 23, 42, 0.95);
}

.dark .refund-table td,
.dark .processing-table td {
  border-bottom-color: rgba(148, 163, 184, 0.15);
  color: #cbd5f5;
}

.dark .refund-table tr:hover,
.dark .processing-table tr:hover {
  background: rgba(58, 123, 255, 0.12);
}

/* ---------- CONTACT CTA ---------- */
.dark .contact-cta {
  background: linear-gradient(135deg, #1e3a8a, #3A7BFF);
}

.dark .contact-cta .btn {
  background: #020617;
  color: #93c5fd;
}

.dark .contact-cta .btn:hover {
  color: #ffffff;
}

/* ---------- MOBILE MENU ---------- */
.dark #mobile-menu {
  background: #020617;
}

.dark .mobile-menu-link,
.dark .mobile-dropdown-header span,
.dark .mobile-why-us-feature span {
  color: #e5e7eb;
}

.dark .mobile-dropdown-content {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.15);
}

/* ---------- SCROLLBAR ---------- */
.dark ::-webkit-scrollbar-thumb {
  background-color: #3A7BFF;
}

/* =====================================================
   SERVICES PAGE – DARK MODE
   ===================================================== */

.dark body {
  background: #020617;
  color: #e5e7eb;
}

/* ================= WRAPPER ================= */
.dark .service-wrap {
  background: #020617;
}

/* ================= HERO ================= */
.dark .hero-screen {
  background: radial-gradient(circle at top, #0f172a, #020617);
}

.dark .hero-badge {
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
}

.dark .hero h1,
.dark .hero-heading {
  color: #ffffff;
}

.dark .hero h1 span,
.dark .hero-gradient {
  background: linear-gradient(135deg, #60a5fa, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark .hero p {
  color: #cbd5f5;
}

/* ================= FULL WIDTH IMAGE ================= */
.dark .full-width-image {
  background: linear-gradient(to bottom, #020617, #020617);
}

.dark .stylish-banner {
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 20px 40px rgba(0, 0, 0, 0.5);
}

/* ================= TRUST SECTION ================= */
.dark .trust-section {
  background: linear-gradient(180deg, #020617, #020617);
}

.dark .trust-card {
  background: rgba(15, 23, 42, 0.9);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.8),
    0 20px 40px rgba(0, 0, 0, 0.6);
}

.dark .trust-card h3 {
  color: #ffffff;
}

.dark .trust-card li {
  color: #cbd5f5;
}

.dark .trust-card i {
  color: #60a5fa;
}

.dark .trust-image-wrap img {
  box-shadow:
    0 60px 150px rgba(0, 0, 0, 0.85),
    0 30px 70px rgba(0, 0, 0, 0.6);
}

/* ================= SECTIONS ================= */
.dark .section {
  background: #020617;
}

.dark .title {
  color: #ffffff;
}

.dark .desc {
  color: #94a3b8;
}

/* ================= SERVICES ================= */
.dark .service {
  background: rgba(15, 23, 42, 0.95);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.8);
}

.dark .service:hover {
  transform: translateY(-8px);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.9);
}

.dark .service h4 {
  color: #ffffff;
}

.dark .service p {
  color: #cbd5f5;
}

.dark .service i {
  color: #60a5fa;
}

/* ================= PROCESS ================= */
.dark .step {
  background: rgba(15, 23, 42, 0.95);
}

.dark .step h4 {
  color: #ffffff;
}

.dark .step p {
  color: #cbd5f5;
}

.dark .step span {
  background: linear-gradient(135deg, #2563eb, #22c55e);
}

/* ================= STATS ================= */
.dark .stat {
  background: rgba(15, 23, 42, 0.95);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.8);
}

.dark .stat h3 {
  color: #60a5fa;
}

.dark .stat p {
  color: #cbd5f5;
}

/* ================= CTA ================= */
.dark .cta {
  background: linear-gradient(135deg, #1e3a8a, #15803d);
}

.dark .cta h2 {
  color: #ffffff;
}

.dark .cta p {
  color: #e5e7eb;
}

.dark .cta .btn-primary {
  background: #020617;
  color: #93c5fd;
}

.dark .cta .btn-primary:hover {
  background: #2563eb;
  color: #ffffff;
}

/* ================= SCROLLBAR ================= */
.dark ::-webkit-scrollbar-thumb {
  background-color: #2563eb;
}

/* ===================== DARK MODE : TERMS PAGE ===================== */

.dark body {
  background: #020617;
  color: #e5e7eb;
}

/* PAGE BG */
.dark .terms-hero {
  background: linear-gradient(135deg, #020617, #020617);
}

/* SIDEBAR */
.dark .toc-card {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
}

.dark .toc-header h3 {
  color: #e5e7eb;
}

.dark .toc-link {
  background: #020617;
  color: #cbd5f5;
}

.dark .toc-link:hover {
  background: #1e293b;
  color: #60a5fa;
}

.dark .toc-link.active {
  background: #1e293b;
  color: #60a5fa;
}

.dark .toc-number {
  background: #020617;
  color: #60a5fa;
}

.dark .toc-link.active .toc-number {
  background: #2563eb;
  color: #fff;
}

/* TITLE SECTION */
.dark .terms-title-section {
  background: #0f172a;
  border-color: #1e293b;
}

.dark .terms-subtitle,
.dark .terms-meta {
  color: #cbd5f5;
  background: #020617;
  border-color: #1e293b;
}

/* CONTENT SECTIONS */
.dark .content-section {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
}

.dark .section-title {
  color: #ffffff;
}

.dark .section-content {
  color: #cbd5f5;
}

/* HIGHLIGHT BOX */
.dark .highlight-box {
  background: linear-gradient(to right,
      rgba(59, 130, 246, .15),
      rgba(34, 197, 94, .15));
  border-left-color: #60a5fa;
}

.dark .highlight-text p {
  color: #e5e7eb;
}

/* IMPORTANT NOTE */
.dark .important-note {
  background: #1c1917;
  border-color: #92400e;
}

.dark .important-note p {
  color: #fde68a;
}

/* TABLE OF CONTENT PROGRESS */
.dark .toc-progress {
  background: #1e293b;
}

/* BACK TO TOP */
.dark .back-to-top a {
  background: linear-gradient(135deg, #2563eb, #22c55e);
}

/* CONTACT CTA */
.dark .contact-cta {
  background: linear-gradient(135deg, #1e3a8a, #15803d);
}

.dark .contact-cta .btn {
  background: #020617;
  color: #93c5fd;
}

/* MOBILE MENU FIX */
.dark .mobile-menu-content {
  background: #020617;
}

.dark .mobile-menu-link,
.dark .mobile-dropdown-header {
  color: #e5e7eb;
}

/* SCROLLBAR */
.dark ::-webkit-scrollbar-thumb {
  background: #2563eb;
}

/* ===================== DARK MODE — WHY US PAGE ===================== */

.dark body {
  background: #020617;
  color: #e5e7eb;
}

/* ================= HERO ================= */
.dark section.bg-gradient-to-br {
  background: linear-gradient(135deg, #020617, #020617) !important;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  color: #f8fafc;
}

.dark p {
  color: #cbd5f5;
}

/* ================= GLASS CARDS ================= */
.dark .glass-card {
  background: rgba(15, 23, 42, .75);
  border: 1px solid rgba(148, 163, 184, .15);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  backdrop-filter: blur(18px);
}

.dark .hover-3d:hover {
  box-shadow: 0 35px 90px rgba(0, 0, 0, .85);
}

/* ================= BADGES / STATS ================= */
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900 {
  color: #e5e7eb !important;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

/* ================= VALUE SECTION ================= */
.dark section.bg-white {
  background: #020617;
}

/* ================= PROCESS SECTION ================= */
.dark section.bg-gradient-to-br.from-gray-50 {
  background: linear-gradient(135deg, #020617, #020617);
}

/* STEP NUMBERS */
.dark span.gradient-text {
  filter: brightness(1.15);
}

/* ================= BRAND SECTION ================= */
.dark .brand-card {
  background: #0f172a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}

.dark .brand-name {
  color: #e5e7eb;
}

.dark .brand-icon {
  background: #020617;
}

/* EDGE FADE FIX */
.dark .from-gray-50 {
  --tw-gradient-from: #020617;
}

.dark .to-gray-100 {
  --tw-gradient-to: #020617;
}

/* ================= TESTIMONIAL SECTION ================= */
.dark section.bg-white.py-24 {
  background: #020617;
}

.dark .slide p {
  color: #f8fafc !important;
}

.dark .slide p span {
  color: #60a5fa !important;
}

.dark .text-black\/60 {
  color: #94a3b8 !important;
}

/* ARROWS */
.dark #prevBtn,
.dark #nextBtn {
  border-color: #334155;
  color: #e5e7eb;
}

.dark #prevBtn:hover,
.dark #nextBtn:hover {
  background: rgba(34, 197, 94, .15);
}

/* SLIDE COUNTER */
.dark #slideCounter {
  color: #94a3b8;
}

/* INDICATORS */
.dark .indicator {
  background: #475569 !important;
}

.dark .indicator.active {
  background: #3b82f6 !important;
}

/* ================= CTA SECTION ================= */
.dark .bg-black\/20 {
  background: rgba(15, 23, 42, .6);
}

.dark .border-white\/40 {
  border-color: rgba(148, 163, 184, .3);
}

/* ================= FOOTER FIX ================= */
.dark footer {
  background: #020617;
}

/* ================= SCROLLBAR ================= */
.dark ::-webkit-scrollbar-thumb {
  background: #2563eb;
}

/* ================= DARK MODE ================= */

body.dark .nextgen-section {
  background: #0b0b0b;
}

body.dark .nextgen-top h2 {
  color: #ffffff;
}

body.dark .nextgen-right p {
  color: #b5b5b5;
}

/* Explore button */
body.dark .explore-btn {
  border-color: #ffffff;
  color: #ffffff;
}

body.dark .explore-btn:hover {
  background: #ffffff;
  color: #000000;
}

/* Cards */
body.dark .ng-card {
  background: #111111;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.04);
}

body.dark .ng-card h3 {
  color: #ffffff;
}

body.dark .ng-card p {
  color: #b5b5b5;
}

/* Arrow button */
body.dark .arrow-btn {
  border-color: #ffffff;
  color: #ffffff;
}

body.dark .ng-card:hover .arrow-btn {
  background: #ffffff;
  color: #000000;
}

/* ===== FORCE MOBILE OVERRIDE ===== */
@media (max-width: 768px) {

  .hero-actions {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .hero-btn {
    padding: 10px 18px !important;
    font-size: 12.5px !important;
    line-height: 1.2;
  }

  .hero-btn span {
    font-size: 12.5px !important;
  }

  .hero-link {
    font-size: 12.5px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  .hero-brands {
    font-size: 12px !important;
    gap: 10px 12px;
  }

  .hero-brands strong {
    font-size: 12px !important;
  }
}

/* EXTRA SMALL PHONES */
@media (max-width: 480px) {
  .hero-btn {
    padding: 9px 16px !important;
    font-size: 12px !important;
  }

  .hero-btn span {
    font-size: 12px !important;
  }

  .hero-link {
    font-size: 12px !important;
  }

  .hero-brands {
    font-size: 11.5px !important;
  }
}

.mobile-dropdown-content.active {
  max-height: 6000px;
  /* 🔥 no cut ever */
}