funuicss 3.6.18 → 3.6.19

package/css/fun.css

@@ -208,7 +208,7 @@
   --snackBarZindex:20;
   --notificationZindex:29;
   --inputButtonHeight:2.4rem;
-  --inputPadding:0.5rem 0;
+  --inputPadding:1rem;
   --inputRoundedPadding:0.5rem 1rem;
   --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
   --raised:0 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.3);
@@ -218,44 +218,140 @@
 
 }
 
-
-
-/* fonts scalling */
 :root {
-  /* ===== Font Scale - Perfect Fourth (1.333 ratio) ===== */
-  --font-size-smaller: 0.75rem;    /* 12px */
-  --font-size-small: 0.875rem;     /* 14px */
-  --font-size-base: 1rem;          /* 16px - Base */
-  --font-size-big: 1.25rem;        /* 20px */
-  --font-size-bigger: 1.5rem;      /* 24px */
-  --font-size-h6: 1rem;            /* 16px */
-  --font-size-h5: 1.25rem;         /* 20px */
-  --font-size-h4: 1.5rem;          /* 24px */
-  --font-size-h3: 1.75rem;         /* 28px */
-  --font-size-h2: 2rem;            /* 32px */
-  --font-size-h1: 2.5rem;          /* 40px */
-  --font-size-jumbo: 3rem;         /* 48px */
-
-  /* ===== Line Height Scale ===== */
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-  --line-height-loose: 2;
+  /* ===== Base Font Sizes ===== */
+  --font-size-smaller: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-h6: 1rem;
+  --font-size-h5: 1.25rem;
+  --font-size-h4: 1.5rem;
+  --font-size-h3: 1.75rem;
+  --font-size-h2: 2rem;
+  --font-size-h1: 2.5rem;
+  --font-size-big: 3rem;
+  --font-size-bigger: 3.5rem;
+  --font-size-jumbo: 4rem;
+
+  /* ===== Text Scale (for utility classes) ===== */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 3.75rem;
+  --text-7xl: 4.5rem;
+  --text-8xl: 6rem;
+  --text-9xl: 8rem;
+  --text-10xl: 10rem;
+
+  /* ===== Base Line Heights ===== */
+  --line-height-tight: 1.1;
+  --line-height-snug: 1.2;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.8;
 
   /* Element-specific line heights */
-  --line-height-smaller: var(--line-height-normal);
-  --line-height-small: var(--line-height-normal);
+  --line-height-smaller: var(--line-height-loose);
+  --line-height-small: var(--line-height-relaxed);
   --line-height-body: var(--line-height-normal);
-  --line-height-big: var(--line-height-normal);
-  --line-height-bigger: var(--line-height-normal);
+  --line-height-big: var(--line-height-tight);
+  --line-height-bigger: var(--line-height-tight);
   --line-height-h6: var(--line-height-normal);
   --line-height-h5: var(--line-height-normal);
   --line-height-h4: var(--line-height-normal);
-  --line-height-h3: var(--line-height-normal);
-  --line-height-h2: var(--line-height-tight);
+  --line-height-h3: var(--line-height-snug);
+  --line-height-h2: var(--line-height-snug);
   --line-height-h1: var(--line-height-tight);
   --line-height-jumbo: var(--line-height-tight);
 
+  /* ===== Leading Scale (for utility classes) ===== */
+  --leading-xs: var(--line-height-loose);
+  --leading-sm: var(--line-height-relaxed);
+  --leading-base: var(--line-height-normal);
+  --leading-lg: var(--line-height-normal);
+  --leading-xl: var(--line-height-normal);
+  --leading-2xl: var(--line-height-normal);
+  --leading-3xl: var(--line-height-snug);
+  --leading-4xl: var(--line-height-snug);
+  --leading-5xl: var(--line-height-tight);
+  --leading-6xl: var(--line-height-tight);
+  --leading-7xl: var(--line-height-tight);
+  --leading-8xl: var(--line-height-tight);
+  --leading-9xl: 1;
+  --leading-10xl: 1;
+
+  /* ===== Responsive Scaling Factors ===== */
+  --scale-mobile: 1;
+  --scale-tablet: 1.1;
+  --scale-desktop: 1.2;
+  --scale-large-desktop: 1.3;
+
+  /* ===== Responsive Font Size Variables ===== */
+  /* Headings */
+  --font-size-h1-responsive: var(--font-size-h1);
+  --font-size-h2-responsive: var(--font-size-h2);
+  --font-size-h3-responsive: var(--font-size-h3);
+  --font-size-h4-responsive: var(--font-size-h4);
+  --font-size-h5-responsive: var(--font-size-h5);
+  --font-size-h6-responsive: var(--font-size-h6);
+  
+  /* Special sizes */
+  --font-size-big-responsive: var(--font-size-big);
+  --font-size-bigger-responsive: var(--font-size-bigger);
+  --font-size-jumbo-responsive: var(--font-size-jumbo);
+  
+  /* Text utilities */
+  --text-xs-responsive: var(--text-xs);
+  --text-sm-responsive: var(--text-sm);
+  --text-base-responsive: var(--text-base);
+  --text-lg-responsive: var(--text-lg);
+  --text-xl-responsive: var(--text-xl);
+  --text-2xl-responsive: var(--text-2xl);
+  --text-3xl-responsive: var(--text-3xl);
+  --text-4xl-responsive: var(--text-4xl);
+  --text-5xl-responsive: var(--text-5xl);
+  --text-6xl-responsive: var(--text-6xl);
+  --text-7xl-responsive: var(--text-7xl);
+  --text-8xl-responsive: var(--text-8xl);
+  --text-9xl-responsive: var(--text-9xl);
+  --text-10xl-responsive: var(--text-10xl);
+
+  /* ===== Responsive Line Height Variables ===== */
+  /* Headings */
+  --line-height-h1-responsive: var(--line-height-h1);
+  --line-height-h2-responsive: var(--line-height-h2);
+  --line-height-h3-responsive: var(--line-height-h3);
+  --line-height-h4-responsive: var(--line-height-h4);
+  --line-height-h5-responsive: var(--line-height-h5);
+  --line-height-h6-responsive: var(--line-height-h6);
+  
+  /* Special sizes */
+  --line-height-big-responsive: var(--line-height-big);
+  --line-height-bigger-responsive: var(--line-height-bigger);
+  --line-height-jumbo-responsive: var(--line-height-jumbo);
+  
+  /* Text utilities */
+  --leading-xs-responsive: var(--leading-xs);
+  --leading-sm-responsive: var(--leading-sm);
+  --leading-base-responsive: var(--leading-base);
+  --leading-lg-responsive: var(--leading-lg);
+  --leading-xl-responsive: var(--leading-xl);
+  --leading-2xl-responsive: var(--leading-2xl);
+  --leading-3xl-responsive: var(--leading-3xl);
+  --leading-4xl-responsive: var(--leading-4xl);
+  --leading-5xl-responsive: var(--leading-5xl);
+  --leading-6xl-responsive: var(--leading-6xl);
+  --leading-7xl-responsive: var(--leading-7xl);
+  --leading-8xl-responsive: var(--leading-8xl);
+  --leading-9xl-responsive: var(--leading-9xl);
+  --leading-10xl-responsive: var(--leading-10xl);
+
   /* ===== Font Weights ===== */
   --font-weight-thin: 100;
   --font-weight-extra-light: 200;
@@ -271,15 +367,15 @@
   --font-weight-smaller: var(--font-weight-normal);
   --font-weight-small: var(--font-weight-normal);
   --font-weight-body: var(--font-weight-normal);
-  --font-weight-big: var(--font-weight-normal);
-  --font-weight-bigger: var(--font-weight-normal);
+  --font-weight-big: var(--font-weight-bold);
+  --font-weight-bigger: var(--font-weight-bold);
   --font-weight-h6: var(--font-weight-medium);
   --font-weight-h5: var(--font-weight-medium);
   --font-weight-h4: var(--font-weight-medium);
   --font-weight-h3: var(--font-weight-semibold);
   --font-weight-h2: var(--font-weight-semibold);
   --font-weight-h1: var(--font-weight-bold);
-  --font-weight-jumbo: var(--font-weight-bold);
+  --font-weight-jumbo: var(--font-weight-black);
 
   /* ===== Text Decoration ===== */
   --text-decoration-none: none;
@@ -352,278 +448,247 @@
   --letter-spacing-smaller: var(--letter-spacing-normal);
   --letter-spacing-small: var(--letter-spacing-normal);
   --letter-spacing-body: var(--letter-spacing-normal);
-  --letter-spacing-big: var(--letter-spacing-normal);
-  --letter-spacing-bigger: var(--letter-spacing-normal);
+  --letter-spacing-big: var(--letter-spacing-tight);
+  --letter-spacing-bigger: var(--letter-spacing-tight);
   --letter-spacing-h6: var(--letter-spacing-normal);
   --letter-spacing-h5: var(--letter-spacing-normal);
   --letter-spacing-h4: var(--letter-spacing-normal);
   --letter-spacing-h3: var(--letter-spacing-normal);
   --letter-spacing-h2: var(--letter-spacing-tight);
   --letter-spacing-h1: var(--letter-spacing-tight);
-  --letter-spacing-jumbo: var(--letter-spacing-tight);
-
-  /* ===== Word Spacing ===== */
-  --word-spacing-tight: -0.05em;
-  --word-spacing-normal: 0em;
-  --word-spacing-wide: 0.05em;
-  --word-spacing-wider: 0.1em;
-
-  /* ===== Responsive Typography Scales ===== */
-  /* Mobile-first scale (base) */
-  --scale-mobile: 1.2;
-  
-  /* Tablet scale */
-  --scale-tablet: 1.25;
-  
-  /* Desktop scale */
-  --scale-desktop: 1.333;
-}
-
-
-
-/* For WebKit browsers (Chrome, Edge, Brave, Safari) */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--borderColor, #999); /* Darker thumb */
-  border-radius: 10px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--dark500, #666); /* Hover effect */
-}
-
-/* Optional: Hide scrollbar buttons (arrows) */
-::-webkit-scrollbar-button {
-  display: none;
-}
-
-
-  
-*{
-  font-family: var(--font-font);
-  scroll-behavior: smooth;
-  transition: 0.3s ease-in-out all !important;
-}
-
-
-.card, 
-.input,
-.navigation-bar , 
-.modal , 
-.modal-content,
-.button,
-.text,
-.div,
-.table,
-.table-head,
-.table-body,
-.table-row,
-.table-cell,
-.list,
-.list-item,
-.breadcrumb,
-.breadcrumb-link,
-.breadcrumb-item,
-.loader,
-.grid,
-.col,
-.container,
-.step-container,
-.step,
-.step-header,
-.step-line,
-.dropdown,
-.dropdown-menu,
-.dropdown-item,
-.accordion,
-.accordion-header,
-.accordion-content,
-.progress-bar{
-  color: var(--text-color) ;
+  --letter-spacing-jumbo: var(--letter-spacing-tighter);
 }
 
