funuicss 3.7.4 → 3.7.6

package/css/fun.css

@@ -607,137 +607,137 @@
 /* Font utilities with matching line heights */
 .text-xs {
   font-size: var(--text-xs-responsive) !important;
-  line-height: var(--leading-xs-responsive) !important;
+  line-height: var(--leading-xs-responsive);
 }
 
 .text-sm {
   font-size: var(--text-sm-responsive) !important;
-  line-height: var(--leading-sm-responsive) !important;
+  line-height: var(--leading-sm-responsive);
 }
 
 .text-base {
   font-size: var(--text-base-responsive) !important;
-  line-height: var(--leading-base-responsive) !important;
+  line-height: var(--leading-base-responsive);
 }
 
 .text-lg {
   font-size: var(--text-lg-responsive) !important;
-  line-height: var(--leading-lg-responsive) !important;
+  line-height: var(--leading-lg-responsive);
 }
 
 .text-xl {
   font-size: var(--text-xl-responsive) !important;
-  line-height: var(--leading-xl-responsive) !important;
-  font-weight: 400 !important;
+  line-height: var(--leading-xl-responsive);
+  font-weight: 400;
 }
 
 .text-2xl {
   font-size: var(--text-2xl-responsive) !important;
-  line-height: var(--leading-2xl-responsive) !important;
-  font-weight: 500 !important;
+  line-height: var(--leading-2xl-responsive);
+  font-weight: 500;
 }
 
 .text-3xl {
   font-size: var(--text-3xl-responsive) !important;
-  line-height: var(--leading-3xl-responsive) !important;
-  font-weight: 500 !important;
+  line-height: var(--leading-3xl-responsive);
+  font-weight: 500;
 }
 
 .text-4xl {
   font-size: var(--text-4xl-responsive) !important;
-  line-height: var(--leading-4xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-4xl-responsive);
+  font-weight: 600;
 }
 
 .text-5xl {
   font-size: var(--text-5xl-responsive) !important;
-  line-height: var(--leading-5xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-5xl-responsive);
+  font-weight: 600;
 }
 
 .text-6xl {
   font-size: var(--text-6xl-responsive) !important;
-  line-height: var(--leading-6xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-6xl-responsive);
+  font-weight: 600;
 }
 
 .text-7xl {
   font-size: var(--text-7xl-responsive) !important;
-  line-height: var(--leading-7xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-7xl-responsive);
+  font-weight: 600;
 }
 
 .text-8xl {
   font-size: var(--text-8xl-responsive) !important;
-  line-height: var(--leading-8xl-responsive) !important;
-  font-weight: 800 !important;
+  line-height: var(--leading-8xl-responsive);
+  font-weight: 800;
 }
 
 .text-9xl {
   font-size: var(--text-9xl-responsive) !important;
-  line-height: var(--leading-9xl-responsive) !important;
-  font-weight: 900 !important;
+  line-height: var(--leading-9xl-responsive);
+  font-weight: 900;
 }
 
 .text-10xl {
   font-size: var(--text-10xl-responsive) !important;
-  line-height: var(--leading-10xl-responsive) !important;
-  font-weight: 900 !important;
+  line-height: var(--leading-10xl-responsive);
+  font-weight: 900;
 }
 
 .text-big {
   font-size: var(--font-size-big-responsive) !important;
-  line-height: var(--line-height-big-responsive) !important;
-  font-weight: var(--font-weight-big) !important;
-  font-style: var(--font-style-big) !important;
-  text-decoration: var(--text-decoration-big) !important;
-  text-transform: var(--text-transform-big) !important;
-  letter-spacing: var(--letter-spacing-big) !important;
+  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);
+  text-transform: var(--text-transform-big);
+  letter-spacing: var(--letter-spacing-big);
 }
 
 .text-bigger {
   font-size: var(--font-size-bigger-responsive) !important;
-  line-height: var(--line-height-bigger-responsive) !important;
-  font-weight: var(--font-weight-bigger) !important;
-  font-style: var(--font-style-bigger) !important;
-  text-decoration: var(--text-decoration-bigger) !important;
-  text-transform: var(--text-transform-bigger) !important;
-  letter-spacing: var(--letter-spacing-bigger) !important;
+  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);
+  text-transform: var(--text-transform-bigger);
+  letter-spacing: var(--letter-spacing-bigger);
 }
 
 .text-jumbo {
   font-size: var(--font-size-jumbo-responsive) !important;
-  line-height: var(--line-height-jumbo-responsive) !important;
-  font-weight: var(--font-weight-jumbo) !important;
-  font-style: var(--font-style-jumbo) !important;
-  text-decoration: var(--text-decoration-jumbo) !important;
-  text-transform: var(--text-transform-jumbo) !important;
-  letter-spacing: var(--letter-spacing-jumbo) !important;
+  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);
 }
 
 /* Mini sizes */
 .text-small {
   font-size: var(--font-size-small) !important;
-  line-height: var(--line-height-small) !important;
-  font-weight: var(--font-weight-small) !important;
-  font-style: var(--font-style-small) !important;
-  text-decoration: var(--text-decoration-small) !important;
-  text-transform: var(--text-transform-small) !important;
-  letter-spacing: var(--letter-spacing-small) !important;
+  line-height: var(--line-height-small);
+  font-weight: var(--font-weight-small);
+  font-style: var(--font-style-small);
+  text-decoration: var(--text-decoration-small);
+  text-transform: var(--text-transform-small);
+  letter-spacing: var(--letter-spacing-small);
 }
 
 .text-smaller {
   font-size: var(--font-size-smaller) !important;
-  line-height: var(--line-height-smaller) !important;
-  font-weight: var(--font-weight-smaller) !important;
-  font-style: var(--font-style-smaller) !important;
-  text-decoration: var(--text-decoration-smaller) !important;
-  text-transform: var(--text-transform-smaller) !important;
-  letter-spacing: var(--letter-spacing-smaller) !important;
+  line-height: var(--line-height-smaller);
+  font-weight: var(--font-weight-smaller);
+  font-style: var(--font-style-smaller);
+  text-decoration: var(--text-decoration-smaller);
+  text-transform: var(--text-transform-smaller);
+  letter-spacing: var(--letter-spacing-smaller);
 }
 
 /* Headings */
