Feat:New changes

src/app/pages/veriable-form/veriable-form.component.sass

@@ -0,0 +1,71 @@
+// General form styles
+form
+  max-width: 100%
+  margin: 20px auto
+  padding: 20px
+  border: 1px solid #ddd
+  border-radius: 5px
+  background-color: #f9f9f9
+
+  .form-row
+    display: flex
+    flex-direction: column
+    margin-bottom: 20px
+    padding: 10px
+    border: 1px solid #ccc
+    border-radius: 5px
+    background-color: #fff
+
+    .form-column
+      display: flex
+      align-items: center
+      margin-bottom: 10px
+
+      > *
+        margin-right: 10px
+
+      select, input
+        padding: 8px
+        border-radius: 3px
+        border: 1px solid #ccc
+        width: 150px
+
+    .row-buttons
+      margin-top: 10px
+
+    .column-buttons
+      margin-left: auto // Push button to the right
+
+  // Button styles
+  button
+    padding: 10px 15px
+    border: none
+    background-color: #007bff
+    color: white
+    border-radius: 5px
+    cursor: pointer
+    margin-right: 10px
+
+    &:hover
+      background-color: #0056b3
+
+    &[type="submit"]
+      margin-top: 20px
+      background-color: #28a745
+
+      &:hover
+        background-color: #218838
+
+// Media queries for responsiveness
+@media (max-width: 768px)
+  .form-row
+    flex-direction: column
+
+  .form-column
+    flex-direction: column
+    align-items: flex-start
+
+    > *
+      margin-bottom: 10px
+      width: 100%
+