diff --git a/index.html b/index.html
index 90de85e..5b79d7b 100644
--- a/index.html
+++ b/index.html
@@ -3,21 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Responsive Navbar & Swiper Hero</title>
+    <title>BAUEN</title>
 
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    
-    <!-- 1. Include Swiper's CSS -->
+   
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
 
     <style>
-    /* Navbar transition */
+   
     .nav-menu {
         transition: max-height 0.5s ease-in-out;
     }
 
-    /* Custom animation for the text sliding up */
+    /* animation for the text sliding up */
     @keyframes slideInUp {
         from {
             opacity: 0;
@@ -29,12 +28,11 @@
         }
     }
 
-    /* Class to trigger the animation */
     .animate-slide-in-up {
         animation: slideInUp 0.8s ease-out forwards;
     }
 
-    /* Generic styling for ALL pagination dots */
+    /* ALL pagination dots */
     .swiper-pagination-bullet {
         width: 12px;
         height: 12px;
@@ -42,23 +40,18 @@
         opacity: 1;
     }
 
-    /* Generic styling for ALL ACTIVE pagination dots */
+    /*  ALL active pagination dots */
     .swiper-pagination-bullet-active {
-        background-color: rgb(177, 151, 119); /* Your brand gold color */
+        background-color: rgb(177, 151, 119); 
     }
 
-    /* ======================================================== */
-    /* NEW STYLES FOR THE PROJECTS AND NEWS SLIDER PAGINATION   */
-    /* ======================================================== */
+    
 
-    /* This targets the containers for the dots, not the dots themselves */
+    /* This targets the containers for the dots */
     .projects-pagination,
     .news-pagination {
-        /* Add space between the slider images and the dots */
-        margin-top: 3rem !important; /* 48px - adjust as you like */
         
-        /* Override Swiper's default absolute positioning to place the dots
-           in the normal document flow, below the slider content. */
+        margin-top: 3rem !important; 
         position: relative !important;
         bottom: auto !important;
     }
@@ -67,9 +60,9 @@
 </head>
 <body class="bg-[rgba(39,39,39,255)]">
 
-    <!-- =========== NAVBAR (from previous step) =========== -->
+    <!-- NAVBAR -->
     <nav x-data="{ isOpen: false }" class="relative bg-[rgba(39,39,39,255)] lg:bg-transparent z-20">
-        <!-- ... your navbar code ... -->
+    
         <div class="container mx-auto px-6 py-4 flex justify-between items-center">
             <a href="#" class="text-white"><img src="images/logo.png" alt="Your Logo" class="h-8"></a>
             <div class="hidden lg:flex items-center space-x-6 text-white"><a href="#" class="hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="hover:text-[rgb(177,151,119)]">About</a><a href="#" class="hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="hover:text-[rgb(177,151,119)]">Contact</a></div>
@@ -78,9 +71,8 @@
         <div :class="isOpen ? 'max-h-screen' : 'max-h-0'" class="nav-menu lg:hidden overflow-hidden absolute w-full bg-[rgba(39,39,39,255)]"><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Home</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">About</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Services</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Projects</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Pages</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Blog</a><a href="#" class="block py-3 px-4 text-sm text-white hover:text-[rgb(177,151,119)]">Contact</a></div>
     </nav>
 
-    <!-- =========== SWIPER HERO SECTION START =========== -->
+    <!-- SWIPER SECTION  -->
     <section class="relative -mt-20 h-screen min-h-[600px] lg:pl-40 w-full"> <!-- -mt-20 to pull it under the navbar -->
-        <!-- Swiper -->
         <div class="swiper hero-swiper h-full w-full">
             <div class="swiper-wrapper">
                 <!-- Slide 1 -->
@@ -116,21 +108,25 @@
                 
             </div>
             
-            <!-- Pagination (Circles) - Hidden on mobile, visible on large screens -->
+            <!-- Pagination  -->
             <div class="swiper-pagination hidden lg:block"></div>
         </div>
     </section>
-    <!-- =========== SWIPER HERO SECTION END =========== -->
 
-<!-- =========== ABOUT US SECTION START =========== -->
+
+
+
+
+
+
+<!--  ABOUT US  -->
 <section id="about-us" class="bg-[rgba(39,39,39,255)] py-16 lg:py-24">
     <div class="container mx-auto px-6">
-        <!-- Main grid for text and image -->
         <div class="flex flex-col lg:flex-row items-start gap-12 lg:gap-16">
 