@@ -762,66 +762,65 @@ h1,
 
 h1, .h1 {
   font-size: var(--font-size-h1-responsive) !important;
-  line-height: var(--line-height-h1-responsive) !important;
-  font-weight: var(--font-weight-h1) !important;
-  font-style: var(--font-style-h1) !important;
-  text-decoration: var(--text-decoration-h1) !important;
-  text-transform: var(--text-transform-h1) !important;
-  letter-spacing: var(--letter-spacing-h1) !important;
+  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);
+  text-transform: var(--text-transform-h1);
+  letter-spacing: var(--letter-spacing-h1);
 }
 
 h2, .h2 {
   font-size: var(--font-size-h2-responsive) !important;
-  line-height: var(--line-height-h2-responsive) !important;
-  font-weight: var(--font-weight-h2) !important;
-  font-style: var(--font-style-h2) !important;
-  text-decoration: var(--text-decoration-h2) !important;
-  text-transform: var(--text-transform-h2) !important;
-  letter-spacing: var(--letter-spacing-h2) !important;
+  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);
+  text-transform: var(--text-transform-h2);
+  letter-spacing: var(--letter-spacing-h2);
 }
 
 h3, .h3 {
   font-size: var(--font-size-h3-responsive) !important;
-  line-height: var(--line-height-h3-responsive) !important;
-  font-weight: var(--font-weight-h3) !important;
-  font-style: var(--font-style-h3) !important;
-  text-decoration: var(--text-decoration-h3) !important;
-  text-transform: var(--text-transform-h3) !important;
-  letter-spacing: var(--letter-spacing-h3) !important;
+  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);
+  text-transform: var(--text-transform-h3);
+  letter-spacing: var(--letter-spacing-h3);
 }
 
 h4, .h4 {
   font-size: var(--font-size-h4-responsive) !important;
-  line-height: var(--line-height-h4-responsive) !important;
-  font-weight: var(--font-weight-h4) !important;
-  font-style: var(--font-style-h4) !important;
-  text-decoration: var(--text-decoration-h4) !important;
-  text-transform: var(--text-transform-h4) !important;
-  letter-spacing: var(--letter-spacing-h4) !important;
+  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);
+  text-transform: var(--text-transform-h4);
+  letter-spacing: var(--letter-spacing-h4);
 }
 
 h5, .h5 {
   font-size: var(--font-size-h5-responsive) !important;
-  line-height: var(--line-height-h5-responsive) !important;
-  font-weight: var(--font-weight-h5) !important;
-  font-style: var(--font-style-h5) !important;
-  text-decoration: var(--text-decoration-h5) !important;
-  text-transform: var(--text-transform-h5) !important;
-  letter-spacing: var(--letter-spacing-h5) !important;
+  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);
+  text-transform: var(--text-transform-h5);
+  letter-spacing: var(--letter-spacing-h5);
 }
 
 h6, .h6 {
   font-size: var(--font-size-h6-responsive) !important;
-  line-height: var(--line-height-h6-responsive) !important;
-  font-weight: var(--font-weight-h6) !important;
-  font-style: var(--font-style-h6) !important;
-  text-decoration: var(--text-decoration-h6) !important;
-  text-transform: var(--text-transform-h6) !important;
-  letter-spacing: var(--letter-spacing-h6) !important;
+  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);
+  text-transform: var(--text-transform-h6);
+  letter-spacing: var(--letter-spacing-h6);
 }
 
 
