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);
-  --input: rgba(255,255,255,0.05);
+  --border: 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;
@@ -207,6 +208,7 @@
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-50%);
     }
@@ -216,6 +218,7 @@
     0% {
       transform: translateX(0);
     }
+
     100% {
       transform: translateX(-33.333333%);
     }
@@ -225,6 +228,7 @@
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -234,6 +238,7 @@
     0% {
       background-position: -200% center;
     }
+
     100% {
       background-position: 200% center;
     }
@@ -243,9 +248,11 @@
     0% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
+
     100% {
       background-position: 0% 50%;
     }
@@ -255,18 +262,23 @@
     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);
     }
@@ -276,6 +288,7 @@
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
@@ -285,9 +298,11 @@
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
+
     100% {
       transform: scale(1);
     }
@@ -297,6 +312,7 @@
     0% {
       transform: rotate(0deg) translateX(60px) rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg) translateX(60px) rotate(-360deg);
     }
@@ -306,6 +322,7 @@
     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,6 +342,7 @@
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
@@ -382,14 +401,12 @@
 
   /* Primary Button - WDI Brand Style with Elevation */
   .btn-primary-wdi {
-    background: linear-gradient(
-      90deg,
-      #E5195E,
-      #E5195E 40%,
-      #ff2970 50%,
-      #E5195E 60%,
-      #E5195E
-    );
+    background: linear-gradient(90deg,
+        #E5195E,
+        #E5195E 40%,
+        #ff2970 50%,
+        #E5195E 60%,
+        #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(
-      90deg,
-      #374151,
-      #374151 40%,
-      #4b5563 50%,
-      #374151 60%,
-      #374151
-    );
+    background: linear-gradient(90deg,
+        #374151,
+        #374151 40%,
+        #4b5563 50%,
+        #374151 60%,
+        #374151);
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -531,14 +546,12 @@
 
   /* Destructive Button with Elevation */
   .btn-destructive-wdi {
-    background: linear-gradient(
-      90deg,
-      #dc2626,
-      #dc2626 40%,
-      #ef4444 50%,
-      #dc2626 60%,
-      #dc2626
-    );
+    background: linear-gradient(90deg,
+        #dc2626,
+        #dc2626 40%,
+        #ef4444 50%,
+        #dc2626 60%,
+        #dc2626);
     background-size: 200% auto;
     color: white;
     font-weight: 500;
@@ -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;
 }