-            <!-- Left Column: Text Content -->
+            <!-- left partText Content -->
             <div class="lg:w-1/2 pl-20">
-<!-- Wrapper Div with Flexbox -->
+<!-- Wrapper with Flexbox(diff color) -->
 <div class="flex items-baseline gap-x-2 mb-4">
     <h2 class="text-4xl font-semibold text-white">ABOUT</h2>
     <h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">BAUEN</h2>
@@ -149,14 +145,10 @@
                 </p>
             </div>
 
-            <!-- Right Column: Image and Office Box (Corrected) -->
+            <!-- Right Column image -->
 <div class="lg:w-1/2 w-full pl-20">
 
-    <!-- 
-      The Image Wrapper:
-      1. We add 'relative' here to create the positioning context.
-      2. The image and the box will both live inside this div.
-    -->
+    <!--the image and the box will both be inside this div. -->
     <div class="relative group overflow-hidden rounded-lg">
         <img src="images/about.jpg" alt="Modern building interior" class="w-full h-auto object-cover transform transition-transform duration-500 ease-in-out group-hover:scale-105">
 
@@ -171,36 +163,36 @@
         </div>
     </div>
 </section>
-<!-- =========== ABOUT US SECTION END =========== -->
 
-<!-- =========== OUR PROJECTS SECTION START =========== -->
+
+<!--  OUR PROJECTS -->
 <section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white">
     <div class="container mx-auto px-6">
 
-        <!-- Section Title: "Our PROJECTS" -->
+        
         <div class="flex items-baseline gap-x-2 mb-12">
             <h2 class="text-4xl font-semibold text-white">Our</h2>
             <h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">Projects</h2>
         </div>
 
-        <!-- Swiper container with relative positioning for pagination -->
+        <!-- Swiper  -->
         <div class="relative">
-            <!-- Swiper instance with a unique class 'projects-swiper' -->
+           
             <div class="swiper projects-swiper">
                 <div class="swiper-wrapper">
 
-                    <!-- SLIDE 1 (Contains two projects) -->
+                    <!-- SLIDE 1 2proj -->
                     <div class="swiper-slide">
                         <div class="grid grid-cols-2 md:grid-cols-2 gap-8">
                             <!-- Project 1 -->
                             <div class="project-card">
-                                <!-- Image with hover effects wrapper -->
+                               
                                 <div class="relative group overflow-hidden ">
                                     <img src="images/slider1.jpg" alt="Interior Design Project" class="w-full h-auto object-cover">
-                                    <!-- Dark overlay that appears on hover -->
+                                   
                                     <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300"></div>
                                     
-                                    <!-- Text Block Container (Title and Type) -->
+                                    <!-- Text  -->
                                     <div class="absolute bottom-8 left-8 transform group-hover:-translate-y-4 transition-transform duration-300">
                                         <h3 class="text-xl font-semibold text-white">Modern Villa, Toronto</h3>
                                         <p class="font-semibold text-lg text-[rgb(177,151,119)] mt-1">Residential</p>
@@ -211,7 +203,7 @@
                                         <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                                     </div>
                                 </div>
-                                <!-- The text under the image has been REMOVED from here -->
+                               
                             </div>
                             <!-- Project 2 -->
                             <div class="project-card">
@@ -230,7 +222,7 @@
                         </div>
                     </div>
 
-                    <!-- SLIDE 2 (Contains another two projects) -->
+                    <!-- SLIDE 2 also 2 proj -->
                     <div class="swiper-slide">
                         <div class="grid grid-cols-2 md:grid-cols-2 gap-8">
                             <!-- Project 3 -->
@@ -267,28 +259,27 @@
                 </div>
             </div>
 
-            <!-- Pagination (Dots) - REPLACED the navigation buttons -->
+            <!-- Pagination  -->
             <div class="swiper-pagination projects-pagination"></div>
         </div>
     </div>
 </section>
-<!-- =========== OUR PROJECTS SECTION END =========== -->
- <!-- =========== OUR SERVICES SECTION START =========== -->
+
+ <!-- OUR SERVICES  -->
 <section class="pl-20 bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white">
     <div class="container mx-auto px-6">
 
-        <!-- Section Title -->
         <h2 class=" text-4xl font-semibold mb-12">Our Services</h2>
 
-        <!-- Responsive Grid for the service cards -->
+        <!--Grid for the service cards -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 
-            <!-- Service Card 1: Architecture -->
+            <!-- Service Card 1 -->
             <div class="service-card group relative p-8 border border-gray-700  h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
