Refactor CSS for content sections and styling

Author: vishwaparekh

assets/style.css

@@ -182,189 +182,49 @@ table {
       padding: 10px;
     }
 
-* Base */
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  color: #222;
-  background: #ffffff;
-  line-height: 1.6;
-}
-
-/* Layout wrapper */
-.site-wrapper {
-  display: flex;
-  min-height: 100vh;
-}
-
-/* Sidebar */
-.sidebar {
-  width: 250px;
-  background: #f7f9fc;
-  border-right: 1px solid #e2e6f0;
-  padding: 20px 18px;
-  position: sticky;
-  top: 0;
-  align-self: flex-start;
-  max-height: 100vh;
-  overflow-y: auto;
-}
-
-.sidebar-header .brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  text-decoration: none;
-}
-
-.sidebar-header img {
-  height: 40px;
-}
-
-.sidebar-header span {
-  font-weight: 700;
-  font-size: 1.1rem;
-  color: #003d99;
-}
-
-.sidebar-tagline {
-  margin-top: 12px;
-  font-size: 0.85rem;
-  color: #555;
-}
-
-/* Sidebar nav */
-.sidebar-nav ul {
-  list-style: none;
-  padding: 0;
-  margin: 20px 0 0;
-}
-
-.sidebar-nav li {
-  margin-bottom: 4px;
-}
-
-.sidebar-nav a {
-  text-decoration: none;
-  color: #222;
-  font-size: 0.95rem;
-  display: block;
-  padding: 5px 4px;
-  border-radius: 4px;
-  transition: background 0.2s, color 0.2s;
+/* Standard section styling */
+.content-section {
+  width: 85%;
+  max-width: 850px;
+  margin: 0 auto 50px;
+  padding: 20px 0;
+  line-height: 1.75;
 }
 
-.sidebar-nav a:hover {
-  background: #e4ecff;
+.content-section h2,
+.content-section h3 {
   color: #003d99;
-}
-
-.nav-section-title {
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #888;
-  margin: 14px 0 6px;
-}
-
-.nav-parent > span {
-  font-size: 0.9rem;
+  margin-top: 40px;
+  margin-bottom: 12px;
   font-weight: 600;
-  color: #003d99;
-  display: block;
-  margin: 8px 0 4px;
-}
-
-.nav-parent ul {
-  margin-left: 10px;
-  margin-bottom: 6px;
-}
-
-/* Main content */
-.main-content {
-  flex: 1;
-  padding: 40px 40px 30px;
 }
 
-/* Hero / index sections */
-.hero {
-  max-width: 820px;
-  margin: 0 auto 50px;
-  background: #f7f9fc;
-  text-align: center;
-  border-bottom: 1px solid #e5e9f2;
-}
-
-.hero h1 {
-  font-size: 2.6rem;
-  margin-bottom: 10px;
-}
-
-.hero p.subtitle {
-  font-size: 1.15rem;
-  color: #555;
-  margin-top: 0;
-}
-
-.hero p.lead {
+.content-section p {
   font-size: 1rem;
-  color: #555;
-  margin-top: 18px;
-  max-width: 680px;
+  color: #333;
+  margin: 14px 0;
 }
 
-.btn-primary {
-  display: inline-block;
-  margin-top: 24px;
-  padding: 10px 20px;
-  background: #003d99;
-  color: #fff;
-  border-radius: 6px;
-  text-decoration: none;
-  font-size: 0.95rem;
-  font-weight: 500;
-  transition: background 0.2s;
+/* Image styling – modern + responsive */
+.content-section img {
+  width: 100%;
+  height: auto;
+  max-width: 700px;
+  display: block;
+  margin: 24px auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 }
 
-.btn-primary:hover {
-  background: #002f73;
-}
-.btn-container {
-      margin-top: 25px;
-    }
-.btn {
-  display: inline-block;
-  background: #0055cc;
-  color: white;
-  text-decoration: none;
-  padding: 10px 20px;
-  border-radius: 6px;
-  margin: 6px;
-  font-weight: 500;
-  transition: background 0.3s;
-}
-.btn:hover { background: #003f99; }
-section {
-  width: 85%;
-  max-width: 950px;
-  margin: auto;
-  padding: 40px 0;
+/* Optional small caption styling */
+.img-caption {
+  text-align: center;
+  font-size: 0.82rem;
+  color: #666;
+  margin-top: -10px;
+  margin-bottom: 20px;
 }
 
-table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-top: 20px;
-    }
-    table th, table td {
-      border-bottom: 1px solid #eee;
-      text-align: left;
-      padding: 10px;
-    }
 
 /* Pillars / cards */
 .section-title {