-/* normalise css */
+/* ===== RESPONSIVE BREAKPOINTS ===== */
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box !important;
-}
-
-@media (prefers-reduced-motion: no-preference) {
+/* Tablet and above */
+@media (min-width: 768px) {
+  :root {
+    /* Responsive font sizes */
+    --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-tablet));
+    --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-tablet));
+    --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-tablet));
+    --font-size-h4-responsive: calc(var(--font-size-h4) * var(--scale-tablet));
+    --font-size-h5-responsive: calc(var(--font-size-h5) * var(--scale-tablet));
+    --font-size-h6-responsive: calc(var(--font-size-h6) * var(--scale-tablet));
+    
+    --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-tablet));
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-tablet));
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-tablet));
+    
+    /* Text utilities */
+    --text-3xl-responsive: calc(var(--text-3xl) * var(--scale-tablet));
+    --text-4xl-responsive: calc(var(--text-4xl) * var(--scale-tablet));
+    --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-tablet));
+    --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-tablet));
+    --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-tablet));
+    --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-tablet));
+    --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-tablet));
+    --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-tablet));
+
+    /* Responsive line heights - tighter for larger screens */
+    --line-height-h1-responsive: calc(var(--line-height-h1) - 0.1);
+    --line-height-h2-responsive: calc(var(--line-height-h2) - 0.05);
+    --line-height-h3-responsive: calc(var(--line-height-h3) - 0.05);
+    --line-height-big-responsive: calc(var(--line-height-big) - 0.1);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.1);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.1);
+    
+    --leading-4xl-responsive: calc(var(--leading-4xl) - 0.1);
+    --leading-5xl-responsive: calc(var(--leading-5xl) - 0.1);
+    --leading-6xl-responsive: calc(var(--leading-6xl) - 0.1);
+    --leading-7xl-responsive: calc(var(--leading-7xl) - 0.1);
+    --leading-8xl-responsive: calc(var(--leading-8xl) - 0.1);
+    --leading-9xl-responsive: 0.9;
+    --leading-10xl-responsive: 0.9;
+  }
+}
+
+/* Desktop and above */
+@media (min-width: 1024px) {
   :root {
-    scroll-behavior: smooth;
+    /* Responsive font sizes */
+    --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-desktop));
+    --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-desktop));
+    --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-desktop));
+    --font-size-h4-responsive: calc(var(--font-size-h4) * var(--scale-desktop));
+    --font-size-h5-responsive: calc(var(--font-size-h5) * var(--scale-desktop));
+    --font-size-h6-responsive: calc(var(--font-size-h6) * var(--scale-desktop));
+    
+    --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-desktop));
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-desktop));
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-desktop));
+    
+    /* Text utilities */
+    --text-2xl-responsive: calc(var(--text-2xl) * var(--scale-desktop));
+    --text-3xl-responsive: calc(var(--text-3xl) * var(--scale-desktop));
+    --text-4xl-responsive: calc(var(--text-4xl) * var(--scale-desktop));
+    --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-desktop));
+    --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-desktop));
+    --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-desktop));
+    --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-desktop));
+    --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-desktop));
+    --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-desktop));
+
+    /* Responsive line heights - even tighter for desktop */
+    --line-height-h1-responsive: calc(var(--line-height-h1) - 0.15);
+    --line-height-h2-responsive: calc(var(--line-height-h2) - 0.1);
+    --line-height-h3-responsive: calc(var(--line-height-h3) - 0.1);
+    --line-height-big-responsive: calc(var(--line-height-big) - 0.15);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.15);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.15);
+    
+    --leading-3xl-responsive: calc(var(--leading-3xl) - 0.05);
+    --leading-4xl-responsive: calc(var(--leading-4xl) - 0.15);
+    --leading-5xl-responsive: calc(var(--leading-5xl) - 0.15);
+    --leading-6xl-responsive: calc(var(--leading-6xl) - 0.15);
+    --leading-7xl-responsive: calc(var(--leading-7xl) - 0.15);
+    --leading-8xl-responsive: calc(var(--leading-8xl) - 0.15);
+    --leading-9xl-responsive: 0.85;
+    --leading-10xl-responsive: 0.85;
+  }
+}
+
+/* Large desktop */
+@media (min-width: 1440px) {
+  :root {
+    /* Responsive font sizes */
+    --font-size-h1-responsive: calc(var(--font-size-h1) * var(--scale-large-desktop));
+    --font-size-h2-responsive: calc(var(--font-size-h2) * var(--scale-large-desktop));
+    --font-size-h3-responsive: calc(var(--font-size-h3) * var(--scale-large-desktop));
+    --font-size-big-responsive: calc(var(--font-size-big) * var(--scale-large-desktop));
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * var(--scale-large-desktop));
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * var(--scale-large-desktop));
+    
+    /* Text utilities */
+    --text-5xl-responsive: calc(var(--text-5xl) * var(--scale-large-desktop));
+    --text-6xl-responsive: calc(var(--text-6xl) * var(--scale-large-desktop));
+    --text-7xl-responsive: calc(var(--text-7xl) * var(--scale-large-desktop));
+    --text-8xl-responsive: calc(var(--text-8xl) * var(--scale-large-desktop));
+    --text-9xl-responsive: calc(var(--text-9xl) * var(--scale-large-desktop));
+    --text-10xl-responsive: calc(var(--text-10xl) * var(--scale-large-desktop));
+
+    /* Responsive line heights - tightest for large desktop */
+    --line-height-h1-responsive: calc(var(--line-height-h1) - 0.2);
+    --line-height-h2-responsive: calc(var(--line-height-h2) - 0.15);
+    --line-height-big-responsive: calc(var(--line-height-big) - 0.2);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) - 0.2);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) - 0.2);
+    
+    --leading-5xl-responsive: calc(var(--leading-5xl) - 0.2);
+    --leading-6xl-responsive: calc(var(--leading-6xl) - 0.2);
+    --leading-7xl-responsive: calc(var(--leading-7xl) - 0.2);
+    --leading-8xl-responsive: calc(var(--leading-8xl) - 0.2);
+    --leading-9xl-responsive: 0.8;
+    --leading-10xl-responsive: 0.8;
+  }
+}
+
+/* Mobile adjustments for very large fonts */
+@media (max-width: 480px) {
+  :root {
+    /* Reduce huge fonts slightly for mobile */
+    --font-size-big-responsive: calc(var(--font-size-big) * 0.8);
+    --font-size-bigger-responsive: calc(var(--font-size-bigger) * 0.8);
+    --font-size-jumbo-responsive: calc(var(--font-size-jumbo) * 0.8);
+    
+    --text-8xl-responsive: calc(var(--text-8xl) * 0.8);
+    --text-9xl-responsive: calc(var(--text-9xl) * 0.8);
+    --text-10xl-responsive: calc(var(--text-10xl) * 0.8);
+    
+    /* Slightly increase line heights for mobile readability */
+    --line-height-big-responsive: calc(var(--line-height-big) + 0.1);
+    --line-height-bigger-responsive: calc(var(--line-height-bigger) + 0.1);
+    --line-height-jumbo-responsive: calc(var(--line-height-jumbo) + 0.1);
   }
 }
