/*!
 * Theme two
 */
@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400;1,600&family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap);
:root {
  --font-family-primary: Graphik, IBM Plex Sans Arabic, sans-serif;
  --font-family-secondary: Mabry Pro, IBM Plex Sans Arabic, serif;
  --font-family-tertiary: Graphik, IBM Plex Sans Arabic, serif;
  --font-family-serif: Playfair Display, IBM Plex Sans Arabic, serif;
  --radius: 50rem;
  --border-radius: 50rem;
  --color-primary: #9333ea;
  --bs-primary-rgb: 147, 51, 234;
  --color-primary-: #9333ea;
  --bs-primary--rgb: 147, 51, 234;
  --color-primary-10: #faf7ff;
  --bs-primary-10-rgb: 250, 247, 255;
  --color-primary-25: #f3ecff;
  --bs-primary-25-rgb: 243, 236, 255;
  --color-primary-50: #faf7ff;
  --bs-primary-50-rgb: 250, 247, 255;
  --color-primary-100: #f3ecff;
  --bs-primary-100-rgb: 243, 236, 255;
  --color-primary-200: #e9d8ff;
  --bs-primary-200-rgb: 233, 216, 255;
  --color-primary-300: #d8b4fe;
  --bs-primary-300-rgb: 216, 180, 254;
  --color-primary-400: #c084fc;
  --bs-primary-400-rgb: 192, 132, 252;
  --color-primary-500: #a855f7;
  --bs-primary-500-rgb: 168, 85, 247;
  --color-primary-600: #9333ea;
  --bs-primary-600-rgb: 147, 51, 234;
  --color-primary-700: #7c3aed;
  --bs-primary-700-rgb: 124, 58, 237;
  --color-primary-800: #6b21a8;
  --bs-primary-800-rgb: 107, 33, 168;
  --color-primary-900: #581c87;
  --bs-primary-900-rgb: 88, 28, 135;
  --color-primary-950: #3b0764;
  --bs-primary-950-rgb: 59, 7, 100;
  --color-secondary: #ec4899;
  --bs-secondary-rgb: 236, 72, 153;
  --color-secondary-: #ec4899;
  --bs-secondary--rgb: 236, 72, 153;
  --color-secondary-10: #fdf2f8;
  --bs-secondary-10-rgb: 253, 242, 248;
  --color-secondary-25: #fce7f3;
  --bs-secondary-25-rgb: 252, 231, 243;
  --color-secondary-50: #fdf2f8;
  --bs-secondary-50-rgb: 253, 242, 248;
  --color-secondary-100: #fce7f3;
  --bs-secondary-100-rgb: 252, 231, 243;
  --color-secondary-200: #fbcfe8;
  --bs-secondary-200-rgb: 251, 207, 232;
  --color-secondary-300: #f9a8d4;
  --bs-secondary-300-rgb: 249, 168, 212;
  --color-secondary-400: #f472b6;
  --bs-secondary-400-rgb: 244, 114, 182;
  --color-secondary-500: #ec4899;
  --bs-secondary-500-rgb: 236, 72, 153;
  --color-secondary-600: #db2777;
  --bs-secondary-600-rgb: 219, 39, 119;
  --color-secondary-700: #be185d;
  --bs-secondary-700-rgb: 190, 24, 93;
  --color-secondary-800: #9d174d;
  --bs-secondary-800-rgb: 157, 23, 77;
  --color-secondary-900: #831843;
  --bs-secondary-900-rgb: 131, 24, 67;
  --color-secondary-950: #500724;
  --bs-secondary-950-rgb: 80, 7, 36;
  --color-gray: #45454c;
  --bs-gray-rgb: 69, 69, 76;
  --color-gray-: #45454c;
  --bs-gray--rgb: 69, 69, 76;
  --color-gray-10: rgb(249.42, 249.42, 249.63);
  --bs-gray-10-rgb: 249, 249, 250;
  --color-gray-25: rgb(245.7, 245.7, 246.05);
  --bs-gray-25-rgb: 246, 246, 246;
  --color-gray-50: rgb(236.4, 236.4, 237.1);
  --bs-gray-50-rgb: 236, 236, 237;
  --color-gray-100: rgb(217.8, 217.8, 219.2);
  --bs-gray-100-rgb: 218, 218, 219;
  --color-gray-200: rgb(180.6, 180.6, 183.4);
  --bs-gray-200-rgb: 181, 181, 183;
  --color-gray-300: rgb(143.4, 143.4, 147.6);
  --bs-gray-300-rgb: 143, 143, 148;
  --color-gray-400: rgb(106.2, 106.2, 111.8);
  --bs-gray-400-rgb: 106, 106, 112;
  --color-gray-500: #45454c;
  --bs-gray-500-rgb: 69, 69, 76;
  --color-gray-600: rgb(55.2, 55.2, 60.8);
  --bs-gray-600-rgb: 55, 55, 61;
  --color-gray-700: rgb(41.4, 41.4, 45.6);
  --bs-gray-700-rgb: 41, 41, 46;
  --color-gray-800: rgb(27.6, 27.6, 30.4);
  --bs-gray-800-rgb: 28, 28, 30;
  --color-gray-900: rgb(13.8, 13.8, 15.2);
  --bs-gray-900-rgb: 14, 14, 15;
  --color-gray-950: rgb(6.9, 6.9, 7.6);
  --bs-gray-950-rgb: 7, 7, 8;
  --sizes-heading-display-1-size: 8rem;
  --sizes-heading-display-1-lh: 1;
  --sizes-heading-display-1-lp: -0.32rem;
  --sizes-heading-display-2-size: 6rem;
  --sizes-heading-display-2-lh: 1;
  --sizes-heading-display-2-lp: -0.24rem;
  --sizes-heading-display-3-size: 5rem;
  --sizes-heading-display-3-lh: 1;
  --sizes-heading-display-3-lp: -0.2rem;
  --sizes-heading-display-4-size: 4.5rem;
  --sizes-heading-display-4-lh: 1;
  --sizes-heading-display-4-lp: -0.18rem;
  --sizes-heading-display-5-size: 4rem;
  --sizes-heading-display-5-lh: 1;
  --sizes-heading-display-5-lp: -0.16rem;
  --sizes-heading-display-6-size: 3.5rem;
  --sizes-heading-display-6-lh: 1;
  --sizes-heading-display-6-lp: -0.14rem;
  --sizes-heading-h1-size: 3rem;
  --sizes-heading-h1-lh: 1.1;
  --sizes-heading-h1-lp: -0.12rem;
  --sizes-heading-h2-size: 2.5rem;
  --sizes-heading-h2-lh: 1.1;
  --sizes-heading-h2-lp: -0.08rem;
  --sizes-heading-h3-size: 2rem;
  --sizes-heading-h3-lh: 1.1;
  --sizes-heading-h3-lp: -0.07rem;
  --sizes-heading-h4-size: 1.5rem;
  --sizes-heading-h4-lh: 1.2;
  --sizes-heading-h4-lp: -0.06rem;
  --sizes-heading-h5-size: 1.25rem;
  --sizes-heading-h5-lh: 1.2;
  --sizes-heading-h5-lp: -0.04rem;
  --sizes-heading-h6-size: 1rem;
  --sizes-heading-h6-lh: 1.2;
  --sizes-heading-h6-lp: -0.004rem;
  --bs-bg-opacity: 1;
  --bs-text-opacity: 1;
  --bs-border-opacity: 1;
}
.from-primary {
  --uc-gradient-from: #9333ea;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
.to-primary-25 {
  --uc-gradient-to: #f3ecff;
}
.to-primary-100 {
  --uc-gradient-to: #f3ecff;
}
.to-primary-700 {
  --uc-gradient-to: #7c3aed;
}
.to-primary-800 {
  --uc-gradient-to: #6b21a8;
}
:where(.uc-dark) .dark\:from-primary-700 {
  --uc-gradient-from: #7c3aed !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
.from-secondary {
  --uc-gradient-from: #ec4899;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
.from-gray-700 {
  --uc-gradient-from: rgb(41.4, 41.4, 45.6);
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
.from-gray-800 {
  --uc-gradient-from: rgb(27.6, 27.6, 30.4);
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
.to-gray-900 {
  --uc-gradient-to: rgb(13.8, 13.8, 15.2);
}
:where(.uc-dark) .dark\:from-gray-700 {
  --uc-gradient-from: rgb(41.4, 41.4, 45.6) !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
:where(.uc-dark) .dark\:from-gray-800 {
  --uc-gradient-from: rgb(27.6, 27.6, 30.4) !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
:where(.uc-dark) .dark\:to-gray-900 {
  --uc-gradient-to: rgb(13.8, 13.8, 15.2) !important;
}
:where(.uc-dark) .dark\:from-gray-900 {
  --uc-gradient-from: rgb(13.8, 13.8, 15.2) !important;
  --uc-gradient-stops: var(--uc-gradient-from), var(--uc-gradient-to);
}
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-900-rgb), var(--bs-text-opacity)) !important;
}
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-primary-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-primary-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.bg-primary-25 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-25-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.bg-primary-50 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-50-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.bg-primary-100 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-100-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.text-primary-200 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-200-rgb), var(--bs-text-opacity)) !important;
}
.bg-primary-300 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-300-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-primary-300 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-primary-300-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.text-primary-400 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-400-rgb), var(--bs-text-opacity)) !important;
}
.bg-primary-400 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-400-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:text-primary-400 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-400-rgb), var(--bs-text-opacity)) !important;
}
.bg-primary-600 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-600-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-primary-600 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-primary-600-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.hover\:text-primary-600:hover {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-600-rgb), var(--bs-text-opacity)) !important;
}
.text-primary-700 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-700-rgb), var(--bs-text-opacity)) !important;
}
.bg-primary-700 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-700-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:text-primary-700 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-700-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-primary-700 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-primary-700-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:hover\:text-primary-700:hover {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-700-rgb), var(--bs-text-opacity)) !important;
}
.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-secondary-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.text-secondary-200 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-200-rgb), var(--bs-text-opacity)) !important;
}
.text-secondary-300 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-300-rgb), var(--bs-text-opacity)) !important;
}
.bg-secondary-300 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-secondary-300-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.hover\:bg-secondary-300:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-secondary-300-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-secondary-600 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-secondary-600-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.text-secondary-900 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-900-rgb), var(--bs-text-opacity)) !important;
}
.text-gray {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-rgb), var(--bs-text-opacity)) !important;
}
.bg-gray-25 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-25-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.bg-gray-50 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-50-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-gray-50 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-50-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.hover\:bg-gray-50:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-50-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.text-gray-100 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-100-rgb), var(--bs-text-opacity)) !important;
}
.bg-gray-100 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-100-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-gray-100 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-100-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:text-gray-100 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-100-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-gray-100 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-100-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.text-gray-200 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-200-rgb), var(--bs-text-opacity)) !important;
}
.border-gray-200 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-200-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:text-gray-200 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-200-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-300 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-300-rgb), var(--bs-text-opacity)) !important;
}
.bg-gray-300 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-300-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-gray-300 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-300-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:text-gray-300 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-300-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-gray-300 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-300-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-gray-300 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-300-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.text-gray-400 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-400-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:border-gray-400 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-400-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.text-gray-500 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-500-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:border-gray-500 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-500-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:hover\:bg-gray-500:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-500-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.text-gray-600 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-600-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-gray-600 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-600-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-gray-600 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-600-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.hover\:bg-gray-600:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-600-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:text-gray-700 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-700-rgb), var(--bs-text-opacity)) !important;
}
.uc-dark .dark\:bg-gray-700 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-700-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-gray-700 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-700-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:hover\:bg-gray-700:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-700-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.bg-gray-800 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-800-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:bg-gray-800 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-800-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-gray-800 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-800-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:hover\:bg-gray-800:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-800-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.text-gray-900 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-900-rgb), var(--bs-text-opacity)) !important;
}
.bg-gray-900 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-900-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.border-gray-900 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-900-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:bg-gray-900 {
  --bs-bg-opacity: 1;
  background-color: rgba(
    var(--bs-gray-900-rgb),
    var(--bs-bg-opacity)
  ) !important;
}
.uc-dark .dark\:border-gray-900 {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--bs-gray-900-rgb),
    var(--bs-border-opacity)
  ) !important;
}
.uc-dark .dark\:hover\:text-gray-900:hover {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-900-rgb), var(--bs-text-opacity)) !important;
}
:where(.uc-dark) .dark\:bg-white,
:where(.uc-dark) .dark\:hover\:bg-white:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
:where(.uc-dark) .dark\:bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}
:where(.uc-dark) .dark\:hover\:text-white:hover,
:where(.uc-dark) .dark\:text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
:where(.uc-dark) .dark\:hover\:text-dark:hover,
:where(.uc-dark) .dark\:text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}
:where(.uc-dark) .dark\:border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}
body {
  font-family: var(--font-primary);
  font-weight: 400;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 700;
}
.display-5 {
  font-size: var(--sizes-heading-display-5-size) !important;
  line-height: var(--sizes-heading-display-5-lh) !important;
  letter-spacing: var(--sizes-heading-display-5-lp) !important;
}
.h1,
h1 {
  font-size: var(--sizes-heading-h1-size) !important;
  line-height: var(--sizes-heading-h1-lh) !important;
  letter-spacing: var(--sizes-heading-h1-lp) !important;
}
.h2,
h2 {
  font-size: var(--sizes-heading-h2-size) !important;
  line-height: var(--sizes-heading-h2-lh) !important;
  letter-spacing: var(--sizes-heading-h2-lp) !important;
}
.h3,
h3 {
  font-size: var(--sizes-heading-h3-size) !important;
  line-height: var(--sizes-heading-h3-lh) !important;
  letter-spacing: var(--sizes-heading-h3-lp) !important;
}
.h4,
h4 {
  font-size: var(--sizes-heading-h4-size) !important;
  line-height: var(--sizes-heading-h4-lh) !important;
  letter-spacing: var(--sizes-heading-h4-lp) !important;
}
.h5,
h5 {
  font-size: var(--sizes-heading-h5-size) !important;
  line-height: var(--sizes-heading-h5-lh) !important;
  letter-spacing: var(--sizes-heading-h5-lp) !important;
}
.h6,
h6 {
  font-size: var(--sizes-heading-h6-size) !important;
  line-height: var(--sizes-heading-h6-lh) !important;
  letter-spacing: var(--sizes-heading-h6-lp) !important;
}
@media (min-width: 459px) {
  .sm\:display-2 {
    font-size: var(--sizes-heading-display-2-size) !important;
    line-height: var(--sizes-heading-display-2-lh) !important;
    letter-spacing: var(--sizes-heading-display-2-lp) !important;
  }
  .sm\:display-6 {
    font-size: var(--sizes-heading-display-6-size) !important;
    line-height: var(--sizes-heading-display-6-lh) !important;
    letter-spacing: var(--sizes-heading-display-6-lp) !important;
  }
  .sm\:h1 {
    font-size: var(--sizes-heading-h1-size) !important;
    line-height: var(--sizes-heading-h1-lh) !important;
    letter-spacing: var(--sizes-heading-h1-lp) !important;
  }
  .sm\:h2 {
    font-size: var(--sizes-heading-h2-size) !important;
    line-height: var(--sizes-heading-h2-lh) !important;
    letter-spacing: var(--sizes-heading-h2-lp) !important;
  }
  .sm\:h3 {
    font-size: var(--sizes-heading-h3-size) !important;
    line-height: var(--sizes-heading-h3-lh) !important;
    letter-spacing: var(--sizes-heading-h3-lp) !important;
  }
  .sm\:h4 {
    font-size: var(--sizes-heading-h4-size) !important;
    line-height: var(--sizes-heading-h4-lh) !important;
    letter-spacing: var(--sizes-heading-h4-lp) !important;
  }
  .sm\:h5 {
    font-size: var(--sizes-heading-h5-size) !important;
    line-height: var(--sizes-heading-h5-lh) !important;
    letter-spacing: var(--sizes-heading-h5-lp) !important;
  }
}
@media (min-width: 768px) {
  .md\:display-5 {
    font-size: var(--sizes-heading-display-5-size) !important;
    line-height: var(--sizes-heading-display-5-lh) !important;
    letter-spacing: var(--sizes-heading-display-5-lp) !important;
  }
  .md\:display-6 {
    font-size: var(--sizes-heading-display-6-size) !important;
    line-height: var(--sizes-heading-display-6-lh) !important;
    letter-spacing: var(--sizes-heading-display-6-lp) !important;
  }
  .md\:h1 {
    font-size: var(--sizes-heading-h1-size) !important;
    line-height: var(--sizes-heading-h1-lh) !important;
    letter-spacing: var(--sizes-heading-h1-lp) !important;
  }
  .md\:h2 {
    font-size: var(--sizes-heading-h2-size) !important;
    line-height: var(--sizes-heading-h2-lh) !important;
    letter-spacing: var(--sizes-heading-h2-lp) !important;
  }
  .md\:h3 {
    font-size: var(--sizes-heading-h3-size) !important;
    line-height: var(--sizes-heading-h3-lh) !important;
    letter-spacing: var(--sizes-heading-h3-lp) !important;
  }
  .md\:h4 {
    font-size: var(--sizes-heading-h4-size) !important;
    line-height: var(--sizes-heading-h4-lh) !important;
    letter-spacing: var(--sizes-heading-h4-lp) !important;
  }
  .md\:h5 {
    font-size: var(--sizes-heading-h5-size) !important;
    line-height: var(--sizes-heading-h5-lh) !important;
    letter-spacing: var(--sizes-heading-h5-lp) !important;
  }
}
@media (min-width: 992px) {
  .lg\:display-4 {
    font-size: var(--sizes-heading-display-4-size) !important;
    line-height: var(--sizes-heading-display-4-lh) !important;
    letter-spacing: var(--sizes-heading-display-4-lp) !important;
  }
  .lg\:display-5 {
    font-size: var(--sizes-heading-display-5-size) !important;
    line-height: var(--sizes-heading-display-5-lh) !important;
    letter-spacing: var(--sizes-heading-display-5-lp) !important;
  }
  .lg\:display-6 {
    font-size: var(--sizes-heading-display-6-size) !important;
    line-height: var(--sizes-heading-display-6-lh) !important;
    letter-spacing: var(--sizes-heading-display-6-lp) !important;
  }
  .lg\:h1 {
    font-size: var(--sizes-heading-h1-size) !important;
    line-height: var(--sizes-heading-h1-lh) !important;
    letter-spacing: var(--sizes-heading-h1-lp) !important;
  }
  .lg\:h2 {
    font-size: var(--sizes-heading-h2-size) !important;
    line-height: var(--sizes-heading-h2-lh) !important;
    letter-spacing: var(--sizes-heading-h2-lp) !important;
  }
  .lg\:h3 {
    font-size: var(--sizes-heading-h3-size) !important;
    line-height: var(--sizes-heading-h3-lh) !important;
    letter-spacing: var(--sizes-heading-h3-lp) !important;
  }
  .lg\:h4 {
    font-size: var(--sizes-heading-h4-size) !important;
    line-height: var(--sizes-heading-h4-lh) !important;
    letter-spacing: var(--sizes-heading-h4-lp) !important;
  }
  .lg\:h5 {
    font-size: var(--sizes-heading-h5-size) !important;
    line-height: var(--sizes-heading-h5-lh) !important;
    letter-spacing: var(--sizes-heading-h5-lp) !important;
  }
  .lg\:h6 {
    font-size: var(--sizes-heading-h6-size) !important;
    line-height: var(--sizes-heading-h6-lh) !important;
    letter-spacing: var(--sizes-heading-h6-lp) !important;
  }
}
@media (min-width: 1200px) {
  .xl\:display-2 {
    font-size: var(--sizes-heading-display-2-size) !important;
    line-height: var(--sizes-heading-display-2-lh) !important;
    letter-spacing: var(--sizes-heading-display-2-lp) !important;
  }
  .xl\:display-3 {
    font-size: var(--sizes-heading-display-3-size) !important;
    line-height: var(--sizes-heading-display-3-lh) !important;
    letter-spacing: var(--sizes-heading-display-3-lp) !important;
  }
  .xl\:display-4 {
    font-size: var(--sizes-heading-display-4-size) !important;
    line-height: var(--sizes-heading-display-4-lh) !important;
    letter-spacing: var(--sizes-heading-display-4-lp) !important;
  }
  .xl\:display-5 {
    font-size: var(--sizes-heading-display-5-size) !important;
    line-height: var(--sizes-heading-display-5-lh) !important;
    letter-spacing: var(--sizes-heading-display-5-lp) !important;
  }
  .xl\:display-6 {
    font-size: var(--sizes-heading-display-6-size) !important;
    line-height: var(--sizes-heading-display-6-lh) !important;
    letter-spacing: var(--sizes-heading-display-6-lp) !important;
  }
  .xl\:h1 {
    font-size: var(--sizes-heading-h1-size) !important;
    line-height: var(--sizes-heading-h1-lh) !important;
    letter-spacing: var(--sizes-heading-h1-lp) !important;
  }
  .xl\:h2 {
    font-size: var(--sizes-heading-h2-size) !important;
    line-height: var(--sizes-heading-h2-lh) !important;
    letter-spacing: var(--sizes-heading-h2-lp) !important;
  }
  .xl\:h3 {
    font-size: var(--sizes-heading-h3-size) !important;
    line-height: var(--sizes-heading-h3-lh) !important;
    letter-spacing: var(--sizes-heading-h3-lp) !important;
  }
  .xl\:h4 {
    font-size: var(--sizes-heading-h4-size) !important;
    line-height: var(--sizes-heading-h4-lh) !important;
    letter-spacing: var(--sizes-heading-h4-lp) !important;
  }
  .xl\:h5 {
    font-size: var(--sizes-heading-h5-size) !important;
    line-height: var(--sizes-heading-h5-lh) !important;
    letter-spacing: var(--sizes-heading-h5-lp) !important;
  }
}
.btn {
  border-radius: var(--border-radius);
  font-family: var(--font-family-tertiary);
  font-weight: 500;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #9333ea;
  --bs-btn-border-color: #9333ea;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7c3aed;
  --bs-btn-hover-border-color: #7c3aed;
  --bs-btn-focus-shadow-rgb: 147, 51, 234;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6b21a8;
  --bs-btn-active-border-color: #6b21a8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #9333ea;
  --bs-btn-disabled-border-color: #9333ea;
  background: linear-gradient(135deg, #9333ea, #ec4899);
  border: none;
}
.btn-primary-200 {
  --bs-btn-color: #7c3aed;
  --bs-btn-bg: #e9d8ff;
  --bs-btn-border-color: #e9d8ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d8b4fe;
  --bs-btn-hover-border-color: #d8b4fe;
  --bs-btn-focus-shadow-rgb: 233, 216, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c084fc;
  --bs-btn-active-border-color: #c084fc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #7c3aed;
  --bs-btn-disabled-bg: #e9d8ff;
  --bs-btn-disabled-border-color: #e9d8ff;
}
.btn-primary-700 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #7c3aed;
  --bs-btn-border-color: #7c3aed;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6b21a8;
  --bs-btn-hover-border-color: #6b21a8;
  --bs-btn-focus-shadow-rgb: 124, 58, 237;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #581c87;
  --bs-btn-active-border-color: #581c87;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #7c3aed;
  --bs-btn-disabled-border-color: #7c3aed;
}
.btn-outline-primary {
  --bs-btn-color: #9333ea;
  --bs-btn-border-color: #9333ea;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9333ea;
  --bs-btn-hover-border-color: #9333ea;
  --bs-btn-focus-shadow-rgb: 147, 51, 234;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7c3aed;
  --bs-btn-active-border-color: #7c3aed;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #9333ea;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #9333ea;
  --bs-gradient: none;
}
.btn-alt-primary {
  background: #fff !important;
  color: #9333ea !important;
}
.btn-alt-primary:focus,
.btn-alt-primary:hover {
  background: #9333ea !important;
  color: #fff !important;
}
.btn-ghost-primary {
  background: #f3ecff !important;
  color: #9333ea !important;
}
.btn-ghost-primary:focus,
.btn-ghost-primary:hover {
  background: #e9d8ff !important;
  color: #9333ea !important;
}
.btn-secondary {
  --bs-btn-color: #7c3aed;
  --bs-btn-bg: #f3ecff;
  --bs-btn-border-color: #f3ecff;
  --bs-btn-hover-color: #7c3aed;
  --bs-btn-hover-bg: #e9d8ff;
  --bs-btn-hover-border-color: #e9d8ff;
  --bs-btn-focus-shadow-rgb: 243, 236, 255;
  --bs-btn-active-color: #7c3aed;
  --bs-btn-active-bg: #d8b4fe;
  --bs-btn-active-border-color: #d8b4fe;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #7c3aed;
  --bs-btn-disabled-bg: #f3ecff;
  --bs-btn-disabled-border-color: #f3ecff;
  background: #f3ecff;
  color: #7c3aed;
  border: none;
}
.btn-gray {
  --bs-btn-color: #fff;
  --bs-btn-bg: #45454c;
  --bs-btn-border-color: #45454c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(55.2, 55.2, 60.8);
  --bs-btn-hover-border-color: rgb(55.2, 55.2, 60.8);
  --bs-btn-focus-shadow-rgb: 106, 106, 112;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(41.4, 41.4, 45.6);
  --bs-btn-active-border-color: rgb(41.4, 41.4, 45.6);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #45454c;
  --bs-btn-disabled-border-color: #45454c;
}
.text-gradient {
  background-color: var(--gradient-first);
  background-image: linear-gradient(
    var(--gradient-angle),
    var(--gradient-first),
    var(--gradient-second)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}
.text-muted {
  --bs-text-opacity: 0.5;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}
.text-muted:where(.uc-dark),
:where(.uc-dark) .text-muted {
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.opacity-10 {
  opacity: 0.1 !important;
}
.opacity-20 {
  opacity: 0.2 !important;
}
.opacity-25 {
  opacity: 0.25 !important;
}
.opacity-40 {
  opacity: 0.4 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-60 {
  opacity: 0.6 !important;
}
.opacity-70 {
  opacity: 0.7 !important;
}
.opacity-75 {
  opacity: 0.75 !important;
}
.opacity-80 {
  opacity: 0.8 !important;
}
:where(.uc-dark) .dark\:opacity-80 {
  opacity: 0.8 !important;
}
:where(.uc-dark) .dark\:opacity-90 {
  opacity: 0.9 !important;
}
.opacity-100 {
  opacity: 1 !important;
}
:where(.uc-dark) .dark\:bg-opacity-0 {
  --bs-bg-opacity: 0 !important;
}
.bg-opacity-5,
.hover\:bg-opacity-5:hover {
  --bs-bg-opacity: 0.05 !important;
}
:where(.uc-dark) .dark\:bg-opacity-5 {
  --bs-bg-opacity: 0.05 !important;
}
.bg-opacity-10,
.hover\:bg-opacity-10:hover {
  --bs-bg-opacity: 0.1 !important;
}
:where(.uc-dark) .dark\:bg-opacity-10 {
  --bs-bg-opacity: 0.1 !important;
}
.bg-opacity-15 {
  --bs-bg-opacity: 0.15 !important;
}
:where(.uc-dark) .dark\:bg-opacity-15 {
  --bs-bg-opacity: 0.15 !important;
}
.bg-opacity-40 {
  --bs-bg-opacity: 0.4 !important;
}
.bg-opacity-50 {
  --bs-bg-opacity: 0.5 !important;
}
:where(.uc-dark) .dark\:bg-opacity-50 {
  --bs-bg-opacity: 0.5 !important;
}
.bg-opacity-70,
.hover\:bg-opacity-70:hover {
  --bs-bg-opacity: 0.7 !important;
}
.bg-opacity-80 {
  --bs-bg-opacity: 0.8 !important;
}
:where(.uc-dark) .dark\:hover\:bg-opacity-80:hover {
  --bs-bg-opacity: 0.8 !important;
}
.bg-opacity-90,
.hover\:bg-opacity-90:hover {
  --bs-bg-opacity: 0.9 !important;
}
:where(.uc-dark) .dark\:text-opacity-10 {
  --bs-text-opacity: 0.1 !important;
}
.text-opacity-20 {
  --bs-text-opacity: 0.2 !important;
}
:where(.uc-dark) .dark\:text-opacity-50 {
  --bs-text-opacity: 0.5 !important;
}
.text-opacity-60 {
  --bs-text-opacity: 0.6 !important;
}
:where(.uc-dark) .dark\:text-opacity-60 {
  --bs-text-opacity: 0.6 !important;
}
.hover\:text-opacity-70:hover,
.text-opacity-70 {
  --bs-text-opacity: 0.7 !important;
}
:where(.uc-dark) .dark\:text-opacity-70 {
  --bs-text-opacity: 0.7 !important;
}
.text-opacity-75 {
  --bs-text-opacity: 0.75 !important;
}
.text-opacity-80 {
  --bs-text-opacity: 0.8 !important;
}
:where(.uc-dark) .dark\:text-opacity-100 {
  --bs-text-opacity: 1 !important;
}
:where(.uc-dark) .dark\:border-opacity-0 {
  --bs-border-opacity: 0 !important;
}
.border-opacity-5 {
  --bs-border-opacity: 0.05 !important;
}
.border-opacity-10 {
  --bs-border-opacity: 0.1 !important;
}
:where(.uc-dark) .dark\:border-opacity-10 {
  --bs-border-opacity: 0.1 !important;
}
.border-opacity-15 {
  --bs-border-opacity: 0.15 !important;
}
:where(.uc-dark) .dark\:border-opacity-15 {
  --bs-border-opacity: 0.15 !important;
}
.border-opacity-20 {
  --bs-border-opacity: 0.2 !important;
}
:where(.uc-dark) .dark\:border-opacity-20 {
  --bs-border-opacity: 0.2 !important;
}
:where(.uc-dark) .dark\:border-opacity-30 {
  --bs-border-opacity: 0.3 !important;
}
.hover\:border-opacity-40:hover {
  --bs-border-opacity: 0.4 !important;
}

/* Custom gradient styles for new color scheme */
.gradient-primary {
  background: linear-gradient(135deg, #9333ea, #ec4899) !important;
}

.gradient-alternative {
  background: linear-gradient(135deg, #a855f7, #f472b6) !important;
}

.gradient-button-primary {
  background: linear-gradient(135deg, #9333ea, #ec4899) !important;
}

.text-gradient-primary {
  background: linear-gradient(135deg, #9333ea, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-alternative {
  background: linear-gradient(135deg, #a855f7, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Override button primary with gradient */
.btn-primary:not(.btn-outline-primary) {
  background: linear-gradient(135deg, #9333ea, #ec4899) !important;
  border: none !important;
}

.btn-primary:hover:not(.btn-outline-primary) {
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
  opacity: 1;
}

/* Override button secondary to use light style */
.btn-secondary:not(.btn-outline-secondary) {
  background: #f3ecff !important;
  border: 1px solid #e9d8ff !important;
  color: #7c3aed !important;
}

.btn-secondary:hover:not(.btn-outline-secondary) {
  background: #e9d8ff !important;
  border: 1px solid #d8b4fe !important;
  color: #7c3aed !important;
}

/* Add tertiary color utilities */
.text-tertiary {
  color: #a855f7 !important;
}

.bg-tertiary {
  background-color: #a855f7 !important;
}

.border-tertiary {
  border-color: #a855f7 !important;
}

.bg-tertiary-100 {
  background-color: #f3ecff !important;
}

.bg-tertiary-200 {
  background-color: #e9d8ff !important;
}

.text-tertiary-700 {
  color: #7c3aed !important;
}

/* Override background colors with gradients */
.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

.bg-primary {
  background: linear-gradient(135deg, #9333ea, #ec4899) !important;
}

.bg-primary-50,
.bg-primary-100 {
  background: linear-gradient(
    135deg,
    rgba(147, 51, 234, 0.1),
    rgba(236, 72, 153, 0.1)
  ) !important;
}

.bg-secondary-300 {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.3),
    rgba(236, 72, 153, 0.3)
  ) !important;
}

/* Override hover states with gradients */
.hover\:bg-secondary-300:hover {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.4),
    rgba(236, 72, 153, 0.4)
  ) !important;
}

/* Card backgrounds */
.card,
.bg-gray-50,
.bg-gray-25 {
  background: #ffffff !important;
}

/* Override section backgrounds */
section.bg-secondary,
div.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Ensure gradient shows on elements with opacity */
.bg-secondary.bg-opacity-10,
.bg-secondary.bg-opacity-5 {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.1),
    rgba(236, 72, 153, 0.1)
  ) !important;
}

.bg-secondary.bg-opacity-50 {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.5),
    rgba(236, 72, 153, 0.5)
  ) !important;
}

/* Dark mode gradient overrides */
.uc-dark .dark\:bg-secondary {
  background: linear-gradient(135deg, #a855f7, #f472b6) !important;
}

.uc-dark .dark\:bg-primary {
  background: linear-gradient(135deg, #9333ea, #f472b6) !important;
}

/* Badge and pill gradients */
.badge.bg-secondary,
.rounded-pill.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Icon box gradients */
.icon-box.bg-secondary,
.feature-box.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* More specific overrides for common patterns */
.panel.bg-secondary,
.section-outer.bg-secondary,
.section-inner.bg-secondary,
.feature-item.bg-secondary,
.tier.bg-secondary,
.breadcrumbs.bg-secondary,
.uc-modal-dialog.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Icon boxes with circular shape */
.icon-box.bg-primary,
.cstack.bg-primary {
  background: linear-gradient(135deg, #9333ea, #ec4899) !important;
}

.icon-box.bg-secondary,
.cstack.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Checkmark icons */
i.bg-secondary.unicon-checkmark {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Inline text highlights */
span.bg-secondary,
.d-inline-flex.bg-secondary {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.8),
    rgba(236, 72, 153, 0.8)
  ) !important;
}

span.bg-primary {
  background: linear-gradient(
    135deg,
    rgba(147, 51, 234, 0.8),
    rgba(236, 72, 153, 0.8)
  ) !important;
}

/* Feature items with hover */
.features-item.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

.features-item.bg-secondary:hover,
.features-item.hover\:bg-secondary-300:hover {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.9),
    rgba(236, 72, 153, 0.9)
  ) !important;
}

/* Sections with rounded corners */
.rounded-2.bg-secondary,
.rounded-3.bg-secondary,
.rounded-1-5.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Modal dialogs */
.uc-modal-dialog.bg-secondary {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.95),
    rgba(236, 72, 153, 0.95)
  ) !important;
}

/* Sign in/up pages */
.sign-in.bg-secondary,
.section.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Pricing tiers */
.tier.panel.bg-secondary {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.9),
    rgba(236, 72, 153, 0.9)
  ) !important;
}

