global css

styles/globals.css

@@ -1,9 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap');
 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Inter:wght@100..900&family=Outfit:wght@100..900&display=swap');
+
 
 @custom-variant dark (&:is(.dark *));
 
@@ -65,8 +66,8 @@
   --accent-foreground: #FFFFFF;
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: rgba(255,255,255,0.05);
+  --border: rgba(255, 255, 255, 0.05);
-  --input: rgba(255,255,255,0.05);
+  --input: rgba(255, 255, 255, 0.05);
   --ring: oklch(0.439 0 0);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
@@ -198,114 +199,130 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
-  
+
   .scrollbar-hide::-webkit-scrollbar {
     display: none;
   }
-  
+
   @keyframes scroll {
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-50%);
     }
   }
-  
+
   @keyframes marquee {
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-33.333333%);
     }
   }
-  
+
   @keyframes shimmer {
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
   }
-  
+
   @keyframes shimmerSweep {
     0% {
       background-position: -200% center;
     }
+
     100% {
       background-position: 200% center;
     }
   }
-  
+
   @keyframes gradient {
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
   }
-  
+
   @keyframes gradientMove {
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
   }
-  
+
   @keyframes float {
-    0%, 100% {
+
+    0%,
+    100% {
       transform: translateY(0px);
     }
+
     50% {
       transform: translateY(-10px);
     }
   }
-  
+
   @keyframes rotate {
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
   }
-  
+
   @keyframes scaleUp {
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
+
     100% {
       transform: scale(1);
     }
   }
-  
+
   @keyframes orbit {
     0% {
       transform: rotate(0deg) translateX(60px) rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg) translateX(60px) rotate(-360deg);
     }
   }
-  
+
   @keyframes orbitReverse {
     0% {
       transform: rotate(0deg) translateX(50px) rotate(0deg);
     }
+
     100% {
       transform: rotate(-360deg) translateX(50px) rotate(360deg);
     }
@@ -315,6 +332,7 @@
     from {
       height: 0;
     }
+
     to {
       height: var(--radix-accordion-content-height);
     }
@@ -324,35 +342,36 @@
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
   }
-  
+
   .animate-scroll {
     animation: scroll 20s linear infinite;
   }
-  
+
   .animate-marquee {
     animation: marquee 30s linear infinite;
   }
-  
+
   .animate-marquee-paused {
     animation-play-state: paused;
   }
-  
+
   .animate-gradient {
     animation: gradient 8s ease infinite;
   }
-  
+
   .animate-float {
     animation: float 3s ease-in-out infinite;
   }
-  
+
   .animate-rotate {
     animation: rotate 10s linear infinite;
   }
-  
+
   .animate-scale {
     animation: scaleUp 2s ease-in-out infinite;
   }
@@ -382,14 +401,12 @@
 
   /* Primary Button - WDI Brand Style with Elevation */
   .btn-primary-wdi {
-    background: linear-gradient(
+    background: linear-gradient(90deg,
-      90deg,
+        #E5195E,
-      #E5195E,
+        #E5195E 40%,
-      #E5195E 40%,
+        #ff2970 50%,
-      #ff2970 50%,
+        #E5195E 60%,
-      #E5195E 60%,
+        #E5195E);
-      #E5195E
-    );
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -415,14 +432,12 @@
 
   /* Secondary Button - Gray Style with Elevation */
   .btn-secondary-wdi {
-    background: linear-gradient(
+    background: linear-gradient(90deg,
-      90deg,
+        #374151,
-      #374151,
+        #374151 40%,
-      #374151 40%,
+        #4b5563 50%,
-      #4b5563 50%,
+        #374151 60%,
-      #374151 60%,
+        #374151);
-      #374151
-    );
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -531,14 +546,12 @@
 
   /* Destructive Button with Elevation */
   .btn-destructive-wdi {
-    background: linear-gradient(
+    background: linear-gradient(90deg,
-      90deg,
+        #dc2626,
-      #dc2626,
+        #dc2626 40%,
-      #dc2626 40%,
+        #ef4444 50%,
-      #ef4444 50%,
+        #dc2626 60%,
-      #dc2626 60%,
+        #dc2626);
-      #dc2626
-    );
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -585,23 +598,23 @@
   .delay-300 {
     animation-delay: 300ms;
   }
-  
+
   .delay-500 {
     animation-delay: 500ms;
   }
-  
+
   .delay-700 {
     animation-delay: 700ms;
   }
-  
+
   .delay-1000 {
     animation-delay: 1000ms;
   }
-  
+
   .delay-1200 {
     animation-delay: 1200ms;
   }
-  
+
   .delay-1500 {
     animation-delay: 1500ms;
   }
@@ -637,7 +650,7 @@ html {
   font-size: var(--font-size);
 }
 
-h1{
+h1 {
   line-height: 54px;
 }
 
@@ -645,6 +658,6 @@ h1{
   padding-bottom: 0 !important;
 }
 
-button{
+button {
   cursor: pointer;
 }