-body {
-  padding: 0px;
-  margin: 0px;
-  box-sizing: border-box;
-  line-height: var(--bd-line-height);
-  font-weight: var(--bd-font-weight);
-  background-color: var(--bd-theme);
-  color: var(--bd-color);
-  letter-spacing: normal;
-  font-size: var(--bdfontSize) ;
-
-}
-
-
-.theme{
-  background-color: var(--bd-theme);
-}
-.raiseTheme{
-  background-color: var(--raiseThemes) !important;
-}
-
-/* links and href */
-a,
-Link {
-  text-decoration: none;
-  background: transparent;
-  transition: 0.3s;
-  color: var(--linkColor);
-  font-weight: 500;
-}
-a:hover {
-  color: var(--linkHover);
-}
-
-button {
-  -webkit-appearance: button;
-}
-link {
-  text-decoration: none;
-}
-link:hover {
-  text-decoration: none;
-}
-
-/* Background Color */
-.pop{
-  background: var(--lighter) !important;
-}
-
-
-
-input:disabled,
-select:disabled,
-button:disabled {
-  background-color: var(--muted) !important;
-  color: var(--white) !important;
-  cursor: not-allowed;
-  opacity: 0.6 !important;
-}
 
-/* Typography */
-.baseColor, .text-base{
-  color: var(--text-color) !important;}
-
-body {
-  font-size: var(--text-base);
-  font-weight: var(--bd-font-weight) !important;
-  line-height: var(--leading-normal) !important;
-  letter-spacing: normal;
-  background-color: var(--page-bg) !important;
-  color: var(--text-color) !important;
-}
-.bg, .page-bg{
-  background-color: var(--page-bg) !important;
-}
+/* ===== APPLY RESPONSIVE VARIABLES TO ELEMENTS ===== */
 
 /* Font utilities with matching line heights */
 .text-xs {
-  font-size: var(--text-xs);
-  line-height: var(--leading-xs);
+  font-size: var(--text-xs-responsive);
+  line-height: var(--leading-xs-responsive);
 }
 
 .text-sm {
-  font-size: var(--text-sm);
-  line-height: var(--leading-sm);
+  font-size: var(--text-sm-responsive);
+  line-height: var(--leading-sm-responsive);
 }
 
 .text-base {
-  font-size: var(--text-base);
-  line-height: var(--leading-base);
+  font-size: var(--text-base-responsive);
+  line-height: var(--leading-base-responsive);
 }
 
 .text-lg {
-  font-size: var(--text-lg);
-  line-height: var(--leading-lg);
+  font-size: var(--text-lg-responsive);
+  line-height: var(--leading-lg-responsive);
 }
 
 .text-xl {
-  font-size: var(--text-xl);
-  line-height: var(--leading-xl);
+  font-size: var(--text-xl-responsive);
+  line-height: var(--leading-xl-responsive);
   font-weight: 400;
 }
 
 .text-2xl {
-  font-size: var(--text-2xl);
-  line-height: var(--leading-2xl);
+  font-size: var(--text-2xl-responsive);
+  line-height: var(--leading-2xl-responsive);
   font-weight: 500;
 }
 
 .text-3xl {
-  font-size: var(--text-3xl);
-  line-height: var(--leading-3xl);
+  font-size: var(--text-3xl-responsive);
+  line-height: var(--leading-3xl-responsive);
   font-weight: 500;
 }
 
 .text-4xl {
-  font-size: var(--text-4xl);
-  line-height: var(--leading-4xl);
-        font-weight: 600;
+  font-size: var(--text-4xl-responsive);
+  line-height: var(--leading-4xl-responsive);
+  font-weight: 600;
 }
 
 .text-5xl {
-  font-size: var(--text-5xl);
-  line-height: var(--leading-5xl);
-      font-weight: 600;
+  font-size: var(--text-5xl-responsive);
+  line-height: var(--leading-5xl-responsive);
+  font-weight: 600;
 }
