diff --git a/index.html b/index.html
index 4e0c5a6..4a361c0 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,10 @@
     <title>Retro</title>
     
     
+    
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="/Css-files/navbarstyles.css">
     <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
@@ -30,23 +28,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="./style.css">
-
-    <style>
-
-
-
-        .faq-container {
-            margin-top: 50px;
-            margin-left: auto;
-            margin-right: auto;
-            background: transparent;/* Container background */
-            border-radius: 8px; /* Rounded corners */
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
-            padding: 20px; /* Padding inside the container */
-        }
-    </style>
-
+    <link rel="stylesheet" href="./style.css">
     <style>
         :root{
             --ff-philosopher: "Philosopher", sans-serif;
@@ -254,63 +236,8 @@
 .moon{
     transform-origin: 50% 100%;
 }
-
-#about {
-    display: flex;
-    flex-wrap: wrap; /* Allow boxes to wrap */
-    gap: 20px; /* Space between boxes */
-    justify-content: center; /* Center align items */
-}
-
-.box {
-    background-color:transparent; /* Optional for visual separation */
-    border-radius: 10px;
-    padding: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column; /* Stack content vertically */
-    align-items: center;
-    max-width: 350px; /* Maximum width of each card */
-    flex: 1 1 280px; /* Allow boxes to grow and shrink */
-    min-width: 300px; /* Minimum width for responsiveness */
-    min-height: 480px; /* Minimum height for the card */
-}
-
-.card-image {
-    width: auto; /* Set width to auto to allow centering */
-    height: auto; /* Maintain aspect ratio */
-    max-width: 100%; /* Ensure image does not exceed card width */
-    max-height: 200px; /* Limit the max height to prevent overflow */
-    object-fit: cover; /* Ensure the image covers the card area without distorting */
-    border-radius: 10px; /* Match border radius of the box */
-    margin: 0 auto; /* Center the image horizontally */
-}
-
-.box h2 {
-    margin-top: 10px;
-    text-align: center;
-}
-
-p {
-    text-align: center;
-    margin: 10px 0; /* Add some margin for spacing */
-}
-
-/* Additional responsive adjustments */
-@media (max-width: 600px) {
-    .box {
-        max-width: 100%; /* Allow full width on small screens */
-        min-height: auto; /* Allow height to adjust for smaller screens */
-    }
-
-    .card-image {
-        max-height: 150px; /* Adjust max height for smaller screens */
-    }
-}
-
-
-
 </style>
+
 </head>
 <body>
     <div class="circle-container">
@@ -338,114 +265,68 @@
     <div id="preloader">
         <div id="loader"></div>
     </div>
-
-    
     <!--Navbar Start-->
