set legal-info page css

public/assets/vendor/css/core.css

@@ -32541,6 +32541,29 @@ body:not(.modal-open) .layout-content-navbar .layout-navbar {
     var(--bs-dark-contrast)
   );
 }
+
+/* App colors classes */
 .bg-gray-60{
  background-color:var(--bs-gray-60)
+}
+.text-gray-60{
+ color:var(--bs-gray-60)
+}
+.bg-blue {
+  background-color:var(--bs-blue)
+}
+.text-blue{
+  color:var(--bs-blue)
+}
+.bg-indigo {
+  background-color:var(--bs-indigo)
+}
+.text-indigo{
+  color:var(--bs-indigo)
+}
+.bg-red {
+  background-color:var(--bs-red)
+}
+.text-red{
+  color:var(--bs-red)
 }

src/pages/TermsAndConditions/LegalInfoCard.jsx

@@ -4,25 +4,10 @@ const LegalInfoPage = () => {
   return (
     <>
     <div
-      style={{
+     className='d-block text-center w-100 '
-        background: 'linear-gradient(180deg, #FF1500FF 30%, #FFFFFFFF 30%)',
-        minHeight: '100vh',
-        display: 'flex',   
-        flexDirection: 'column', 
-        justifyContent: 'center',
-        padding: '2rem',  
-        color: 'white',  
-      }}
     >
       <div
-        style={{
+      className='d-flex flex-column align-items-center justify-content-center w-100 '
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '100%',
-          color: 'white',
-        }}
       >
         <div style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
           MARCO SECURE SOLUTIONS
@@ -41,7 +26,7 @@ const LegalInfoPage = () => {
             overflowY: 'auto',
             flexGrow: 1,
             
-            marginBottom: '2rem', // Adds space below the card
+            marginBottom: '2rem', 
           }}
         >
           <h4>Terms & Conditions</h4>