diff --git a/blogpost4.html b/blogpost4.html
index c4af969..33103e8 100644
--- a/blogpost4.html
+++ b/blogpost4.html
@@ -604,204 +604,160 @@ <h3 class="space-description-heading container slider-reveal">
         </style>
 
         <!-- PHILOSOPHY SECTION -->
-        <section class="section text-center philosophy-section">
-          <div class="philosophy-container">
-            <div class="curve-top">
-              <svg
-                data-name="Layer 1"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 1200 120"
-                preserveAspectRatio="none"
-              >
-                <path
-                  d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
-                  class="shape-fill"
-                ></path>
+        <section class="philosophy-section">
+          <div class="curve-top">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
               </svg>
-            </div>
-            <div class="card-container">
-              <div class="card">
-                <img
+          </div>
+          <img
                   src="assets/images/divider.jpg"
                   alt=""
                   class="card-heading-img"
                 />
-                <h1 class="philosophy-heading">Deciding Factors In a Space</h1>
-              </div>
+          <h1 class="philosophy-heading">Deciding Factors In a Space</h1>
+          <div class="card-container">
               <div class="card">
-                <img
+                  <div class="divider"></div>
+                  <img
                   src="assets/images/divider.jpg"
                   alt=""
                   class="card-heading-img"
                 />
-                <h3 class="card-heading container">Functionality and Flow</h3>
-                <p class="card-content container">
-                  Any space should promote effective workflows, allowing easy
-                  transitions between various types of work, like collaboration,
-                  focused work, and relaxation. The physical layout impacts
-                  efficiency, and creating smooth transitions can reduce
-                  friction and support creativity.
-                </p>
+                  <h3 class="card-heading">Functionality and Flow</h3>
+                  <p class="card-content">Any space should promote effective workflows, allowing easy transitions between various types of work, like collaboration, focused work, and relaxation. The physical layout impacts efficiency, and creating smooth transitions can reduce friction and support creativity.</p>
               </div>
               <div class="card">
-                <img
+                  <div class="divider"></div>
+                  <img
                   src="assets/images/divider.jpg"
                   alt=""
                   class="card-heading-img"
                 />
-                <h3 class="card-heading container">Sustainability</h3>
-                <p class="card-content container">
-                  Environmentally conscious design choices reflect a commitment
-                  to sustainability. Using energy-efficient lighting, recyclable
-                  materials, and indoor plants can reduce an office's ecological
-                  footprint and align with values that attract environmentally
-                  conscious employees.
-                </p>
+                  <h3 class="card-heading">Sustainability</h3>
+                  <p class="card-content">Environmentally conscious design choices reflect a commitment to sustainability. Using energy-efficient lighting, recyclable materials, and indoor plants can reduce an office's ecological footprint and align with values that attract environmentally conscious employees.</p>
               </div>
               <div class="card">
-                <img
+                  <div class="divider"></div>
+                  <img
                   src="assets/images/divider.jpg"
                   alt=""
                   class="card-heading-img"
                 />
-                <h3 class="card-heading container">
-                  Balance between technology and Humanity
-                </h3>
-                <p class="card-content container">
-                  Integration between technology seamlessly into the workspace
-                  to enhance productivity but shouldn’t overlook the human
-                  experience. Thoughtful integration ensures tech enhances
-                  rather than overwhelms, preserving human connection and
-                  engagement in the process.
-                </p>
+                  <h3 class="card-heading">Balance Between Technology and Humanity</h3>
+                  <p class="card-content">Integration between technology and the workspace enhances productivity but shouldn’t overlook the human experience. Thoughtful integration ensures tech enhances rather than overwhelms, preserving human connection and engagement in the process.</p>
               </div>
-            </div>
           </div>
+      
           <div class="curve-bottom">
-            <svg
-              data-name="Layer 1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 1200 120"
-              preserveAspectRatio="none"
-            >
-              <path
-                d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
-                class="shape-fill"
-              ></path>
-            </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                  <path d="M0,120 C300,80 600,160 1200,20 V120 H0 Z" class="shape-fill"></path>
+              </svg>
           </div>
