.my-hero {	
	padding: 3rem 0;	
	background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%),radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(var(--bs-warning-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(var(--bs-danger-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(var(--bs-danger-rgb), 0.5), transparent 50%);	
}
    
.code-snippet .card-body {
		position: relative;
}

.code-snippet .copy-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 10;
}

.code-snippet pre {
		margin-top: 10px;
}

.my-text-gradient {
	background: linear-gradient(to right, var(--bs-code-color) 0%, var(--bs-emphasis-color) 80%);	
  -webkit-background-clip: text;
  color: transparent;
}

/* Demo mode warning banner - theme-aware styling for light and dark modes */
.demo-mode-banner {
  /* Use Bootstrap's warning color with opacity for background - adapts to theme */
  background-color: rgba(var(--bs-warning-rgb), 0.15) !important;
  border-bottom: 2px solid rgba(var(--bs-warning-rgb), 0.5) !important;
  color: var(--bs-body-color);
}

/* Dark mode specific adjustments - darker background, brighter text */
[data-bs-theme="dark"] .demo-mode-banner {
  background-color: rgba(var(--bs-warning-rgb), 0.3) !important;
  border-bottom-color: rgba(var(--bs-warning-rgb), 0.7) !important;
  color: #ffc107;
}

/* Ensure close button is visible in both themes */
.demo-mode-banner .btn-close {
  opacity: 0.8;
}

[data-bs-theme="dark"] .demo-mode-banner .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}