+
 .text-6xl {
-  font-size: var(--text-6xl);
-  line-height: var(--leading-6xl);
-      font-weight: 600;
+  font-size: var(--text-6xl-responsive);
+  line-height: var(--leading-6xl-responsive);
+  font-weight: 600;
 }
 
 .text-7xl {
-  font-size: var(--text-7xl);
-  line-height: var(--leading-7xl);
-    font-weight: 600;
+  font-size: var(--text-7xl-responsive);
+  line-height: var(--leading-7xl-responsive);
+  font-weight: 600;
 }
 
 .text-8xl {
-  font-size: var(--text-8xl);
-  line-height: var(--leading-8xl);
-    font-weight: 800;
+  font-size: var(--text-8xl-responsive);
+  line-height: var(--leading-8xl-responsive);
+  font-weight: 800;
 }
 
 .text-9xl {
-  font-size: var(--text-9xl);
-  line-height: var(--leading-9xl);
-    font-weight: 900;
+  font-size: var(--text-9xl-responsive);
+  line-height: var(--leading-9xl-responsive);
+  font-weight: 900;
 }
 
 .text-10xl {
-  font-size: var(--text-10xl);
-  line-height: var(--leading-10xl);
-    font-weight: 900;
+  font-size: var(--text-10xl-responsive);
+  line-height: var(--leading-10xl-responsive);
+  font-weight: 900;
 }
 
 .text-big {
-  font-size: var(--font-size-big);
-  line-height: var(--line-height-big);
+  font-size: var(--font-size-big-responsive);
+  line-height: var(--line-height-big-responsive);
   font-weight: var(--font-weight-big);
   font-style: var(--font-style-big);
   text-decoration: var(--text-decoration-big);
@@ -632,8 +697,8 @@ body {
 }
 
 .text-bigger {
-  font-size: var(--font-size-bigger);
-  line-height: var(--line-height-bigger);
+  font-size: var(--font-size-bigger-responsive);
+  line-height: var(--line-height-bigger-responsive);
   font-weight: var(--font-weight-bigger);
   font-style: var(--font-style-bigger);
   text-decoration: var(--text-decoration-bigger);
@@ -642,21 +707,23 @@ body {
 }
 
 .text-jumbo {
-  font-size: var(--font-size-jumbo);
-  line-height: var(--line-height-jumbo);
+  font-size: var(--font-size-jumbo-responsive);
+  line-height: var(--line-height-jumbo-responsive);
   font-weight: var(--font-weight-jumbo);
   font-style: var(--font-style-jumbo);
   text-decoration: var(--text-decoration-jumbo);
   text-transform: var(--text-transform-jumbo);
   letter-spacing: var(--letter-spacing-jumbo);
 }
+
 .important{
   font-weight: 700;
-  color: var(--primary) !important	;
+  color: var(--primary) !important;
 }
+
 /* Mini sizes */
 .text-small {
-   font-size: var(--font-size-small);
+  font-size: var(--font-size-small);
   line-height: var(--line-height-small);
   font-weight: var(--font-weight-small);
   font-style: var(--font-style-small);
@@ -675,19 +742,6 @@ body {
   letter-spacing: var(--letter-spacing-smaller);
 }
 
-.text-minified  , .text-md{
-  font-size: var(--minifiedFontSize);
-  line-height: 1rem;
-}
-
-/* Content formatting */
-.article {
-  line-height: 1.7rem;
-  letter-spacing: normal;
-}
-
-
-
 /* Headings */
 h6,
 .h6,
@@ -703,13 +757,13 @@ h1,
 .h1 {
   margin-top: 0;
   margin-bottom: 0.3rem;
-  line-height: 1.2;
+  line-height: var(--line-height-h1-responsive); /* Fallback */
   font-weight: normal;
 }
 
 h1, .h1 {
-  font-size: var(--font-size-h1);
-  line-height: var(--line-height-h1);
+  font-size: var(--font-size-h1-responsive);
+  line-height: var(--line-height-h1-responsive);
   font-weight: var(--font-weight-h1);
   font-style: var(--font-style-h1);
   text-decoration: var(--text-decoration-h1);
@@ -718,8 +772,8 @@ h1, .h1 {
 }
 
 h2, .h2 {
-  font-size: var(--font-size-h2);
-  line-height: var(--line-height-h2);
+  font-size: var(--font-size-h2-responsive);
+  line-height: var(--line-height-h2-responsive);
   font-weight: var(--font-weight-h2);
   font-style: var(--font-style-h2);
   text-decoration: var(--text-decoration-h2);
@@ -728,8 +782,8 @@ h2, .h2 {
 }
 
 h3, .h3 {
-  font-size: var(--font-size-h3);
-  line-height: var(--line-height-h3);
+  font-size: var(--font-size-h3-responsive);
+  line-height: var(--line-height-h3-responsive);
   font-weight: var(--font-weight-h3);
   font-style: var(--font-style-h3);
   text-decoration: var(--text-decoration-h3);
@@ -738,8 +792,8 @@ h3, .h3 {
 }
 
 h4, .h4 {
-  font-size: var(--font-size-h4);
-  line-height: var(--line-height-h4);
+  font-size: var(--font-size-h4-responsive);
+  line-height: var(--line-height-h4-responsive);
   font-weight: var(--font-weight-h4);
   font-style: var(--font-style-h4);
   text-decoration: var(--text-decoration-h4);
@@ -748,8 +802,8 @@ h4, .h4 {
 }
 
 h5, .h5 {
-  font-size: var(--font-size-h5);
-  line-height: var(--line-height-h5);
+  font-size: var(--font-size-h5-responsive);
+  line-height: var(--line-height-h5-responsive);
   font-weight: var(--font-weight-h5);
   font-style: var(--font-style-h5);
   text-decoration: var(--text-decoration-h5);
@@ -758,8 +812,8 @@ h5, .h5 {
 }
 
 h6, .h6 {
-  font-size: var(--font-size-h6);
-  line-height: var(--line-height-h6);
+  font-size: var(--font-size-h6-responsive);
+  line-height: var(--line-height-h6-responsive);
   font-weight: var(--font-weight-h6);
   font-style: var(--font-style-h6);
   text-decoration: var(--text-decoration-h6);
@@ -767,25 +821,169 @@ h6, .h6 {
   letter-spacing: var(--letter-spacing-h6);
 }
 
-/* ===== Responsive Typography ===== */
-@media (min-width: 768px) {
-  :root {
-    --font-size-h1: calc(2.5rem * var(--scale-tablet));
-    --font-size-h2: calc(2rem * var(--scale-tablet));
-    --font-size-h3: calc(1.75rem * var(--scale-tablet));
-    --font-size-jumbo: calc(3rem * var(--scale-tablet));
-  }
+
+
+
+/* For WebKit browsers (Chrome, Edge, Brave, Safari) */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
 }
 
-@media (min-width: 1024px) {
-  :root {
-    --font-size-h1: calc(2.5rem * var(--scale-desktop));
-    --font-size-h2: calc(2rem * var(--scale-desktop));
-    --font-size-h3: calc(1.75rem * var(--scale-desktop));
-    --font-size-jumbo: calc(3rem * var(--scale-desktop));
-  }
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--borderColor, #999); /* Darker thumb */
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dark500, #666); /* Hover effect */
+}
+
+/* Optional: Hide scrollbar buttons (arrows) */
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+
+  
+*{
+  font-family: var(--font-font);
+  scroll-behavior: smooth;
+  transition: 0.3s ease-in-out all !important;
+}
+
+
+.card, 
+.input,
+.navigation-bar , 
+.modal , 
+.modal-content,
+.button,
+.text,
+.div,
+.table,
+.table-head,
+.table-body,
+.table-row,
+.table-cell,
+.list,
+.list-item,
+.breadcrumb,
+.breadcrumb-link,
+.breadcrumb-item,
+.loader,
+.grid,
+.col,
+.container,
+.step-container,
+.step,
+.step-header,
+.step-line,
+.dropdown,
+.dropdown-menu,
+.dropdown-item,
+.accordion,
+.accordion-header,
+.accordion-content,
+.progress-bar{
+  color: var(--text-color) ;
+}
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box !important;
+}
+
+body {
+    padding: 0px;
+  margin: 0px;
+  font-size: var(--text-base);
+  font-weight: var(--bd-font-weight) !important;
+  line-height: var(--leading-normal) !important;
+  letter-spacing: normal;
+  background-color: var(--page-bg) !important;
+  color: var(--text-color) !important;
+}
+
+
+
+/* Background Color */
+.pop{
+  background: var(--lighter) !important;
+}
+
+
+
+input:disabled,
+select:disabled,
+button:disabled {
+  background-color: var(--muted) !important;
+  color: var(--white) !important;
+  cursor: not-allowed;
+  opacity: 0.6 !important;
+}
+
+/* Typography */
+.baseColor, .text-base{
+  color: var(--text-color) !important;}
+.bg, .page-bg{
+  background-color: var(--page-bg) !important;
+}
+
+
+
+.theme{
+  background-color: var(--bd-theme);
+}
+.raiseTheme{
+  background-color: var(--raiseThemes) !important;
+}
+
+/* links and href */
+a,
+Link {
+  text-decoration: none;
+  background: transparent;
+  transition: 0.3s;
+  color: var(--linkColor);
+  font-weight: 500;
+}
+a:hover {
+  color: var(--linkHover);
+}
+
+button {
+  -webkit-appearance: button;
+}
+link {
+  text-decoration: none;
+}
+link:hover {
+  text-decoration: none;
+}
+
+
+
+
+
+.text-minified  , .text-md{
+  font-size: var(--minifiedFontSize);
+  line-height: 1rem;
 }
 
+/* Content formatting */
+.article {
+  line-height: 1.7rem;
+  letter-spacing: normal;
+}
 
 
 
@@ -1194,7 +1392,6 @@ h6, .h6 {
 }
 
 
-
 /*buttons*/
 .button {
   border: none;
@@ -1206,7 +1403,6 @@ h6, .h6 {
   font-size: var(--minifiedFontSize);
   position: relative;
   overflow: hidden;
-  font-weight: 500;
   z-index: 1;
   line-height: 1 !important;
   height: var(--inputButtonHeight);
@@ -2115,7 +2311,6 @@ border-radius: var(--borderRadius);
   color: var(--text-color);
   font-size: var(--minifiedFontSize);
   background-color: var(--page-bg);
-  font-weight: 500;
   transition: all 0.2s ease;
 }
 
@@ -2144,7 +2339,6 @@ border-radius: var(--borderRadius);
 /* Floating Label Styles */
 .floating-label {
   position: absolute;
-  left: 0.8rem;
   top: 50%;
   transform: translateY(-50%);
   font-size: var(--minifiedFontSize);
@@ -2154,12 +2348,10 @@ border-radius: var(--borderRadius);
   transition: all 0.2s ease;
   background-color: transparent;
   z-index: 1;
-  font-weight: 500;
 }
 
 .floating-label.active {
   top: 0.35rem;
-  left: 0.8rem;
   font-size: 0.625rem;
   opacity: 1;
   background-color: transparent;
@@ -2168,7 +2360,7 @@ border-radius: var(--borderRadius);
   transform: translateY(0);
   line-height: 1;
 }
-.floating-label.label-left{left: 2rem ;}
+.floating-label.label-left{left: 2.2rem ;}
 /* Label status colors */
 .floating-label.label-success.active {
   color: var(--success);
@@ -2456,8 +2648,6 @@ select:focus {
   align-items: center;
   justify-content: center;
   height: 100%;
-  width: 2.5rem;
-  padding: 1rem;
   z-index: 2;
   pointer-events: auto;
   top: 0;
@@ -2506,9 +2696,8 @@ select:focus {
 .icon-container.has-left-icon > .input,
 .icon-container.has-left-icon > input,
 .icon-container.has-left-icon > select {
-  padding-left: 2.75rem;
-  padding-top: 1.2rem;
-  padding-bottom: 0.4rem;
+  padding-left: 2.2rem;
+  padding-top: 1.3rem;
 }
 
 .icon-container:has(.rightIcon) > .input,
@@ -2516,7 +2705,6 @@ select:focus {
 .icon-container:has(.rightIcon) > select {
   padding-right: 2.75rem;
   padding-top: 1.2rem;
-  padding-bottom: 0.4rem;
 }
 
 /* Reset padding when no label */
@@ -2913,13 +3101,6 @@ padding-right: 2.5rem;
 }
 
 
-/* SearchableInput.css - Matching your theme format */
-
-/* Reset and base styles */
-* {
-  box-sizing: border-box;
-}
-
 /* Main wrapper */
 .searchable-input-wrapper {
   position: relative;
@@ -4803,8 +4984,6 @@ background-color: rgba(0, 0, 0, 0.2);
   
   .range-wrapper {
     position: relative;
-    height: 50px;
-
   }
   
   .range-tooltip {
@@ -4833,9 +5012,9 @@ background-color: rgba(0, 0, 0, 0.2);
   
   .range-slider {
     width: 100%;
-    height: 6px !important;
+    height: 8px !important;
     appearance: none;
-    background: var(--lighter);
+    background: var(--borderColor);
     border-radius: 5rem;
     outline: none;
     padding: 0 !important;
@@ -4845,7 +5024,7 @@ background-color: rgba(0, 0, 0, 0.2);
     appearance: none;
     width: 20px;
     height: 20px;
-    background-color: var(--primary200);
+    background-color: var(--primary300);
     border: 0.1rem solid var(--primary500);
     border-radius: 50%;
     cursor: pointer;
@@ -4857,7 +5036,7 @@ background-color: rgba(0, 0, 0, 0.2);
   }
   
   .range-slider::-moz-range-thumb {
-    background-color: var(--primary200);
+    background-color: var(--primary300);
     border: 0.1rem solid var(--primary500);
     border-radius: 50%;
     cursor: pointer;