-
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -952,10 +951,10 @@ Link {
   background: transparent;
   transition: 0.3s;
   color: var(--linkColor);
-  font-weight: 500;
 }
 a:hover {
-  color: var(--linkHover);
+  color: var(--primary);
+
 }
 
 button {
@@ -972,424 +971,6 @@ link:hover {
 
 
 
-.text-minified  , .text-md{
-  font-size: var(--minifiedFontSize);
-  line-height: 1rem;
-}
-
-/* Content formatting */
-.article {
-  line-height: 1.7rem;
-  letter-spacing: normal;
-}
-
-
-
-.text-bold {
-  font-weight: bold !important;
-}
-.text-bolder {
-  font-weight: bolder !important;
-}
-.lightText{
-  font-weight: 300 !important;
-}
-
-.lighterText{
-  font-weight: 200 !important;
-}
-.underlineText{
-  text-decoration: underline;
-}
-.emp{font-style: italic;}
-.italicText{
- font-style: italic;
-}
-.uppercase{text-transform: uppercase;}
-.lowercase{text-transform: lowercase;}
-.capitalize{text-transform: capitalize;}
-.monospace{font-family:monospace !important;}
-
-.scroll-y{overflow-y: auto !important; overflow-x: visible !important;}
-.scroll-x{overflow-x: auto !important; overflow-y: visible !important;}
-.scroll{overflow: auto !important;}
-
-
-/*Helpers*/
-.glassy{
-  backdrop-filter: blur(0.3rem);
-  background-color: transparent !important;
-}
-.transparent{
-  background-color: transparent !important;
-}
-.flat{
-  border-radius: 0rem !important;
-}
-.no-padding {
-  padding: 0px !important;
-}
-.no-margin {
-  margin: 0px;
-}
-.line-through {
-  text-decoration: line-through;
-}
-.underline {
-  text-decoration: underline;
-}
-.overline {
-  text-decoration: overline;
-}
-.wavy {
-  text-decoration: wavy;
-}
-.borderless {
-  border: none;
-}
-.border {
-  border: var(--border);
-}
-.text-center {
-  text-align: center !important;
-}
-.text-left {
-  text-align: left !important;
-}
-.text-right {
-  text-align: right !important;
-}
-.text-justify {
-  text-align: justify !important;
-}
-.hide {
-  display: none;
-}
-.show {
-  display: block;
-}
-.center {
-  margin: 0px auto;
-}
-.float-right {
-  float: right;
-}
-.float-left {
-  float: left;
-}
-
-.section {
- margin-top: 1rem;
- margin-bottom: 1rem;
-}
-.minSection{
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.maxSection{
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-.opacity-1,
-.hover-opacity-1:hover {
-  opacity: 1;
-}
-.opacity-2,
-.hover-opacity-2:hover {
-  opacity: 0.9;
-}
-.opacity-3,
-.hover-opacity-3:hover {
-  opacity: 0.8;
-}
-.opacity-4,
-.hover-opacity-4:hover {
-  opacity: 0.7;
-}
-.opacity-5,
-.hover-opacity-5:hover {
-  opacity: 0.6;
-}
-.opacity-6,
-.hover-opacity-6:hover {
-  opacity: 0.5;
-}
-.opacity-7,
-.hover-opacity-7:hover {
-  opacity: 0.4;
-}
-.opacity-8,
-.hover-opacity-8:hover {
-  opacity: 0.2;
-}
-.opacity-9,
-.hover-opacity-9:hover {
-  opacity: 0.1;
-}
-.hr,.bb {
-  border-bottom: var(--border);
-}
-.vr, .bl {
-  border-left: var(--border);
-}
-.bt{
-  border-top: var(--border);
-}
-.br{border-right: var(--border);}
-.vertical-scroll {
-  overflow-y: scroll;
-}
-.horizontal-scroll {
-  overflow-x: scroll;
-}
-.z-index-1 {
-  z-index: 1;
-}
-.z-index-2 {
-  z-index: 2;
-}
-.z-index-3 {
-  z-index: 3;
-}
-.z-index-4 {
-  z-index: 4;
-}
-.z-index-5 {
-  z-index: 5;
-}
-.z-index-6 {
-  z-index: 6;
-}
-.z-index-7 {
-  z-index: 7;
-}
-.z-index-8 {
-  z-index: 8;
-}
-.z-index-9 {
-  z-index: 9;
-}
-.z-index-10 {
-  z-index: 10;
-}
-.responsive {
-  width: 100%;
-  height: auto;
-}
-
-.top-right {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-}
-.top-left {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}
-.top {
-  position: absolute;
-  top: 0px;
-}
-.bottom-right {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-}
-.bottom-left {
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-}
-.bottom {
-  position: absolute;
-  bottom: 0px;
-}
-.clear-both {
-  clear: both;
-}
-.content-middle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-.sticky-top {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0px;
-  z-index: var(--navBarZindex);
-  width: 100%;
-}
-.fixed-top {
-  position: fixed;
-  top: 0px;
-  z-index: var(--navBarZindex);
-  width: 100%;
-}
-
-.relative {
-  position: relative;
-}
-.fixed {
-  position: fixed;
-}
-.sticky {
-  position: sticky;
-}
-.absolute {
-  position: absolute;
-}
-.block {
-  display: block;
-}
-.inline-block {
-  display: inline-block;
-}
-.middle {
-  display: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.shadow {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-}
-.hover-shadow {
-  transition: 0.3s;
-}
-.hover-shadow:hover {
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-}
-.fit {
-  height: 100%;
-  width: 100%;
-}
-.fit-width {
-  width: fit-content;
-}
-.fit-height {
-  height: fit-content;
-}
-.shadow-bingo {
-  box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5),
-    0px 40px 40px 0px rgba(225, 225, 255, 0.6);
-}
-.top-border {
-  border-top: var(--border);
-}
-.bottom-border {
-  border-bottom: var(--border);
-}
-.right-border {
-  border-right: var(--border);
-}
-.left-border {
-  border-left: var(--border);
-}
-.row-flex{
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: center ;
-
-}
-.row-flex.gap {
-  grid-gap: 0.5rem;
-}
-.row-flex.space-between {
-  justify-content: space-between;
-}
-.row-flex.gap {
-  gap: 0.2rem;
-}
-.row-flex.stretch{
-  align-items: stretch !important;
-}
-.row-flex.space-around {
-  justify-content: space-around;
-}
-
-
-
-
-
-.fixedBottom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: var(--navBarZindex);
-}
-.fixedTop {
-  position: fixed;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  z-index: var(--navBarZindex);
-}
-.row-flex.center {
-  justify-content: center;
-}
-.central {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.hoverable{
-  transition: 0.1s linear;
-}
-.hoverable:hover{
-  background-color: var(--hoverable) !important;
-  /* filter: brightness(90%); */
-
-}
-.hoverable-border{border: 0.1rem solid transparent;transition: 0.3s ease-in-out;}
-.hoverable-border:hover{border: var(--border);}
-
-.rightRounded{
-  border-top-right-radius: 300rem !important;
-  border-bottom-right-radius: 300rem !important;
-  border-bottom-left-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-}
-.leftRounded{
-  border-top-left-radius: 300rem !important;
-  border-bottom-left-radius: 300rem !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-
-/* cursor */
-.cursor-pointer {
-  cursor: pointer;
-}
-.cursor-copy {
-  cursor: copy;
-}
-.cursor-none {
-  cursor: none;
-}
-.cursor-move {
-  cursor: move;
-}
-/* containers hover*/
-.container {
-  margin: 0 10%;
-}
-@media (max-width: 600px) {
-  .container {
-   margin: 0 5%;
-  }
-}
-
-.page{
-  min-height: 80vh;
-  padding: 2rem 0;
-}
-
-
 /*buttons*/
 .button {
   border: none;
@@ -1400,20 +981,26 @@ link:hover {
   cursor: pointer;
   font-size: var(--minifiedFontSize);
   position: relative;
-  overflow: hidden;
+  overflow: visible !important;
   z-index: 1;
   line-height: 1 !important;
   height: var(--inputButtonHeight);
 }
+.button.primary{outline:1px solid var(--primary);}
+.button.primary:active{outline:1px solid var(--primary300);}
+.button.secondary{outline:1px solid var(--secondary);}
+.button.secondary:active{outline:1px solid var(--secondary300);}
+.button.accent{outline:1px solid var(--accent);}
+.button.accent:active{outline:1px solid var(--accent300);}
 
 
 /* Ripple effect */
 .button::after {
   content: '';
   position: absolute;
-  border-radius: 50%;
+  border-radius: var(--radius);
   transform: scale(0);
-  background: rgba(0, 0, 0, 0.1); /* dark ripple with opacity */
+  background: rgba(255, 255, 255, 0.1); /* dark ripple with opacity */
   width: 100%;
   height: 100%;
   top: 0;
@@ -1424,7 +1011,7 @@ link:hover {
 }
 
 .button:active::after {
-  transform: scale(2);
+  transform: scale(1);
   opacity: 1;
   transition: 0s;
 
@@ -1748,21 +1335,18 @@ border-radius: var(--borderRadius);
   visibility: visible !important;
   max-height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease;
+  transition:  0.3s ease;
 }
 
 .nav_item.dropdown-open .nav_dropdown-mobile {
   max-height: 500px;
 }
 
-.nav_dropdown-mobile .nav_link {
-  padding: 0.5rem 1rem !important;
-}
 
 /* Mobile Menu */
-.nav_mobile-menu {
+/* .nav_mobile-menu {
   position: fixed;
-  top: var(--navHeight);
+  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
@@ -1771,7 +1355,7 @@ border-radius: var(--borderRadius);
   overflow-y: auto;
   padding: 1rem;
   border-top: var(--border);
-}
+} */
 
 .nav_mobile-menu .nav_links {
   align-items: flex-start !important;
@@ -1791,7 +1375,7 @@ border-radius: var(--borderRadius);
 /* Active Link Styles */
 .nav_link.active {
   color: var(--primary) !important;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 /* Hover Effects */
@@ -1823,25 +1407,9 @@ border-radius: var(--borderRadius);
 
 /* Focus States */
 .nav_link:focus {
-  outline: 2px solid  var(--primary);
   outline-offset: 2px;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-  .nav_dropdown-menu {
-    position: static;
-    box-shadow: none;
-    border: none;
-    background: var(--raiseOpaque);
-    margin-left: 1rem;
-  }
-  
-  .nav_item.dropdown-open .nav_dropdown-menu {
-    max-height: 500px;
-  }
-}
-
 
 
 /* video */
@@ -5794,6 +5362,7 @@ background-color: rgba(0, 0, 0, 0.2);
 .min-w-vw { min-width: 100vw !important; }
 .min-h-vh { min-height: 100vh !important; }
 .max-h-vh { max-height: 100vh !important; }
+
 .w-100-vw { width: 100vw !important; }
 .w-90-vw { width: 90vw !important; }
 .w-80-vw { width: 80vw !important; }
@@ -5840,26 +5409,57 @@ background-color: rgba(0, 0, 0, 0.2);
 .w-90-p { width: 90% !important; }
 .w-100-p , .w-full { width: 100% !important; }
 
-
-.w-10 { width: 0.625rem !important; }
-.w-20 { width: 1.25rem !important; }
-.w-30 { width: 1.875rem !important; }
-.w-40 { width: 2.5rem !important; }
-.w-50 { width: 3.125rem !important; }
-.w-60 { width: 3.75rem !important; }
-.w-70 { width: 4.375rem !important; }
-.w-80 { width: 5rem !important; }
-.w-90 { width: 5.625rem !important; }
-.w-100 { width: 6.25rem !important; }
-.w-200 { width: 12.5rem !important; }
-.w-300 { width: 18.75rem !important; }
-.w-400 { width: 25rem !important; }
-.w-500 { width: 31.25rem !important; }
-.w-600 { width: 37.5rem !important; }
-.w-700 { width: 43.75rem !important; }
-.w-800 { width: 50rem !important; }
-.w-900 { width: 56.25rem !important; }
-.w-1000 { width: 62.5rem !important; }
+.w-5 { max-width: 0.3125rem; width: 100% !important; }
+.w-10 { max-width: 0.625rem; width: 100% !important; }
+.w-15 { max-width: 0.9375rem; width: 100% !important; }
+.w-20 { max-width: 1.25rem; width: 100% !important; }
+
+/* Increments of 5 from 25-95 */
+.w-25 { max-width: 1.5625rem; width: 100% !important; }
+.w-30 { max-width: 1.875rem; width: 100% !important; }
+.w-35 { max-width: 2.1875rem; width: 100% !important; }
+.w-40 { max-width: 2.5rem; width: 100% !important; }
+.w-45 { max-width: 2.8125rem; width: 100% !important; }
+.w-50 { max-width: 3.125rem; width: 100% !important; }
+.w-55 { max-width: 3.4375rem; width: 100% !important; }
+.w-60 { max-width: 3.75rem; width: 100% !important; }
+.w-65 { max-width: 4.0625rem; width: 100% !important; }
+.w-70 { max-width: 4.375rem; width: 100% !important; }
+.w-75 { max-width: 4.6875rem; width: 100% !important; }
+.w-80 { max-width: 5rem; width: 100% !important; }
+.w-85 { max-width: 5.3125rem; width: 100% !important; }
+.w-90 { max-width: 5.625rem; width: 100% !important; }
+.w-95 { max-width: 5.9375rem; width: 100% !important; }
+
+.w-100 { max-width: 6.25rem; width: 100% !important; }
+.w-150 { max-width: 9.375rem; width: 100% !important; }
+.w-200 { max-width: 12.5rem; width: 100% !important; }
+.w-250 { max-width: 15.625rem; width: 100% !important; }
+.w-300 { max-width: 18.75rem; width: 100% !important; }
+.w-350 { max-width: 21.875rem; width: 100% !important; }
+.w-400 { max-width: 25rem; width: 100% !important; }
+.w-450 { max-width: 28.125rem; width: 100% !important; }
+.w-500 { max-width: 31.25rem; width: 100% !important; }
+.w-550 { max-width: 34.375rem; width: 100% !important; }
+.w-600 { max-width: 37.5rem; width: 100% !important; }
+.w-650 { max-width: 40.625rem; width: 100% !important; }
+.w-700 { max-width: 43.75rem; width: 100% !important; }
+.w-750 { max-width: 46.875rem; width: 100% !important; }
+.w-800 { max-width: 50rem; width: 100% !important; }
+.w-850 { max-width: 53.125rem; width: 100% !important; }
+.w-900 { max-width: 56.25rem; width: 100% !important; }
+.w-950 { max-width: 59.375rem; width: 100% !important; }
+.w-1000 { max-width: 62.5rem; width: 100% !important; }
+.w-1050 { max-width: 65.625rem; width: 100% !important; }
+.w-1100 { max-width: 68.75rem; width: 100% !important; }
+.w-1150 { max-width: 71.875rem; width: 100% !important; }
+.w-1200 { max-width: 75rem; width: 100% !important; }
+.w-1250 { max-width: 78.125rem; width: 100% !important; }
+.w-1300 { max-width: 81.25rem; width: 100% !important; }
+.w-1350 { max-width: 84.375rem; width: 100% !important; }
+.w-1400 { max-width: 87.5rem; width: 100% !important; }
+.w-1450 { max-width: 90.625rem; width: 100% !important; }
+.w-1500 { max-width: 93.75rem; width: 100% !important; }
 
 
 /* Max-width and Min-width */
@@ -6247,25 +5847,60 @@ background-color: rgba(0, 0, 0, 0.2);
 .min-h-900 { min-height: 56.25rem !important; }
 
 /* height */
-.h-10 { height: 0.625rem !important; }
-.h-20 { height: 1.25rem !important; }
-.h-30 { height: 1.875rem !important; }
-.h-40 { height: 2.5rem !important; }
-.h-50 { height: 3.125rem !important; }
-.h-60 { height: 3.75rem !important; }
-.h-70 { height: 4.375rem !important; }
-.h-80 { height: 5rem !important; }
-.h-90 { height: 5.625rem !important; }
-.h-100 { height: 6.25rem !important; }
-.h-200 { height: 12.5rem !important; }
-.h-300 { height: 18.75rem !important; }
-.h-400 { height: 25rem !important; }
-.h-500 { height: 31.25rem !important; }
-.h-600 { height: 37.5rem !important; }
-.h-700 { height: 43.75rem !important; }
-.h-800 { height: 50rem !important; }
-.h-900 { height: 56.25rem !important; }
-.h-1000 { height: 62.5rem !important; }
+/* Height utilities with Pexels scaling system (1 unit = 0.0625rem) */
+/* Increments of 5 from 5-20 */
+.h-5 { max-height: 0.3125rem; height: 100% !important; }
+.h-10 { max-height: 0.625rem; height: 100% !important; }
+.h-15 { max-height: 0.9375rem; height: 100% !important; }
+.h-20 { max-height: 1.25rem; height: 100% !important; }
+
+/* Increments of 5 from 25-95 */
+.h-25 { max-height: 1.5625rem; height: 100% !important; }
+.h-30 { max-height: 1.875rem; height: 100% !important; }
+.h-35 { max-height: 2.1875rem; height: 100% !important; }
+.h-40 { max-height: 2.5rem; height: 100% !important; }
+.h-45 { max-height: 2.8125rem; height: 100% !important; }
+.h-50 { max-height: 3.125rem; height: 100% !important; }
+.h-55 { max-height: 3.4375rem; height: 100% !important; }
+.h-60 { max-height: 3.75rem; height: 100% !important; }
+.h-65 { max-height: 4.0625rem; height: 100% !important; }
+.h-70 { max-height: 4.375rem; height: 100% !important; }
+.h-75 { max-height: 4.6875rem; height: 100% !important; }
+.h-80 { max-height: 5rem; height: 100% !important; }
+.h-85 { max-height: 5.3125rem; height: 100% !important; }
+.h-90 { max-height: 5.625rem; height: 100% !important; }
+.h-95 { max-height: 5.9375rem; height: 100% !important; }
+
+/* Increments of 50 from 100-1500 */
+.h-100 { max-height: 6.25rem; height: 100% !important; }
+.h-150 { max-height: 9.375rem; height: 100% !important; }
+.h-200 { max-height: 12.5rem; height: 100% !important; }
+.h-250 { max-height: 15.625rem; height: 100% !important; }
+.h-300 { max-height: 18.75rem; height: 100% !important; }
+.h-350 { max-height: 21.875rem; height: 100% !important; }
+.h-400 { max-height: 25rem; height: 100% !important; }
+.h-450 { max-height: 28.125rem; height: 100% !important; }
+.h-500 { max-height: 31.25rem; height: 100% !important; }
+.h-550 { max-height: 34.375rem; height: 100% !important; }
+.h-600 { max-height: 37.5rem; height: 100% !important; }
+.h-650 { max-height: 40.625rem; height: 100% !important; }
+.h-700 { max-height: 43.75rem; height: 100% !important; }
+.h-750 { max-height: 46.875rem; height: 100% !important; }
+.h-800 { max-height: 50rem; height: 100% !important; }
+.h-850 { max-height: 53.125rem; height: 100% !important; }
+.h-900 { max-height: 56.25rem; height: 100% !important; }
+.h-950 { max-height: 59.375rem; height: 100% !important; }
+.h-1000 { max-height: 62.5rem; height: 100% !important; }
+.h-1050 { max-height: 65.625rem; height: 100% !important; }
+.h-1100 { max-height: 68.75rem; height: 100% !important; }
+.h-1150 { max-height: 71.875rem; height: 100% !important; }
+.h-1200 { max-height: 75rem; height: 100% !important; }
+.h-1250 { max-height: 78.125rem; height: 100% !important; }
+.h-1300 { max-height: 81.25rem; height: 100% !important; }
+.h-1350 { max-height: 84.375rem; height: 100% !important; }
+.h-1400 { max-height: 87.5rem; height: 100% !important; }
+.h-1450 { max-height: 90.625rem; height: 100% !important; }
+.h-1500 { max-height: 93.75rem; height: 100% !important; }
 
 /* percentage */
 .h-10-p { height: 10% !important; }
@@ -6517,7 +6152,6 @@ background-color: rgba(0, 0, 0, 0.2);
 .margin-right-60{margin-right:60px!important}.margin-right-70{margin-right:70px!important}
 .margin-right-80{margin-right:80px!important}.margin-right-90{margin-right:90px!important}
 .margin-right-100{margin-bottom:100px}
-
 /* --------- MARGIN --------- */
 .margin , .m{margin: var(--spacingScale) !important;}
 .m-0  { margin: var(--space-0) !important; }
@@ -10078,10 +9712,6 @@ z-index: 10;
 
 
 /* text color */
-
-
-
-
 .text-primary,
 .hover-text-primary:hover {
   color: var(--primary) !important;
@@ -10472,10 +10102,10 @@ z-index: 10;
 .hover-text-info900:hover {
   color: var(--info900) !important;
 }
-.text-white{
+.text-white , .hover-text-white:hover{
   color: var(--white) !important;
 }
-.text-dark{
+.text-dark , .hover-text-dark:hover{
   color: var(--dark) !important;
 }
 .text-default{
@@ -10489,3 +10119,498 @@ z-index: 10;
 }
 
 
+
+
+
+/* HELPERS */
+
+.text-minified  , .text-md{
+  font-size: var(--minifiedFontSize);
+  line-height: 1rem;
+}
+/* Content formatting */
+.article {
+  line-height: 1.7rem;
+  letter-spacing: normal;
+}
+
+/* Typography */
+.text-bold { font-weight: bold !important; }
+.text-bolder { font-weight: bolder !important; }
+.lightText { font-weight: 300 !important; }
+.lighterText { font-weight: 200 !important; }
+.underlineText { text-decoration: underline; }
+.emp { font-style: italic; }
+.italicText { font-style: italic; }
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.monospace { font-family: monospace !important; }
+
+/* Scroll */
+.scroll-y { overflow-y: auto !important; overflow-x: visible !important; }
+.scroll-x { overflow-x: auto !important; overflow-y: visible !important; }
+.scroll { overflow: auto !important; }
+.vertical-scroll { overflow-y: scroll; }
+.horizontal-scroll { overflow-x: scroll; }
+
+/* Helpers */
+.glassy { backdrop-filter: blur(0.3rem); background-color: transparent !important; }
+.transparent { background-color: transparent !important; }
+.flat { border-radius: 0rem !important; }
+.no-padding { padding: 0px !important; }
+.no-margin { margin: 0px; }
+.line-through { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.overline { text-decoration: overline; }
+.wavy { text-decoration: wavy; }
+.borderless { border: none; }
+.border { border: var(--border); }
+.hide { display: none; }
+.show { display: block; }
+.center { margin: 0px auto; }
+.float-right { float: right; }
+.float-left { float: left; }
+.clear-both { clear: both; }
+.responsive { width: 100%; height: auto; }
+
+/* Text Alignment */
+.text-center { text-align: center !important; }
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+/* Sections */
+.section { margin-top: 1rem; margin-bottom: 1rem; }
+.minSection { margin-top: 0.5rem; margin-bottom: 0.5rem; }
+.maxSection { margin-top: 2rem; margin-bottom: 2rem; }
+
+/* Opacity */
+.opacity-1, .hover-opacity-1:hover { opacity: 1; }
+.opacity-2, .hover-opacity-2:hover { opacity: 0.9; }
+.opacity-3, .hover-opacity-3:hover { opacity: 0.8; }
+.opacity-4, .hover-opacity-4:hover { opacity: 0.7; }
+.opacity-5, .hover-opacity-5:hover { opacity: 0.6; }
+.opacity-6, .hover-opacity-6:hover { opacity: 0.5; }
+.opacity-7, .hover-opacity-7:hover { opacity: 0.4; }
+.opacity-8, .hover-opacity-8:hover { opacity: 0.2; }
+.opacity-9, .hover-opacity-9:hover { opacity: 0.1; }
+
+/* Borders */
+.hr, .bb { border-bottom: var(--border); }
+.vr, .bl { border-left: var(--border); }
+.bt { border-top: var(--border); }
+.br { border-right: var(--border); }
+.top-border { border-top: var(--border); }
+.bottom-border { border-bottom: var(--border); }
+.right-border { border-right: var(--border); }
+.left-border { border-left: var(--border); }
+
+/* Border Radius */
+.rounded-0 { border-radius: 0rem !important; }
+.rounded-1 { border-radius: 0.125rem !important; }
+.rounded-2 { border-radius: 0.25rem !important; }
+.rounded-3 { border-radius: 0.375rem !important; }
+.rounded-4 { border-radius: 0.5rem !important; }
+.rounded-5 { border-radius: 0.625rem !important; }
+.rounded-6 { border-radius: 0.75rem !important; }
+.rounded-8 { border-radius: 1rem !important; }
+.rounded-10 { border-radius: 1.25rem !important; }
+.rounded-12 { border-radius: 1.5rem !important; }
+.rounded-16 { border-radius: 2rem !important; }
+.rounded-20 { border-radius: 2.5rem !important; }
+.rounded-24 { border-radius: 3rem !important; }
+.rounded-full { border-radius: 9999px !important; }
+
+/* Individual Corner Radius */
+.rounded-t-0 { border-top-left-radius: 0rem !important; border-top-right-radius: 0rem !important; }
+.rounded-t-1 { border-top-left-radius: 0.125rem !important; border-top-right-radius: 0.125rem !important; }
+.rounded-t-2 { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
+.rounded-t-4 { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; }
+.rounded-t-8 { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }
+
+.rounded-b-0 { border-bottom-left-radius: 0rem !important; border-bottom-right-radius: 0rem !important; }
+.rounded-b-1 { border-bottom-left-radius: 0.125rem !important; border-bottom-right-radius: 0.125rem !important; }
+.rounded-b-2 { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
+.rounded-b-4 { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
+.rounded-b-8 { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
+
+.rounded-l-0 { border-top-left-radius: 0rem !important; border-bottom-left-radius: 0rem !important; }
+.rounded-l-1 { border-top-left-radius: 0.125rem !important; border-bottom-left-radius: 0.125rem !important; }
+.rounded-l-2 { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
+.rounded-l-4 { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
+.rounded-l-8 { border-top-left-radius: 1rem !important; border-bottom-left-radius: 1rem !important; }
+
+.rounded-r-0 { border-top-right-radius: 0rem !important; border-bottom-right-radius: 0rem !important; }
+.rounded-r-1 { border-top-right-radius: 0.125rem !important; border-bottom-right-radius: 0.125rem !important; }
+.rounded-r-2 { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
+.rounded-r-4 { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
+.rounded-r-8 { border-top-right-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
+
+/* Individual Corners */
+.rounded-tl-0 { border-top-left-radius: 0rem !important; }
+.rounded-tl-1 { border-top-left-radius: 0.125rem !important; }
+.rounded-tl-2 { border-top-left-radius: 0.25rem !important; }
+.rounded-tl-4 { border-top-left-radius: 0.5rem !important; }
+.rounded-tl-8 { border-top-left-radius: 1rem !important; }
+
+.rounded-tr-0 { border-top-right-radius: 0rem !important; }
+.rounded-tr-1 { border-top-right-radius: 0.125rem !important; }
+.rounded-tr-2 { border-top-right-radius: 0.25rem !important; }
+.rounded-tr-4 { border-top-right-radius: 0.5rem !important; }
+.rounded-tr-8 { border-top-right-radius: 1rem !important; }
+
+.rounded-bl-0 { border-bottom-left-radius: 0rem !important; }
+.rounded-bl-1 { border-bottom-left-radius: 0.125rem !important; }
+.rounded-bl-2 { border-bottom-left-radius: 0.25rem !important; }
+.rounded-bl-4 { border-bottom-left-radius: 0.5rem !important; }
+.rounded-bl-8 { border-bottom-left-radius: 1rem !important; }
+
+.rounded-br-0 { border-bottom-right-radius: 0rem !important; }
+.rounded-br-1 { border-bottom-right-radius: 0.125rem !important; }
+.rounded-br-2 { border-bottom-right-radius: 0.25rem !important; }
+.rounded-br-4 { border-bottom-right-radius: 0.5rem !important; }
+.rounded-br-8 { border-bottom-right-radius: 1rem !important; }
+
+/* Z-Index */
+.z-index-1 { z-index: 1; }
+.z-index-2 { z-index: 2; }
+.z-index-3 { z-index: 3; }
+.z-index-4 { z-index: 4; }
+.z-index-5 { z-index: 5; }
+.z-index-6 { z-index: 6; }
+.z-index-7 { z-index: 7; }
+.z-index-8 { z-index: 8; }
+.z-index-9 { z-index: 9; }
+.z-index-10 { z-index: 10; }
+
+/* Positioning */
+.top-right { position: absolute; top: 0px; right: 0px; }
+.top-left { position: absolute; top: 0px; left: 0px; }
+.top { position: absolute; top: 0px; }
+.bottom-right { position: absolute; bottom: 0px; right: 0px; }
+.bottom-left { position: absolute; bottom: 0px; left: 0px; }
+.bottom { position: absolute; bottom: 0px; }
+.middle { display: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.relative { position: relative; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+.absolute { position: absolute; }
+.sticky-top { position: -webkit-sticky; position: sticky; top: 0px; z-index: var(--navBarZindex); width: 100%; }
+.fixed-top { position: fixed; top: 0px; z-index: var(--navBarZindex); width: 100%; }
+.fixedBottom { position: fixed; bottom: 0; left: 0; width: 100%; z-index: var(--navBarZindex); }
+.fixedTop { position: fixed; bottom: 0; top: 0; width: 100%; z-index: var(--navBarZindex); }
+
+/* Display */
+.block { display: block; }
+.inline-block { display: inline-block; }
+.content-middle { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }
+.central { display: flex; align-items: center; justify-content: center; }
+
+/* Flexbox */
+.row-flex { display: flex !important; flex-direction: row !important; align-items: center; }
+.row-flex.gap { grid-gap: 0.5rem; gap: 0.2rem; }
+.row-flex.space-between { justify-content: space-between; }
+.row-flex.stretch { align-items: stretch !important; }
+.row-flex.space-around { justify-content: space-around; }
+.row-flex.center { justify-content: center; }
+
+/* Shadows */
+.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+.hover-shadow { transition: 0.3s; }
+.hover-shadow:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
+.shadow-bingo { box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5), 0px 40px 40px 0px rgba(225, 225, 255, 0.6); }
+
+/* Fit */
+.fit { height: 100%; width: 100%; }
+.fit-width { width: fit-content; }
+.fit-height { height: fit-content; }
+
+/* Rounded */
+.rightRounded { border-top-right-radius: 300rem !important; border-bottom-right-radius: 300rem !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }
+.leftRounded { border-top-left-radius: 300rem !important; border-bottom-left-radius: 300rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
+
+/* Hover Effects */
+.hoverable { transition: 0.1s linear; }
+.hoverable:hover { background-color: var(--hoverable) !important; }
+.hoverable-border { border: 0.1rem solid transparent; transition: 0.3s ease-in-out; }
+.hoverable-border:hover { border: var(--border); }
+
+/* Cursor */
+.cursor-pointer { cursor: pointer; }
+.cursor-copy { cursor: copy; }
+.cursor-none { cursor: none; }
+.cursor-move { cursor: move; }
+
+/* Containers */
+.container { margin: 0 10%; }
+@media (max-width: 600px) {
+  .container { margin: 0 5%; }
+}
+.page { min-height: 80vh; padding: 2rem 0; }
+
+
+/* ===== BLUR EFFECTS ===== */
+.blur-0 { filter: blur(0) !important; }
+.blur-xs { filter: blur(0.125rem) !important; }
+.blur-sm { filter: blur(0.25rem) !important; }
+.blur-md { filter: blur(0.5rem) !important; }
+.blur-lg { filter: blur(1rem) !important; }
+.blur-xl { filter: blur(1.5rem) !important; }
+.blur-2xl { filter: blur(2rem) !important; }
+
+/* Backdrop Blur */
+.backdrop-blur-0 { backdrop-filter: blur(0) !important; }
+.backdrop-blur-xs { backdrop-filter: blur(0.125rem) !important; }
+.backdrop-blur-sm { backdrop-filter: blur(0.25rem) !important; }
+.backdrop-blur-md { backdrop-filter: blur(0.5rem) !important; }
+.backdrop-blur-lg { backdrop-filter: blur(1rem) !important; }
+.backdrop-blur-xl { backdrop-filter: blur(1.5rem) !important; }
+.backdrop-blur-2xl { backdrop-filter: blur(2rem) !important; }
+
+
+/* ===== ENTRANCE ANIMATIONS ===== */
+/* Fade In */
+.fade-in { animation: fadeIn 0.6s ease-in-out !important; }
+.fade-in-up { animation: fadeInUp 0.8s ease-out !important; }
+.fade-in-down { animation: fadeInDown 0.8s ease-out !important; }
+.fade-in-left { animation: fadeInLeft 0.8s ease-out !important; }
+.fade-in-right { animation: fadeInRight 0.8s ease-out !important; }
+
+/* Slide In */
+.slide-in-up { animation: slideInUp 0.8s ease-out !important; }
+.slide-in-down { animation: slideInDown 0.8s ease-out !important; }
+.slide-in-left { animation: slideInLeft 0.8s ease-out !important; }
+.slide-in-right { animation: slideInRight 0.8s ease-out !important; }
+
+/* Zoom In */
+.zoom-in { animation: zoomIn 0.6s ease-out !important; }
+.zoom-in-up { animation: zoomInUp 0.8s ease-out !important; }
+.zoom-in-down { animation: zoomInDown 0.8s ease-out !important; }
+.zoom-in-left { animation: zoomInLeft 0.8s ease-out !important; }
+.zoom-in-right { animation: zoomInRight 0.8s ease-out !important; }
+
+/* Bounce In */
+.bounce-in { animation: bounceIn 0.8s ease-out !important; }
+.bounce-in-up { animation: bounceInUp 0.8s ease-out !important; }
+.bounce-in-down { animation: bounceInDown 0.8s ease-out !important; }
+.bounce-in-left { animation: bounceInLeft 0.8s ease-out !important; }
+.bounce-in-right { animation: bounceInRight 0.8s ease-out !important; }
+
+/* Flip In */
+.flip-in-x { animation: flipInX 0.8s ease-out !important; }
+.flip-in-y { animation: flipInY 0.8s ease-out !important; }
+
+/* Rotate In */
+.rotate-in { animation: rotateIn 0.8s ease-out !important; }
+.rotate-in-up { animation: rotateInUp 0.8s ease-out !important; }
+.rotate-in-down { animation: rotateInDown 0.8s ease-out !important; }
+
+/* Special Entrance */
+.roll-in { animation: rollIn 0.8s ease-out !important; }
+.light-speed-in { animation: lightSpeedIn 0.8s ease-out !important; }
+.swing-in { animation: swingIn 0.8s ease-out !important; }
+.wobble-in { animation: wobbleIn 0.8s ease-out !important; }
+.pulse-in { animation: pulseIn 0.8s ease-out !important; }
+
+/* ===== HOVER ANIMATIONS ===== */
+/* Scale Hover */
+.hover-scale { transition: transform 0.3s ease !important; }
+.hover-scale:hover { transform: scale(1.05) !important; }
+.hover-scale-lg { transition: transform 0.3s ease !important; }
+.hover-scale-lg:hover { transform: scale(1.1) !important; }
+.hover-scale-sm { transition: transform 0.3s ease !important; }
+.hover-scale-sm:hover { transform: scale(1.02) !important; }
+
+/* Lift Hover */
+.hover-lift { transition: all 0.3s ease !important; }
+.hover-lift:hover { transform: translateY(-0.5rem) !important; box-shadow: var(--card) !important; }
+.hover-lift-lg { transition: all 0.3s ease !important; }
+.hover-lift-lg:hover { transform: translateY(-1rem) !important; box-shadow: var(--card) !important; }
+
+/* Glow Hover */
+.hover-glow { transition: all 0.3s ease !important; }
+.hover-glow:hover { box-shadow: 0 0 2rem rgba(var(--primary-rgb), 0.4) !important; transform: translateY(-0.25rem) !important; }
+
+/* Shake Hover */
+.hover-shake:hover { animation: shake 0.5s ease-in-out !important; }
+.hover-wobble:hover { animation: wobble 0.5s ease-in-out !important; }
+.hover-bounce:hover { animation: bounce 0.5s ease-in-out !important; }
+
+/* Border Hover */
+.hover-border-grow { transition: all 0.3s ease !important; border: 2px solid transparent !important; }
+.hover-border-grow:hover { border-color: var(--gradient) !important; transform: scale(1.02) !important; }
+
+/* Text Hover */
+.hover-text-glow:hover { text-shadow: 0 0 1rem currentColor !important; }
+.hover-text-lift:hover { transform: translateY(-0.125rem) !important; text-shadow: var(--card) !important; }
+
+/* ===== CONTINUOUS ANIMATIONS ===== */
+.animate-float { animation: float 3s ease-in-out infinite !important; }
+.animate-pulse-slow { animation: pulse 3s ease-in-out infinite !important; }
+.animate-bounce-slow { animation: bounce 2s ease-in-out infinite !important; }
+.animate-spin-slow { animation: spin 3s linear infinite !important; }
+.animate-ping-slow { animation: ping 3s ease-out infinite !important; }
+
+.animate-breath { animation: breath 4s ease-in-out infinite !important; }
+.animate-wave { animation: wave 2s ease-in-out infinite !important; }
+.animate-glow { animation: glow 2s ease-in-out infinite !important; }
+
+/* ===== ANIMATION KEYFRAMES ===== */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(2rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-2rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInLeft {
+  from { opacity: 0; transform: translateX(-2rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fadeInRight {
+  from { opacity: 0; transform: translateX(2rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideInDown {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes zoomIn {
+  from { opacity: 0; transform: scale(0.5); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes zoomInUp {
+  from { opacity: 0; transform: scale(0.5) translateY(2rem); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes bounceIn {
+  0% { opacity: 0; transform: scale(0.3); }
+  50% { opacity: 1; transform: scale(1.05); }
+  70% { transform: scale(0.9); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes bounceInUp {
+  0% { opacity: 0; transform: translateY(2rem) scale(0.3); }
+  50% { opacity: 1; transform: translateY(-1rem) scale(1.05); }
+  70% { transform: translateY(0.5rem) scale(0.9); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes flipInX {
+  from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
+  to { transform: perspective(400px) rotateX(0deg); opacity: 1; }
+}
+
+@keyframes flipInY {
+  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
+  to { transform: perspective(400px) rotateY(0deg); opacity: 1; }
+}
+
+@keyframes rotateIn {
+  from { transform: rotate(-180deg); opacity: 0; }
+  to { transform: rotate(0deg); opacity: 1; }
+}
+
+@keyframes rollIn {
+  from { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
+  to { opacity: 1; transform: translateX(0px) rotate(0deg); }
+}
+
+@keyframes lightSpeedIn {
+  from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
+  60% { transform: skewX(20deg); opacity: 1; }
+  80% { transform: skewX(-5deg); }
+  to { transform: translate3d(0, 0, 0); }
+}
+
+@keyframes swingIn {
+  20% { transform: rotate3d(0, 0, 1, 15deg); }
+  40% { transform: rotate3d(0, 0, 1, -10deg); }
+  60% { transform: rotate3d(0, 0, 1, 5deg); }
+  80% { transform: rotate3d(0, 0, 1, -5deg); }
+  to { transform: rotate3d(0, 0, 1, 0deg); }
+}
+
+@keyframes wobbleIn {
+  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) rotate3d(0, 0, 1, -45deg); }
+  50% { opacity: 1; transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 15deg); }
+  70% { transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); }
+  to { opacity: 1; transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg); }
+}
+
+@keyframes pulseIn {
+  0% { opacity: 0; transform: scale(0.5); }
+  50% { opacity: 1; transform: scale(1.1); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+/* Hover Keyframes */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-0.5rem); }
+  40%, 80% { transform: translateX(0.5rem); }
+}
+
+@keyframes wobble {
+  0%, 100% { transform: translateX(0%); }
+  15% { transform: translateX(-25%) rotate(-5deg); }
+  30% { transform: translateX(20%) rotate(3deg); }
+  45% { transform: translateX(-15%) rotate(-3deg); }
+  60% { transform: translateX(10%) rotate(2deg); }
+  75% { transform: translateX(-5%) rotate(-1deg); }
+}
+
+/* Continuous Animations */
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-1rem); }
+}
+
+@keyframes breath {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes wave {
+  0%, 100% { transform: translateX(0); }
+  50% { transform: translateX(0.5rem); }
+}
+
+@keyframes glow {
+  0%, 100% { box-shadow: 0 0 0.5rem rgba(var(--primary-rgb), 0.5); }
+  50% { box-shadow: 0 0 2rem rgba(var(--primary-rgb), 0.8); }
+}
+
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}