

.accordion-body:hover{
    background: none !important;
}

  :root {
    --background-light: 255, 255, 255; /* Light background */
    --foreground-light: 0, 0%, 0%; /* Light foreground (black) */
    --background-dark: 0, 0%, 15%; /* Dark background */
    --foreground-dark: 0, 0%, 100%; /* Dark foreground (white) */
    --accent: 220, 50%, 60%;
    --gradient-light: linear-gradient(135deg, #d1e8ff, #e7c6ff);
    --gradient-dark: linear-gradient(135deg, #333, #000);
  }

  body {
    background: var(--gradient-light);
    color: hsl(var(--foreground-light));
    transition: background 0.3s ease, color 0.3s ease;
  }

  body.dark-mode {
    background: var(--gradient-dark);
    color: hsl(var(--foreground-dark));
  }

  .banner {
    background-image: url('https://digiwarms.com/assets/img/banner-background/Course-Page-banner.webp');
    background-size: cover;
    background-position: center;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  }

  .breadcrumb a {
    color: hsl(var(--accent));
    text-decoration: none;
    margin-right: 5px;
  }

  .breadcrumb span {
    color: inherit;
    margin-right: 5px;
  }

  .sidebar {
    position: sticky;
    top: 20px;
    padding: 1rem;
    border-radius: 8px;
    background-color: rgba(103, 58, 183, 0.23);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
  }

  .price .original-price {
    text-decoration: line-through;
    color: #777;
  }

  .discounted-price {
    color: hsl(var(--accent));
  }

  .buy-now {
    background-color: hsl(var(--accent));
    border: none;
    color: hsl(var(--foreground-light));
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    transition: background 0.3s ease, color 0.3s ease;
  }

  body.dark-mode .buy-now {
    color: hsl(var(--foreground-dark));
  }

  .card {
    background-color: #f8f9fa; /* Light background */
    color: #000; /* Light text */
    transition: background 0.3s ease, color 0.3s ease;
  }

  body.dark-mode .card {
    background-color: #1a1a1a; /* Dark background */
    color: #fff; /* Dark text */
  }

  .accordion-button::before {
    content: none !important;
  }

  .accordion-body:hover {
    border-radius: 10px;
  }

  /* Sticky Button: Hide on smaller screens */
  @media (max-width: 767.98px) {
    .sticky-button {
      display: none !important;
    }
  }