-                <!-- Icon/Image -->
+               
                 <img src="images/icon1.png" alt="Architecture Icon" class="h-12 w-12 mb-6">
                 
-                <!-- Text Content -->
+              
                 <h3 class="font-semibold text-xl mb-2">Architecture</h3>
                 <p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
                     Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
@@ -300,12 +291,11 @@
                 </div>
             </div>
 
-            <!-- Service Card 2: Interior Design -->
+            <!-- Service Card 2-->
             <div class="service-card group relative p-8 border border-gray-700  h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
-                <!-- Icon/Image -->
+                
                 <img src="images/icon2.png" alt="Interior Design Icon" class="h-12 w-12 mb-6">
                 
-                <!-- Text Content -->
                 <h3 class="font-semibold text-xl mb-2">Interior Design</h3>
                 <p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
                     Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
@@ -317,12 +307,12 @@
                 </div>
             </div>
 
-            <!-- Service Card 3: Urban Design -->
+            <!-- Service Card 3 -->
             <div class="service-card group relative p-8 border border-gray-700  h-full transition-colors duration-300 hover:bg-[rgb(50,50,50)] ">
-                <!-- Icon/Image -->
+               
                 <img src="images/icon3.png" alt="Urban Design Icon" class="h-12 w-12 mb-6">
 
-                <!-- Text Content -->
+               
                 <h3 class="font-semibold text-xl mb-2">Urban Design</h3>
                 <p class="text-gray-400 group-hover:text-gray-900 transition-colors duration-300">
                     Architecture bibendum eros eget lacus the vulputate sit amet vehicuta nibhen ulicera in the vitae miss.
@@ -338,21 +328,20 @@
     </div>
 </section>
 
-<!-- =========== OUR SERVICES SECTION END =========== -->
- <!-- =========== CURRENT NEWS SECTION START =========== -->
+
+ <!-- CURRENT NEWS -->
 <section class="bg-[rgba(39,39,39,255)] py-16 lg:py-24 text-white pl-20">
     <div class="container mx-auto px-6">
 
-        <!-- Section Title: "Current NEWS" -->
         <div class="flex items-baseline  gap-x-3 mb-12">
             <h2 class="text-4xl font-semibold text-white">Current</h2>
             <h2 class="text-4xl font-semibold text-[rgb(177,151,119)]">News</h2>
         </div>
 
-        <!-- Swiper container with relative positioning for pagination -->
+        <!-- Swiper  -->
         <div class="relative">
-            <!-- Swiper instance with a unique class 'news-swiper' -->
-            <div class="swiper news-swiper pb-16"> <!-- Added pb-16 for space for the overlapping box -->
+        
+            <div class="swiper news-swiper pb-16"> 
                 <div class="swiper-wrapper">
 
                     <!-- SLIDE 1 (Contains two news items) -->
@@ -362,7 +351,7 @@
                             <div class="news-card relative group">
                                 <img src="images/slider1.jpg" alt="A modern building facade" class=" object-cover w-full h-full">
 
-                                <!-- Text Box (Half in, Half out) -->
+                                
                                 <div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center 
                                             -translate-x-1/2 translate-y-1/2
                                             bg-[rgba(39,39,39,255)] border border-gray-700 
@@ -377,7 +366,7 @@
                             <div class="news-card relative group">
                                 <img src="images/proj2.jpg" alt="An open-plan office interior" class=" object-cover w-full h-full">
 
-                                <!-- Text Box (Half in, Half out) -->
+                                <!-- Text  -->
                                 <div class="absolute bottom-0 left-1/2 w-11/12 p-6 text-center 
                                             -translate-x-1/2 translate-y-1/2
                                             bg-[rgba(39,39,39,255)] border border-gray-700 
@@ -416,21 +405,20 @@
                 </div>
             </div>
 
-            <!-- Pagination (Dots) -->
+            <!-- Pagination -->
             <div class="swiper-pagination news-pagination"></div>
         </div>
     </div>
 </section>
-<!-- =========== FULL-WIDTH PROMO VIDEO SECTION START =========== -->
+<!--VIDEO-->
 <section class="w-full bg-[rgba(39,39,39,1)] py-16 sm:py-24">
     <div class="container mx-auto px-6">
         
-        <!-- THIS IS THE DIV TO CHANGE -->
+        
         <div 
             class="relative w-full aspect-video bg-cover bg-center" 
             style="background-image: url('images/slider2.jpg');">
