body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  background-attachment: fixed;
  color: #1a1a1f;
  position: relative;
}

[data-bs-theme=dark] body,
body.theme-dark {
  background: #131317;
  color: white;
}

#dithering-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}

#dithering-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(135deg, rgba(111, 206, 250, 0.12) 0%, rgba(138, 103, 235, 0.134) 25%, rgba(34, 67, 57, 0.1) 50%, rgba(88, 86, 214, 0.2) 75%, rgba(45, 65, 94, 0.12) 100%);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.content {
  position: relative;
  z-index: 2; /* Ensures the content stays above the overlay */
}

.navbar-dark {
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.company-logo {
  filter: invert(1);
}

[data-bs-theme=dark] .company-logo {
  filter: none;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: #1a1a1f !important;
}

.navbar-dark .nav-link:hover {
  color: #5856D6 !important;
}

[data-bs-theme=dark] .navbar-dark .navbar-brand,
[data-bs-theme=dark] .navbar-dark .nav-link {
  color: #fff !important;
}

[data-bs-theme=dark] .navbar-dark .nav-link:hover {
  color: #818cf8 !important;
}