-    <nav class="navbar navbar-expand-lg fixed-top" id="top">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher); color: black;">
-                <b>Retro</b>
-            </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link" aria-current="page" href="#"
-                            style="color: black; font-family: var(--ff-philosopher);">Home</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/about.html"
-                            style="font-family: var(--ff-philosopher); color: black;">About Us</a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/menu.html"
-                            style="font-family: var(--ff-philosopher);color: black;">Collections</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/services.html"
-                            style="font-family: var(--ff-philosopher);color: black;">Services</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher); color: black">Contact Us</a>
-                    </li>
-                    
-                    <li class="nav-item">
-                    <a class="nav-link" href="#" style="font-family: var(--ff-philosopher); color: black;">More</a>
-                    </li>
-
-                </ul>
-
-                <div class="navbar-right">
-                    <ul class="navbar-nav">
-                        <li class="nav-item">
-                            <a class="nav-link" onclick="redirectLogin()"
-                                style="color: black; font-family: var(--ff-philosopher);">Login</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" onclick="redirectSignup()"
-                                style="color: black; font-family: var(--ff-philosopher);">Signup</a>
-                        </li>
-                        <li class="nav-item" style="list-style-type: none;">
-                            <a class="nav-link" href="Html-files/cart.html" style="color: black;"><i
-                                    class="fa-solid fa-cart-shopping"></i>Cart</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </nav>
-
-    <!--Navbar End-->
-
-<!--    <nav class="navbar navbar-expand-lg fixed-top" id="top">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="#"  style="font-family: var(--ff-philosopher);color: black;"><b>Retro</b></a>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link " aria-current="page" href="#" style="color: black;font-family: var(--ff-philosopher);">Home</a>
-                    </li>
-                    
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/about.html" style="font-family: var(--ff-philosopher);color: black;">About</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher);color: black;">Contact Us</a>
-                    </li>
--->
-                 <!-- Google Translate Element -->
-<!--                  <li class="nav-item">
-                        <div id="google_element" style="font-family: var(--ff-philosopher);color: black;" class="nav-link"></div>
-                   </li>
-                </ul>
-
-            </div>
-            <div class="d-flex p-2">
-                <li class="nav-item" style="list-style-type: none;font-family: var(--ff-philosopher);"><a class="nav-btn" onclick="redirectLogin()" style="color: black;">Login</a></li>&nbsp;&nbsp;
-                <li class="nav-item" style="list-style-type: none;font-family: var(--ff-philosopher);"><a class="nav-btn" onclick="redirectSignup()" style="color: black;">Sign Up</a></li>&nbsp;&nbsp;
-            </div>
-
-        </div>
-    </nav>
--->
-    <script src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
-<script>
-function loadGoogleTranslate() {
-new google.translate.TranslateElement({
-  pageLanguage: 'en'
-}, 'google_element');
-}
-</script>
+    <header id="header">
+        <a href="#" class="logo" style="color: black; font-family: var(--ff-philosopher);">Retro</a>
+        <ul>
+            <li><a class="nav-link" aria-current="page" href="#" style="color: black; font-family: var(--ff-philosopher);">Home</a></li>
+            <li><a class="nav-link" href="Html-files/menu.html" style="font-family: var(--ff-philosopher); color: black;">About</a></li>
+            <li><a class="nav-link" href="Html-files/services.html" style="font-family: var(--ff-philosopher); color: black;">Services</a></li>
+            <li><a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher); color: black;">Contact Us</a></li>
+            <li class="nav-item" style="font-family: var(--ff-philosopher);"><a class="nav-link" onclick="redirectLogin()" style="color: black;">Login</a></li>
+            <li class="nav-item" style="font-family: var(--ff-philosopher);"><a class="nav-link" onclick="redirectSignup()" style="color: black;">Sign Up</a></li>
+            <li class="nav-item">
+                <a class="nav-link" href="Html-files/cart.html" style="color: black;"><i class="fa-solid fa-cart-shopping"></i></a>
+            </li>
+        </ul>
+       
+        <div class="toggle active" onclick="toggle()"></div>
+       
+        <button id="translate_button" title="Translate">
+            <i class="fa fa-globe"></i>
+        </button>
+        <div id="google_element"></div>
+    
+    </header>
+    <script src="//translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+    <script src="//translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+    <script>
+        function loadGoogleTranslate() {
+            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_element');
+        }
 
+        // Ensure the event listener for the translate button runs after the translation element is initialized
+        document.getElementById("translate_button").addEventListener("click", function() {
+            // Wait a moment for Google Translate to initialize
+            setTimeout(() => {
+                let select = document.querySelector("#google_element select");
+                
+                // Check if the translate select element exists
+                if (select) {
+                    // Toggle visibility using class
+                    select.classList.toggle('visible');
+                } else {
+                    console.warn('Google Translate select element not found');
+                }
+            }, 100); // Adjust the delay if needed
+        });
+    </script>
+      
+    <script>
+        window.addEventListener('scroll', function(){
+            var header =document.querySelector('header');
+            header.classList.toggle('sticky', window.scrollY > 0);
+        });
+        function toggle(){
+        var header =document.getElementById('header');
+        header.classList.toggle('active');
+
+    };
+    </script>
+    
     <section class="intro_container">
         <h1 style="font-family: var(--ff-philosopher);color: brown;z-index: 99;">Welcome to Retro!</h1>
-        <p style="font-family: cursive;z-index: 99;color: white;font-size: x-large;">Step back in time and experience the nostalgic charm of days gone by. 
+        <p style="font-family: var(--ff-poppins);z-index: 99;color: hsl(208, 7%,46%);">Step back in time and experience the nostalgic charm of days gone by. 
             Immerse yourself in the world of vintage tech, classic designs, and timeless memories. 
             Get ready to embark on a journey through the ages, where innovation meets tradition, and the past inspires the future.</p>
         <button class="btn" id="openButton" style="z-index: 99;">Order Now</button>
