Update static/index.html

static/index.html

@@ -244,6 +244,11 @@
     width: 100%;
     text-align: center;
     direction: ltr; 
+      width: 90%; /* Default width for mobile */
+    margin: 20px auto; /* Center the container */
+       display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* Adjust space between items */
 }
 
 .ai-tool-container  h3 {
@@ -389,5 +394,39 @@
 .ai-tool-container .btn-download:hover {
     background-color: #218838;
      }
+     
+/* Media Queries for larger screens */
+@media (min-width: 600px) {
+    .ai-tool-container {
+        width: 1024px;
+        height: auto; /* Ensure height adjusts dynamically */
+        padding: 100px; /* Increase padding */
+    }
+}
+
+@media (min-width: 768px) {
+    .ai-tool-container {
+        width: 1024px; /* Match image width */
+        height: auto; /* Match image height */
+        padding: 100px; /* Increase padding */
+    }
+}
+
+@media (min-width: 992px) {
+    .ai-tool-container {
+        width: 1024px; /* Match image width */
+        height: auto; /* Match image height */
+        padding: 100px; /* Increase padding */
+    }
+}
+
+@media (min-width: 1200px) {
+    .ai-tool-container {
+        width: 1024px; /* Match image width */
+        height: auto; /* Match image height */
+        padding: 100px; /* Increase padding */
+    }
+}
+    
     </style>
 </div>