/* Override any remaining solid backgrounds */
[class*="bg-secondary"]:not(.btn):not(.badge) {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

[class*="bg-primary"]:not(.btn):not(.badge):not(.text-primary) {
  background: linear-gradient(135deg, #190e64, #43559e) !important;
}

/* Ensure text remains readable on gradients */
.bg-secondary.text-primary,
.bg-primary.text-secondary {
  position: relative;
  z-index: 1;
}

/* Light mode body background */
body {
  background: #ffffff !important;
  min-height: 100vh;
}

/* Dark Mode Comprehensive Overrides */
:where(.uc-dark) {
  /* Dark mode body and surface colors */
  --body-color-background: #0f0f23;
  --body-color-text: #f7fafc;
  --bs-body-bg: #0f0f23;
  --bs-body-bg-rgb: 15, 15, 35;
  --bs-body-color: #f7fafc;
  --bs-body-color-rgb: 247, 250, 252;
  --bs-secondary-color: #e2e8f0;
  --bs-secondary-color-rgb: 226, 232, 240;
  --bs-secondary-bg: #1a1a2e;
  --bs-secondary-bg-rgb: 26, 26, 46;
  --bs-tertiary-color: #a0aec0;
  --bs-tertiary-color-rgb: 160, 174, 192;
  --bs-tertiary-bg: #16213e;
  --bs-tertiary-bg-rgb: 22, 33, 62;
  --bs-border-color: #2d3748;
}

:where(.uc-dark) body {
  background: #0f0f23 !important;
  color: #f7fafc !important;
}

/* Dark mode card and surface backgrounds */
:where(.uc-dark) .card,
:where(.uc-dark) .bg-gray-50,
:where(.uc-dark) .bg-gray-25 {
  background: #16213e !important;
}

/* Dark mode gradient overrides */
:where(.uc-dark) .bg-secondary {
  background: linear-gradient(135deg, #a855f7, #f472b6) !important;
}

:where(.uc-dark) .bg-primary {
  background: linear-gradient(135deg, #9333ea, #f472b6) !important;
}

:where(.uc-dark) section.bg-secondary,
:where(.uc-dark) div.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #f472b6) !important;
}

:where(.uc-dark) .icon-box.bg-secondary,
:where(.uc-dark) .feature-box.bg-secondary,
:where(.uc-dark) .cstack.bg-secondary {
  background: linear-gradient(135deg, #a855f7, #f472b6) !important;
}

:where(.uc-dark) .icon-box.bg-primary,
:where(.uc-dark) .cstack.bg-primary {
  background: linear-gradient(135deg, #9333ea, #f472b6) !important;
}

/* Dark mode button overrides */
:where(.uc-dark) .btn-primary:not(.btn-outline-primary) {
  background: linear-gradient(135deg, #a855f7, #f472b6) !important;
}

:where(.uc-dark) .btn-primary:hover:not(.btn-outline-primary) {
  background: linear-gradient(135deg, #9333ea, #ec4899) !important;
}

:where(.uc-dark) .btn-secondary:not(.btn-outline-secondary) {
  background: #6b21a8 !important;
  color: #e9d8ff !important;
  border: 1px solid #7c3aed !important;
}

:where(.uc-dark) .btn-secondary:hover:not(.btn-outline-secondary) {
  background: #7c3aed !important;
  color: #f3ecff !important;
}