@@ -478,51 +359,47 @@ <h1 class="h-primary center" style="font-family: var(--ff-philosopher);font-size
         <!-- changes -->
         <div id="about">
             <div class="box">
-                <img src="Images/biryani.jpg" alt="Biryani" class="card-image">
+                <img src="https://tse3.mm.bing.net/th/id/OIG4.SIHan_hRN4UJPwUqG4XX?pid=ImgGn" style="height: 300px;border-radius: 10px;" alt="">
                 <h2 class="h-secondary center" style="font-family:var(--ff-philosopher);">60s-style florals</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">From aromatic curries to flavorful biryanis, our menu showcases the diversity and
                     deliciousness of Indian cuisine.
                 </p>
             </div>
             <div class="box">
-                <img src="Images/plate_mismatch.jpg" alt="Plate" class="card-image">
+                <img src="https://tse3.mm.bing.net/th/id/OIG4.z_1sqeDkCWDNKbz25AoQ?w=270&h=270&c=6&r=0&o=5&dpr=1.4&pid=ImgGn" alt="" style="border-radius: 10px;height: 350px;width: 350px;">
                 <h2 class="h-secondary center" style="font-family: var(--ff-philosopher)">60's Dinning Items</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">
                     Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.
                 </p>
             </div>
             <div class="box">
-                <img src="Images/candy.jpg" alt="Candy" class="card-image">
+                <img src="https://tse2.mm.bing.net/th/id/OIG2.CyOiP72VYq.3vQSimbbp?w=270&h=270&c=6&r=0&o=5&dpr=1.4&pid=ImgGn" alt="" style="border-radius: 10px;height: 200px;">
                 <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whimsical Nostalgia: The Stardust Bonbon</h2>
                 <p class="center" style="font-family: var(--ff-poppins);">The Stardust Bonbon, a sweet relic from an era when the universe was our playground.</p>
             </div>
         </div>
-        
     </section>
 
- <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>
+    <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>
 
-        <!-- 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>
-    </div>
-</section>
+
+    </section>
 
     <section class="menu_container">
         <div class="mainhead">
@@ -610,106 +487,13 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Juices
 
         </ul>
 
-
-              <!---------------------------------------------------- FAQ -->
-                   
-              <div class="container faq-container">
-                <h1 class="text-center mb-4">Frequently Asked Questions</h1>
-                <div class="accordion" id="faqAccordion">
-            
-                    <div class="accordion-item">
-                        <h2 class="accordion-header" id="headingOne">
-                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                What is your return policy?
-                            </button>
-                        </h2>
-                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
-                            <div class="accordion-body">
-                                Our return policy allows you to return items within 30 days of purchase.
-                            </div>
-                        </div>
-                    </div>
-            
-                    <div class="accordion-item">
-                        <h2 class="accordion-header" id="headingTwo">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                                How long does shipping take?
-                            </button>
-                        </h2>
-                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
-                            <div class="accordion-body">
-                                Shipping typically takes 5-7 business days, depending on your location.
-                            </div>
-                        </div>
-                    </div>
-            
-                    <div class="accordion-item">
-                        <h2 class="accordion-header" id="headingThree">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                                Do you ship internationally?
-                            </button>
-                        </h2>
-                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
-                            <div class="accordion-body">
-                                Yes, we offer international shipping to select countries.
-                            </div>
-                        </div>
-                    </div>
-            
-                    <div class="accordion-item">
-                        <h2 class="accordion-header" id="headingFour">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-                                Can I change my order after it's been placed?
-                            </button>
-                        </h2>
-                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
-                            <div class="accordion-body">
-                                If your order hasn't been processed yet, you can contact us to make changes.
-                            </div>
-                        </div>
-                    </div>
-            
-                    <div class="accordion-item">
-                        <h2 class="accordion-header" id="headingFive">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
-                                What payment methods do you accept?
-                            </button>
-                        </h2>
-                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
-                            <div class="accordion-body">
-                                We accept all major credit cards, PayPal, and bank transfers.
-                            </div>
-                        </div>
-                    </div>
-            
-                    <div class="accordion-item">
-                        <h2 class="accordion-header" id="headingSix">
-                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
-                                Do you offer discounts for bulk orders?
-                            </button>
-                        </h2>
-                        <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#faqAccordion">
-                            <div class="accordion-body">
-                                Yes, we provide discounts on bulk orders. Please contact our sales team for more details.
-                            </div>
-                        </div>
-                    </div>
-            
-                </div>
-            </div>
-
-
-            <br> <br>
-
-                         <!-- -------------------------------------------FAQ ENDED -->
-
     </section>
 
     <div class="app_download" style="background-color: hsl(20, 43%, 93%);">
         <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Free Delivery!</h4>
         <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
         <br>
