improve border in faqs

src/Component/FAQ.css

@@ -45,17 +45,72 @@
         margin: 0 5rem;
     }
 }
+@property --gradient-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+
 
 .faq {
-    border: 1px solid rgba(255, 255, 255, 0.5); /* White border with transparency */
+    border: 1px solid rgba(255, 255, 255, 0.5); 
     border-radius: 8px;
     padding: 1rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
     transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
     background-color: rgba(18, 1, 26, 0.7); /* Violet background color with transparency */
     width: 70vw;
+    position: relative;
+  padding: 1rem;
+  border-radius: 3px;
+  z-index: 1; 
 }
 
+.faq::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      #8126f0,
+      #b179f0,
+      #b395ef,
+      #b179f0,
+      #8126f0
+    );
+    border-radius: inherit;
+    padding: 0.3rem; /* Adjust as needed for border thickness */
+    -webkit-mask: 
+      linear-gradient(#fff 0 0) content-box, 
+      linear-gradient(#fff 0 0);
+    mask: 
+      linear-gradient(#fff 0 0) content-box, 
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    animation: moving 1s linear infinite;
+  }
+
+  @keyframes moving {
+    0% {
+      --gradient-angle: 0deg;
+    }
+    100% {
+      --gradient-angle: 360deg;
+    }
+  }
+
+
+
+
+
+
+
+
 @media screen and (max-width:768px) {
     .faq{
         width: 85vw;
@@ -118,4 +173,4 @@
     .small{
         font-size: 0.75rem;
     }
-}
+}