-            <!-- IMPORTANT: Change the path to your background image file -->
-            <!-- ADDED bg-cover, bg-center, and the inline style attribute -->
+            
 
             <!-- 1. YouTube Player Container (the iframe will be inserted here by JS) -->
             <div class="absolute inset-0 z-0">
@@ -447,18 +435,18 @@
                 <div class="relative z-10 h-full flex items-center justify-start">
                     <div class="pl-8 sm:pl-16 lg:pl-24 text-left">
                         
-                        <!-- Custom Play Button (Gold circle on all screen sizes) -->
+                        <!-- Play Button  -->
                         <button id="promo-video-play-btn" 
                             class="
                             flex items-center justify-center h-20 w-20 lg:h-24 lg:w-24 rounded-full
                             bg-[rgb(177,151,119)]
                             transition-all duration-300 transform hover:scale-105">
                             
-                            <!-- White Play Icon SVG -->
+                            <!--  Icon  -->
                             <svg class="w-8 h-8 lg:w-10 lg:h-10 text-white ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
                         </button>
 
-                        <!-- Text under the button -->
+                        
                         <p class="mt-4 text-white font-semibold">View Promo Video</p>
                     </div>
                 </div>
@@ -467,19 +455,13 @@
         </div>
     </div>
 </section>
-<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
-<!-- =========== FULL-WIDTH PROMO VIDEO SECTION END =========== -->
-<!-- =========== CURRENT NEWS SECTION END =========== -->
+
     <!-- 4. Include Swiper's JS -->
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
     <!-- 5. Initialize Swiper -->
       <script>
-    // ===================================
-    // YOUTUBE API SCRIPT (PART 1 - GLOBAL SETUP)
-    // This loads the YouTube API and defines the functions it will call.
-    // This part MUST be outside the 'DOMContentLoaded' event listener.
-    // ===================================
+    
     const tag = document.createElement('script');
     tag.src = "https://www.youtube.com/iframe_api";
     const firstScriptTag = document.getElementsByTagName('script')[0];
@@ -487,8 +469,8 @@
 
     let player; // This creates the 'player' variable so the whole script can access it.
     
-    // --- IMPORTANT: REPLACE THIS ID WITH YOUR YOUTUBE VIDEO ID ---
-    const YOUTUBE_VIDEO_ID = ''; 
+    // --- YOUTUBE VIDEO ID ---
+    const YOUTUBE_VIDEO_ID = '6L6b9p_q3vA'; 
 
     // This special function is called automatically by the YouTube API when it's ready.
     // This is where the 'player' variable gets its value.
@@ -498,13 +480,13 @@
             width: '100%',
             videoId: YOUTUBE_VIDEO_ID,
             playerVars: {
-                'autoplay': 1,       // Autoplay the video
-                'mute': 1,           // Mute it (required for autoplay)
-                'controls': 0,       // Hide the default YouTube controls
-                'showinfo': 0,       // Hide video title
-                'rel': 0,            // Do not show related videos
-                'loop': 1,           // Loop the video
-                'playlist': YOUTUBE_VIDEO_ID, // Required for loop to work
+                'autoplay': 1,       
+                'mute': 1,           
+                'controls': 0,       
+                'showinfo': 0,       
+                'rel': 0,           
+                'loop': 1,          
+                'playlist': YOUTUBE_VIDEO_ID, 
                 'playsinline': 1     // Important for mobile browsers
             },
             events: {
@@ -527,12 +509,12 @@
         }
     }
 
-    // ===================================
-    // MAIN SCRIPT (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS)
-    // ===================================
+   
+    // (INITIALIZES SWIPERS & BUTTONS AFTER PAGE LOADS)
+ 
     document.addEventListener('DOMContentLoaded', function () {
         
-        // 1. INITIALIZE THE HERO SLIDER
+        // 1. INITIALIZE THE SLIDER
         const heroSwiper = new Swiper('.hero-swiper', {
             direction: 'horizontal',
             loop: true,
@@ -586,9 +568,9 @@
             },
         });
 
-        // ===================================
-        // YOUTUBE API SCRIPT (PART 2 - EVENT LISTENER FOR THE BUTTON)
-        // ===================================
+        
+        // YOUTUBE API SCRIPT ( EVENT LISTENER FOR THE BUTTON)
+        
         const playButton = document.getElementById('promo-video-play-btn');
         if (playButton) {
             playButton.addEventListener('click', () => {