-        </section>
-
-        <style>
-          .card-container {
-            display: grid;
-          }
-          .card-container {
-            grid-template-columns: 1fr;
-          }
-          @media (min-width: 600px) {
-            .card-container {
-              grid-template-columns: repeat(2, 1fr);
-            }
-          }
-
-          @media (min-width: 900px) {
-            .card-container {
-              grid-template-columns: repeat(3, 1fr);
-            }
-          }
-          @media (min-width: 1200px) {
-            .card-container {
-              grid-template-columns: repeat(4, 1fr);
-            }
-          }
-          .philosophy-section {
-            background-color: #2e3033;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-          .philosophy-container {
-            width: 95vw;
-            padding: 0;
-            margin: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
+      </section>
+      
+      <style>
+      .philosophy-section {
+          background-color: #2e3033;
+          position: relative;
+          padding: 100px 50px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+      }
+      
+      .curve-top .shape-fill,
+      .curve-bottom .shape-fill {
+          fill: #1a1a1d;
+      }
+      
+      .curve-top {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 150px;
+      }
+      
+      .curve-bottom {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 100px;
+      }
+      
+      .philosophy-heading {
+          color: #dba562;
+          font-size: 36px;
+          font-weight: bold;
+          margin-bottom: 30px;
+          text-shadow: 
+              1px 1px 0px #ffffff,
+              2px 2px 0px #dba562;
+      }
+      
+      .card-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: stretch; 
+        gap: 30px;
+        max-width: 1200px;
+        margin-top: 50px;
+      }
+      
+      .card {
+        background-color: #2e3033;
+        border-radius: 10px;
+        padding: 20px;
+        max-width: 300px;
+        color: #f1f1f1;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
+        text-align: center;
+      }
+      
+      .divider {
+        width: 100%; 
+        height: 30px; 
+        margin: 10px auto 20px;
+        overflow: hidden;
+      }
+
+      
+      .card-heading {
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 15px;
+        color: #dba562;
+      }
+      
+      .card-content {
+          font-size: 16px;
+          line-height: 1.6;
+          color: #dcdcdc;
+      }
+      .card-heading-img {
+      display: block; 
+      margin: 0 auto; 
+      max-width: 100%; 
+      height: auto; 
+    }
+      @media (max-width: 768px) {
           .philosophy-heading {
-            font-size: 3em;
-            font-weight: bold;
-            color: hsl(38, 61%, 55%);
-            text-shadow: 1px 0px 0px hsl(38, 61%, 50%),
-              4px 0px 0px hsl(38, 61%, 45%), 3px 0px 0px hsl(38, 61%, 40%),
-              5px 0px 0px hsl(38, 61%, 35%), 5px 0px 0px hsl(38, 61%, 30%),
-              6px 0px 0px hsl(38, 61%, 25%);
-            line-height: 1.25em;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-          .curve-top {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            overflow: hidden;
-            line-height: 0;
+              font-size: 28px;
           }
-
-          .curve-top svg {
-            position: relative;
-            display: block;
-            width: calc(100% + 1.3px);
-            height: 200px;
-            transform: rotateY(180deg);
-          }
-
-          .curve-top .shape-fill {
-            fill: #161718;
-          }
-
-          .card {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background-color: transparent;
-            height: 50vh;
-          }
-
-          .card-heading {
-            color: hsl(38, 61%, 55%);
-            font-size: 2.5rem;
-            font-weight: bold;
-          }
-
-          .curve-bottom {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            overflow: hidden;
-            line-height: 0;
-            transform: rotate(180deg);
-            z-index: -1;
-          }
-
-          .curve-bottom svg {
-            position: relative;
-            display: block;
-            width: calc(100% + 1.3px);
-            height: 200px;
-            transform: rotateY(180deg);
+      
+          .card-container {
+              flex-direction: column;
+              align-items: center;
           }
+      }
+      </style>
 
-          .curve-bottom .shape-fill {
-            fill: #212121;
-          }
-        </style>
         <!-- MARKETING SECTION -->
         <section class="section text-center marketing-section">
           <div class="marketing-container container">