responsive

Author: abhinavsohani

index.html

@@ -18,18 +18,17 @@
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
             color: #222;
             line-height: 1.5;
-            padding: 80px 40px 40px 40px;
-            /* Increased top padding from 40px to 80px */
+            padding: 80px 20px 40px 20px;
             max-width: 1200px;
             margin: 0 auto;
         }
 
         /* Layout */
         .container {
             display: flex;
+            flex-direction: row;
             gap: 80px;
             margin-top: 40px;
-            /* Added additional top margin to the container */
         }
 
         /* Sidebar */
@@ -177,6 +176,83 @@
         .arrow-icon {
             font-size: 20px;
         }
+
+        /* Responsive styles */
+        @media (max-width: 768px) {
+            body {
+                padding: 60px 15px 30px 15px;
+            }
+            
+            .container {
+                flex-direction: column;
+                gap: 40px;
+            }
+            
+            .sidebar {
+                width: 100%;
+                text-align: center;
+            }
+            
+            .logo {
+                margin-bottom: 20px;
+            }
+            
+            .logo img {
+                max-width: 120px;
+            }
+            
+            .nav {
+                flex-direction: row;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+            
+            .hero-title {
+                font-size: 36px;
+            }
+            
+            .section-title {
+                font-size: 28px;
+            }
+            
+            .section-text {
+                font-size: 16px;
+            }
+            
+            .divider {
+                margin: 40px 0;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            body {
+                padding: 40px 10px 20px 10px;
+            }
+            
+            .container {
+                gap: 30px;
+                margin-top: 20px;
+            }
+            
+            .hero-title {
+                font-size: 28px;
+            }
+            
+            .section-title {
+                font-size: 24px;
+            }
+            
+            img {
+                width: 100% !important;
+                height: auto !important;
+            }
+        }
+
+        /* Make all images responsive by default */
+        img {
+            max-width: 100%;
+            height: auto;
+        }
     </style>
 </head>