diff --git a/Css-files/content.css b/Css-files/content.css
index 03ef653b..d77ae9d7 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -41,11 +41,23 @@ body {
   margin-top: -5rem;
 }
 
+/* Base navbar styles */
 .navbar {
   padding: 8px 10px;
+  overflow: hidden;
+  transition: background-color 0.3s ease; /* Smooth transition for background */
+}
+
+/* Styles for scrolled navbar */
+.navbar.scrolled {
+  background-color: rgba(20, 43, 93, 0.8); /* Darker background when scrolled */
 }
+
+/* Unchanged navbar styles */
 .navbar ul {
   overflow: hidden;
+  margin: 0; /* Reset margin */
+  padding: 0; /* Reset padding */
 }
 
 .navbar li {
@@ -53,6 +65,7 @@ body {
   list-style: none;
   padding: 8px 20px;
 }
+
 .navbar li:hover {
   opacity: 0.7;
 }
@@ -63,19 +76,20 @@ body {
   color: white;
   font-size: 1.3rem;
 }
+
 .navbarbg {
-  padding: 8px 0;
-  background-color: hsl(20, 43%, 93%); 
-  text-align: left; 
+  padding: 7px 0;
+  background-color: hsl(20, 43%, 93%);
+  text-align: left;
 }
 
 .navbarbg ul {
-  display: inline-block; 
-  padding-left: 0; 
+  display: inline-block;
+  padding-left: 0;
 }
 
 .navbarbg li {
-  display: inline-block; 
+  display: inline-block;
   list-style: none;
   margin: 0 10px;
 }
@@ -84,7 +98,7 @@ body {
   padding: 5px 10px;
   text-decoration: none;
   color: white;
-  font-size: 1.3rem;
+  font-size: 1rem;
 }
 
 .navbarbg li:hover {
diff --git a/Html-files/contact.html b/Html-files/contact.html
index b6a5bb2b..d1d7dbb3 100644
--- a/Html-files/contact.html
+++ b/Html-files/contact.html
@@ -1057,7 +1057,11 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
             });
         });
     </script>
+
+   
+
     <script src="cart.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index ca4caaca..5e410c2f 100644
--- a/index.html
+++ b/index.html
@@ -434,26 +434,29 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims
         
     </section>
 
-    <section class="service_container" style="background-color: hsl(20, 43%, 93%);">
-        <div class="service">
-            <div class="box_main">
-                <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Bringing happiness<br> to you</h1>
-                <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Order your favourite vintage collections!</p>
-            </div>
-            <div class="box">
-                <h1 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Online Delivery</h1><br>
-                <a href="./Html-files/menu.html" style="font-family: var(--ff-poppins);color: white;">Order Online</a>
-
-            </div>
-            <div class="box">
-                <h1 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Click & Collect</h1><br>
-                <a href="./Html-files/cart.html" style="font-family: var(--ff-poppins);color: white;">Take out Order</a>
+ <section class="service_container">
+    <div class="service">
+        <!-- Text Column - 60% Width -->
+        <div class="service_text column"><br>
+            <h1>Bringing happiness<br> to you</h1>
+            <p>Order your favourite vintage collections!</p>
+        </div>
 
+        <!-- Buttons Column - 40% Width -->
+        <div class="service_buttons column">
+            <div class="button_row">
+                <div class="box">
+                    <h2>Online Delivery</h2><br>
+                    <a href="./Html-files/menu.html" class="order_btn">Order Online</a>
+                </div>
+                <div class="box">
+                    <h2>Click & Collect</h2><br>
+                    <a href="./Html-files/cart.html" class="order_btn">Take out Order</a>
+                </div>
             </div>
-            
         </div>
-
-    </section>
+    </div>
+</section>
 
     <section class="menu_container">
         <div class="mainhead">
diff --git a/style.css b/style.css
index 78a252fa..6ff71c8d 100644
--- a/style.css
+++ b/style.css
@@ -119,7 +119,7 @@ body {
 }
 
 #about .box {
-  border: 2px solid brown;
+  border: 2px solid #000000;
   padding: 34px;
   margin: 2px 55px;
   border-radius: 28px;
@@ -161,10 +161,96 @@ body {
   text-align: center;
 }
 