-        <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);text-align:left;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
+        <p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
         <a href="https://play.google.com/store/games?device=windows"><img src="./Images/get_it_on_google_play_store.png" class="app-download-img"
                 alt="Get it on Google Play Store"></a>
         <a href="https://www.apple.com/in/app-store/"><img src="./Images/download-on-the-app-store.png" class="app-download-img"
@@ -721,7 +505,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
         <footer>
             <div class="foot-panel2" style="background-color:hsl(20, 43%, 93%);font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
+                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Our Pages</p>
                     <a href="#" style="color: black;">Home</a>
                     <a href="Html-files/menu.html" style="color: black;">About</a>
                     <a href="Html-files/services.html" style="color: black;">Services</a>
@@ -729,7 +513,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
                     <a href="Html-files/cart.html" style="color: black;">Cart</a>
                 </ul>
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
+                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);"> Exclusive Offers</p>
                     <a href="#" style="color: black;">Retro Discounts</a>
                     <a href="#" style="color: black;">Limited-Time Promotions</a>
                     <a href="#" style="color: black;">Special Event Packages</a>
@@ -740,7 +524,7 @@ <h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Downlo
 
                 </ul>
                 <ul>
-                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
+                    <p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);">Payment Products</p>
                     <a href="./Html-files/payment2.html" style="color: black;">Secure Checkout</a>
                     <a href="./Html-files/payment2.html" style="color: black;">Credit/Debit Cards</a>
                     <a href="./Html-files/payment2.html" style="color: black;">Online Payment</a>
@@ -752,9 +536,9 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
                     
                     <input type="email" id="email" name="email" placeholder="Your Email" required>
 
-                    <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+                    <textarea id="message" name="message" placeholder="Your Message" required style="font-family: Garamond;"></textarea>
 
-                    <button id="butt" type="submit" style="font-family: ui-serif;">Send Message</button>
+                    <button id="butt" type="submit" style="font-family: Garamond;">Send Message</button>
                 </form>
 
             </div>
@@ -764,12 +548,12 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);font-fami
                 <div class="pages">
                     <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow Us</h4>
 
-                    <div class="social-icons">
+                    <div class="social-icons" style="background-color: hsl(20, 43%, 93%);">
 
 
-                        <a class="fa-brands fa-facebook" href="https://facebook.com" ></a>
-                        <a class="fa-brands fa-instagram" href="https://instagram.com" ></a>
-                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" ></a>
+                        <a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 30%, 26%);"></a>
+                        <a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 30%, 26%);"></a>
+                        <a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 30%, 26%);"></a>
 
                     </div>
                     <p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
@@ -790,7 +574,7 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
                     </div>
                 </div>
         </footer>
-        <button onclick="window.print()" style="font-family:Georgia; font-size:medium; line-height: inherit;border-radius:5px ;background-color: #f9e2c4;padding:5px 5px;">Print this page</button>
+        <button onclick="window.print()">Print this page</button>
     </div>
 </body>
 <script>
diff --git a/style.css b/style.css
index eb7d5eb..03e291f 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,11 @@
 * {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
 .poppins-light {
@@ -9,48 +14,245 @@
   font-style: normal;
 }
 
-
 body {
   background-color: black;
 }
-/*
-.navbar {
-  padding: fixed;
+header {
+  position: fixed;
   top: 0;
+  left: 0;
   width: 100%;
-  z-index: 1030;
-  padding: 15px 0;
-  /*background-color: rgba(245, 245, 245, 0.7);
-  backdrop-filter: blur(8px);
-  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center; /* Vertically aligns items */
+  padding: 10px 20px; /* Simplified for even padding */
+  transition: 0.6s;
+  z-index: 1000;
+  
 }
