added new style responsive

app/globals.css

@@ -289,7 +289,6 @@ form {
 
 .toggleGroup {
   display: flex;
-  gap: 5px;
   background-color: #f3f4f6;
   border-radius: 6px;
   flex-wrap: wrap;
@@ -306,6 +305,9 @@ form {
   font-weight: 500;
   overflow: hidden;
   max-height: 60px;
+  padding: 1rem 0.5rem;
+  min-width: 100px;
+  min-height: 45px;
 }
 
 .toggleButton.active {
@@ -387,10 +389,41 @@ table tr {
   width: 100%;
 }
 
+.pass {
+  display: flex;
+  width: 300px;
+}
+
 @media (max-width: 1330px) {
   .mainContainer {
     grid-template-rows: 60px 1fr;
   }
+
+  .centerGrid {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .img {
+    width: 100%;
+  }
+
+  .img::after {
+    background: linear-gradient(to right, #f9f9f993, rgba(128, 128, 128, 0));
+  }
+
+  .img::before {
+    display: flex;
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to left, #f9f9f993, rgba(128, 128, 128, 0));
+  }
+
+  .title {
+    text-align: center;
+  }
 }
 
 @media (max-width: 1300px) {
@@ -449,10 +482,6 @@ table tr {
     background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
   }
 
-  .title {
-    text-align: center;
-  }
-
   .containerSection {
     align-items: center;
   }
@@ -480,6 +509,10 @@ table tr {
     font-size: 1.5rem;
     padding: 1rem 1.5rem;
   }
+
+  .toggleButton {
+    padding: 0;
+  }
 }
 
 @media (max-height: 960px) {