+.service_container {
+        background-color: hsl(20, 43%, 93%);
+        padding: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+  border: 0.5px solid black;
+    }
+
+    .service {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        max-width: 1200px;
+        width: 100%;
+    }
+
+    .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    /* Text Column - 60% */
+    .service_text {
+        flex: 0 0 49%;
+        font-family: var(--ff-poppins);
+        color: hsl(203, 30%, 26%);
+    }
+
+    .service_text h1 {
+        font-family: var(--ff-philosopher);
+        font-size: 3rem;
+        line-height: 1.2;
+        margin-bottom: 15px;
+    }
+
+    .service_text p {
+        font-family: var(--ff-poppins);
+        font-size: 1.2rem;
+        color: hsl(208, 7%, 46%);
+        margin-bottom: 20px;
+    }
+
+    /* Buttons Column - 40% */
+    .service_buttons {
+        flex: 0 0 40%;
+    }
+
+    .button_row {
+        display: flex;
+        justify-content: space-between;
+      /*border: 1px solid black;*/
+        gap: 20px;
+    }
+
+    .box {
+        text-align: center;
+        flex: 1;
+    }
+
+    .box h2 {
+        font-family: var(--ff-philosopher);
+        color: hsl(357, 82%, 35%);
+        font-size: 1.5rem;
+        margin-bottom: 10px;
+    }
+
+    .order_btn {
+        font-family: var(--ff-poppins);
+        background-color: hsl(357, 82%, 35%);
+        color: white;
+        padding: 12px 30px;
+        font-size: 1rem;
+        text-decoration: none;
+        border-radius: 10px;
+        transition: background-color 0.3s ease;
+    }
+
+    .order_btn:hover {
+        background-color: hsl(357, 82%, 45%);
+    }
+    
+
+
+/*
 .service_container {
   display: flex;
   flex-direction: column;
-  /* padding: 3px 200px; */
+   padding: 3px 200px; 
   height: 550px;
   width: auto;
   justify-content: center;
@@ -172,6 +258,7 @@ body {
   color: white;
   background-color: transparent;
 }
+*/
 
 .service_container:before {
   background-color: transparent;
@@ -180,7 +267,6 @@ body {
 
   /*  
     height: 560px;
-    */
   height: 800px;
   width: 100%;
   /* justify-items: center; */
@@ -189,33 +275,44 @@ body {
   /* background-repeat: no-repeat; */
 }
 
+/*
 .service {
   display: flex;
   padding: 20px;
   box-sizing: fixed;
 }
+*/
 
+/*
 .service .box_main {
   padding-left: 20px;
   padding-right: 40px;
 }
+*/
 
+/*
 .service .box_main h1 {
   font-size: 4.5rem;
   font-family: "Oswald", sans-serif;
 }
+*/
+/*
 
 .service .box_main p {
   font-family: "Oswald", sans-serif;
 }
+*/
+/*
 
 .service .box {
   padding: 140px 20px;
-  /* border:2px solid rgb(224, 224, 252); */
+   border:2px solid rgb(224, 224, 252); 
   text-align: center;
   font-size: 1.3rem;
 }
+*/
 
+/*
 .service .box a {
   text-decoration: none;
   background-color: brown;
@@ -226,7 +323,9 @@ body {
   color: white;
   transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
 }
+*/
 
+/*
 .service .box a:hover {
   background-color: #ffffff;
   color: brown !important;
@@ -234,6 +333,8 @@ body {
   transform: scale(1.01); 
   animation: bounce 0.5s;
 }
+*/
+
 
 @keyframes bounce {
   0%, 100% {
@@ -657,55 +758,22 @@ textarea {
 }
 
 /* responsiveness  */
+@media (max-width: 768px) {
+        .service {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .service_text, .service_buttons {
+            flex: 1 1 100%;
+        }
+
+        .button_row {
+            flex-direction: column;
+            gap: 20px;
+        }
+    }
 
-@media screen and (max-width: 1120px) {
-  #about {
-    /* margin: 34px; */
-    flex-direction: column-reverse;
-  }
-
-  .service {
-    flex-direction: column;
-    padding: 5px;
-    /* box-sizing: fixed; */
-  }
-
-  .service .box {
-    padding: 20px 20px;
-    /* border: 2px solid rgb(224, 224, 252); */
-    text-align: center;
-    font-size: 1.3rem;
-  }
-
-  .service_container {
-    height: fit-content;
-    /* height: 1000px; */
-  }
-
-  .service .box_main h1 {
-    font-size: 3.5rem;
-  }
-
-  .service_container:before {
-    /*  
-        height: 560px;
-        */
-    /* height: 800px; */
-    /* height: fit-content; */
-    background-size: cover;
-    width: 100%;
-    /* background-repeat: no-repeat; */
-    /* justify-items: center; */
-    opacity: 0.4;
-    z-index: -1;
-    /* background-repeat: no-repeat; */
-  }
-
-  .menu_items {
-    flex-direction: column;
-    align-items: center;
-  }
-}
 
 @media screen and (max-width: 780px) {
   .app_download {