-*/
 
-.navbar a {
+header.sticky {
+  padding: 5px 80px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.25);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(20px);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px; /* Corrected this radius */
+}
+
+header .logo {
+  font-weight: 700;
   text-decoration: none;
-  color: #333;
-  font-size: 1.3rem;
-  transition: color 0.3s ease,border-bottom 0.3s ease;
+  font-size: 1.3em;
+  letter-spacing: 1px;
+  transition: 0.6s;
 }
 
-/* Navbar link hover effect */
-/*.navbar a:hover{
-  color: #fff;
-  border-bottom: 1px solid #fff;
+header ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px; /* Increased gap for better spacing */
+  flex-wrap: nowrap; /* Prevent wrapping to the next line */
 }
-*/
 
-.navbar.fixed-top {
-  position: fixed; 
-  top: 0;
-  width: 100%; 
-  z-index: 1030; 
+header ul li {
+  display: inline-block; /* Ensures list items remain inline */
+  padding: 0 15px; /* Adjust padding for nav items */
+  white-space: nowrap;
+}
+header ul .nav-item {
+  font-weight: 400;
+}
+header ul .nav-link{
+  padding-top: 13px;;
+}
+
+header a {
+  margin: 0 15px;
+  letter-spacing: 1px;
+  color: black;
+  font-family: var(--ff-philosopher);
+  text-decoration: none;
+  font-size: 1em;
+  font-weight: 400;
+  transition: color 0.3s, transform 0.3s;
 }
-.navbar.scrolled {
-  background-color: rgb(176, 63, 63); 
-  backdrop-filter: blur(15px);
+
+header a:hover {
   color: #fff;
 }
+
+header button#translate_button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #000;
+  padding: 5px;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  margin-left: auto; /* Aligns button to the right */
+  transition: color 0.3s, transform 0.3s;
+}
+
+header button#translate_button:hover {
+  color: #050505;
+  transform: scale(1.1);
+}
+
+#google_element select {
+  position: absolute;
+  right: 60px;
+  top: 60px;
+  background-color: white;
+  color: black;
+  border: 1px solid black;
+  display: none;
+  z-index: 1000;
+  padding: 5px;
+  font-family: 'Poppins', sans-serif;
+  font-size: 14px;
+}
+
+header ul li a .fa-cart-shopping {
+  font-size: 1rem;
+  transition: color 0.3s;
+}
+
+header ul li a:hover .fa-cart-shopping {
+  color: #020202;
+}
+
+/* Responsive Media Query */
+@media (max-width: 992px) {
+  header ul {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start; /* Align items to the left */
+  }
+
+  header ul li {
+    margin-bottom: 10px;
+  }
+  
+  header button#translate_button {
+    margin-left: 0;
+    font-size: 18px;
+  }
+
+  #google_element select {
+    right: 10px;
+    top: 50px;
+    display: none;
+  }
+  .visible{
+    display: block;
+  }
+}
+
+@media(max-width: 992px){
+  .toggle{
+    display: block;
+    position: relative;
+    width: 30px;
+    height: 30px;
+  }
+  .toggle::before{
+    content: '';
+    position: absolute;
+    top: 4px;
+    width: 100%;
+    height: 2px;
+    background:#000000;
+    z-index: 1;
+    box-shadow: 0 10px 0 #000000;
+    transition: 0.5s;
+  }
+  .toggle::after{
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    width: 100%;
+    height: 2px;
+    background:#070707;
+    z-index: 1;
+    transition: 0.5s;
+  }
+  header.active .toggle::before{
+    top: 14px;
+    transform: rotate(45deg);
+    box-shadow: 0 0 0 #fff;
+  }
+  header.active .toggle::after{
+    top: 14px;
+    transform: rotate(-45deg);
+  
+  }
+  header ul{
+    position: absolute;
+    top: 59px;
+    left: 110px;
+    width: 100%;
+    height: calc(100vh);
+    padding: 50px 100px;
+    opacity: 0;
+    transition: 0.5s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 10px;
+    
+  }
+  header.active ul{
+    left:0%;
+    background: #fff;
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s ease;
+  }
+  header.active ul li a{
+    margin: 5px 0;
+    font-size: 24px;
+    color:#000;
+  }
+  header ul .nav-link {
+    font-size: 0.9em; /* Standard readable font size */
+    padding: 0 8px;
+  }
+  
+  header,
+  header.sticky{
+    padding: 5px 50px;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  background: rgba(255,255,255,0.25);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(20px);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  }
+  header.active ul li a{
+    color: #000;
+  }
+}
+@media (max-width: 768px) {
+  header ul{
+    justify-content: flex-start;
+  }
+  header ul .nav-link {
+    font-size: 0.8em; /* Adjust font size for smaller screens */
+    padding: 0 5px; /* Adjust padding as needed */
+  }
+}
+
+@media (max-width: 480px) {
+  header ul .nav-link {
+    font-size: 0.7em; /* Further adjustment for very small screens */
+  }
+}
+
+
 .intro_container {
   display: flex;
   flex-direction: column;
@@ -121,7 +323,7 @@ body {
 }
 
 #about .box {
-  border: 2px solid #000000;
+  border: 2px solid brown;
   padding: 34px;
   margin: 2px 55px;
   border-radius: 28px;
@@ -163,96 +365,10 @@ 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;
@@ -260,7 +376,6 @@ body {
   color: white;
   background-color: transparent;
 }
-*/
 
 .service_container:before {
   background-color: transparent;
@@ -269,6 +384,7 @@ body {
 
   /*  
     height: 560px;
+    */
   height: 800px;
   width: 100%;
   /* justify-items: center; */
@@ -277,44 +393,33 @@ 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;
@@ -325,9 +430,7 @@ 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;
@@ -335,8 +438,6 @@ body {
   transform: scale(1.01); 
   animation: bounce 0.5s;
 }
-*/
-
 
 @keyframes bounce {
   0%, 100% {
@@ -615,7 +716,6 @@ ul a {
     justify-content: center;
 } */
 
-
 .foot_panel4 {
   background-color: rgb(66, 16, 16);
   color: white;
@@ -672,63 +772,24 @@ textarea {
   padding: 8px;
   margin: 15px;
   text-decoration: none;
-  color: brown !important;
+  color: white;
 }
 
 .social-icons a:hover {
   color: brown;
-  background-color: hsl(22, 76%, 85%);
-  border-radius: 10px;
-  transform: scale(1.5); /* Increase size */
-  transition: transform 0.3s ease; /* Smooth transition effect */
-}
-.fa-brands.fa-facebook:hover {
-  color: #3B5998 !important;
-}
-
-.fa-brands.fa-instagram:hover {
-  color: #D62976 !important;
-}
-
-.fa-brands.fa-x-twitter:hover {
-  color: #181e20 !important;
-  /* color: white; */
-}
-
-.social-icons a:hover {
-  /* color: brown; */
-  /* background-color: hsl(20, 43%, 93%); */
+  background-color: hsl(20, 43%, 93%);
   border-radius: 50px;
 }
-
-.fa-facebook{
-  color: hsl(203, 30%, 26%);
-}
-
 .fa-facebook:hover {
-  
-  transform: scale(1.5);
   color:#3B5998;
-  transition: transform 0.2s ease, color 0.2s ease;
 }
 
-.fa-instagram{
-  color: hsl(203, 30%, 26%);
-}
 .fa-instagram:hover {
-  transform: scale(1.5);
   color:#D62976;
-  transition: transform 0.2s ease, color 0.2s ease;
 }
-.fa-x-twitter{
-  color: hsl(203, 30%, 26%);
 
-}
-
-.fa-x-twitter:hover {
-  color:black;
-  transform: scale(1.5);
-  transition: transform 0.2s ease, color 0.2s ease;
+.fa-twitter:hover {
+  color:#00B6F1;
 }
 
 #author {
@@ -760,22 +821,55 @@ 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 {
@@ -1055,13 +1149,11 @@ padding-left:2px;
   margin: 5px;
   border-radius: 10px;
   border: none;
-  background-color: #f9e2c4;
 }
 
 #contactForm h3 {
   height: 30px;
   color: #141414;
-  font-size: calc(1.0rem + .6vw);
 }
 #contactForm textarea {
   height: 100px;
@@ -1076,5 +1168,4 @@ padding-left:2px;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 5px;
-  width: 60%;
-}
\ No newline at end of file
+}
