More design work and a new card

app/app.css

@@ -1,15 +1,177 @@
-/* @import "tailwindcss";
+@import "tailwindcss";
 
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+body{
+  padding: 0px;
+  margin: 0px;
+  background-color: rgb(231, 235, 237);
+  overflow-x: hidden;
 }
 
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
-
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
+#Header{
+  color: white;
+  /* padding: 10px; */
+  background-color: rgb(43, 46, 208);
+  display: grid;
+  grid-template-columns: 70% 30%;
+  #title{
+    padding: 10px;
+    font-size: 2.7em;
   }
-} */
+
+  #main_nav{
+    text-align: center;
+
+    ul{
+      height: 100%;
+      display: grid;
+      /* grid-template-rows: 33% 33% 33%; */
+      grid-template-columns: 33% 33% 33%;
+      li{
+        grid-row: 2;
+        padding: 5px;
+      }
+    }
+  }
+}
+
+
+#content{
+  /* padding: 10px; */
+
+  #hero{
+
+  }
+  #sales_plate{
+    h3{
+      font-weight: bold;
+    }
+    padding: 1.2em;
+    text-align: center;
+  }
+  #info_shelf{
+    padding: 1em;
+    margin: 10px 0px 10px 0px;
+
+    #exec_summary{
+      background-color: rgb(255, 255, 255);
+      border-radius: 5px;
+      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.26);
+      border: 2px solid black;
+      padding: 8px;
+      margin: 2px;
+    }
+    #engineering_dive{
+           background-color: rgb(255, 255, 255);
+      border-radius: 5px;
+      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.26);
+      border: 2px solid black;
+      padding: 8px;
+      margin: 2px;
+      margin-top: 10px;
+    }
+  }
+  #service_plate{
+    #web_cms_plate{
+      display: grid;
+      grid-template-columns: 50% 50%;
+      /* background-color: aliceblue; */
+      /* border-radius: 5px; */
+
+      
+    }
+    #alt_service_plate{
+      /* background-color: gainsboro; */
+      /* border-radius: 5px; */
+      margin-top: 10px;
+      display: grid;
+      grid-template-columns: 50% 50%;
+      
+
+    }
+    .pricing{
+      font-weight: 500;
+    }
+    h3{
+      width: 100%;
+      font-size: 1.2em;
+      font-weight: bold;
+      padding-left: 0.2em;
+    }
+    padding: 1em;
+    #service_carousel{
+      display: grid;
+      grid-template-columns: 30% 30% 30% 30%; 
+      overflow-x: scroll;
+      overflow-y: hidden;
+      align-items: center;
+      align-content: center;
+      text-align: center;
+      @media screen and (width <= 800px) {
+        display: inline;
+      }
+      div{
+        width: 90%;
+        margin: 0.2em;
+        height: 100%;
+        @media screen and (width <= 800px) {
+          width: 100%;
+        }
+      }
+      #bespoke_service_plate{
+            border-radius: 5px;
+            margin: 0.2em;
+            background-color: aliceblue;        
+            align-items: center;
+            text-align: center;
+            padding: 1em;
+            h4{
+              font-weight: bold;
+            }
+
+      }
+      #CMS_service_plate{
+        border-radius: 5px;
+        margin: 0.2em;
+        background-color: aliceblue;
+        align-items: center;
+        text-align: center;
+        padding: 1em;
+        h4{
+          font-weight: bold;
+        }
+      }
+      #consulting_service_plate{
+        border-radius: 5px;
+        background-color: gainsboro;
+        margin: 0.2em;
+        text-align: center;
+        align-items: center;        
+        padding: 1em;
+      }
+      #general_infotech_service_plate{
+        border-radius: 5px;
+        background-color: gainsboro;
+        margin: 0.2em;
+        text-align: center;
+        align-items: center;
+        padding: 1em;
+      }
+      h4{
+        font-weight: bold;
+      }
+      img{
+        border-radius: 5px;
+      }
+    }
+  }
+  .npo_info{
+    font-style: italic;
+    font-size: 0.83em;
+  }
+}
+
+img{
+  width: 100%;
+}
+