diff --git a/app.js b/app.js
index d5591aea..a40647c1 100644
--- a/app.js
+++ b/app.js
@@ -1,25 +1,161 @@
-const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
-const mobile_menu = document.querySelector('.header .nav-bar .nav-list ul');
-const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a');
-const header = document.querySelector('.header.container');
-
-hamburger.addEventListener('click', () => {
-	hamburger.classList.toggle('active');
-	mobile_menu.classList.toggle('active');
-});
-
-document.addEventListener('scroll', () => {
-	var scroll_position = window.scrollY;
-	if (scroll_position > 250) {
-		header.style.backgroundColor = '#29323c';
-	} else {
-		header.style.backgroundColor = 'transparent';
-	}
-});
-
-menu_item.forEach((item) => {
-	item.addEventListener('click', () => {
-		hamburger.classList.toggle('active');
-		mobile_menu.classList.toggle('active');
-	});
-});
+// Enhanced JavaScript with smooth scroll, scroll-spy active link, touch support and better performance
+
+(function () {
+  // DOM Elements
+  const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
+  const mobileMenu = document.querySelector('.header .nav-bar .nav-list ul');
+  const menuItems = document.querySelectorAll('.header .nav-bar .nav-list ul li a');
+  const header = document.querySelector('.header.container');
+  const sections = document.querySelectorAll('section');
+
+  // Helper: toggle hamburger + menu
+  function toggleMenu() {
+    if (!hamburger || !mobileMenu) return;
+    hamburger.classList.toggle('active');
+    mobileMenu.classList.toggle('active');
+    // Prevent body scroll when menu is open (improve UX)
+    document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
+  }
+
+  // Close menu when a link is clicked
+  function closeMenuOnLinkClick() {
+    if (mobileMenu && mobileMenu.classList.contains('active')) {
+      hamburger.classList.remove('active');
+      mobileMenu.classList.remove('active');
+      document.body.style.overflow = '';
+    }
+  }
+
+  // Event listeners for hamburger
+  if (hamburger) {
+    hamburger.addEventListener('click', toggleMenu);
+    // Accessibility: allow Enter key
+    hamburger.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        toggleMenu();
+      }
+    });
+  }
+
+  // Close menu on each menu item click (with smooth scroll offset)
+  menuItems.forEach(item => {
+    item.addEventListener('click', (e) => {
+      // Get target section id from href
+      const targetId = item.getAttribute('href');
+      if (targetId && targetId !== '#') {
+        e.preventDefault();
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+          // Smooth scroll with offset for fixed header
+          const offsetTop = targetElement.offsetTop - 70; // 70px offset for fixed header
+          window.scrollTo({
+            top: offsetTop,
+            behavior: 'smooth'
+          });
+          // Update URL without jumping (optional)
+          history.pushState(null, null, targetId);
+        }
+      }
+      closeMenuOnLinkClick();
+    });
+  });
+
+  // Scroll event: change header background + active nav link (scroll spy)
+  function handleScroll() {
+    // Change header background after scroll
+    if (header) {
+      const scrollPos = window.scrollY;
+      if (scrollPos > 80) {
+        header.style.backgroundColor = '#1e1e2a';
+        header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
+      } else {
+        header.style.backgroundColor = 'rgba(31, 30, 30, 0.24)';
+        header.style.boxShadow = 'none';
+      }
+    }
+
+    // Scroll spy: highlight active menu item based on visible section
+    let current = '';
+    const scrollPosition = window.scrollY + 150; // offset for better accuracy
+
+    sections.forEach(section => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.clientHeight;
+      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+        current = section.getAttribute('id');
+      }
+    });
+
+    menuItems.forEach(link => {
+      link.classList.remove('active');
+      const href = link.getAttribute('href').substring(1); // remove #
+      if (href === current) {
+        link.classList.add('active');
+        // optional: change style
+        link.style.color = '#e63946';
+      } else {
+        link.style.color = '';
+      }
+    });
+  }
+
+  // Throttle scroll event for performance
+  let ticking = false;
+  window.addEventListener('scroll', () => {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        handleScroll();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  });
+
+  // Run once on load
+  window.addEventListener('DOMContentLoaded', () => {
+    handleScroll();
+    // Fix initial active link if hash exists
+    if (window.location.hash) {
+      const target = document.querySelector(window.location.hash);
+      if (target) {
+        setTimeout(() => {
+          window.scrollTo({
+            top: target.offsetTop - 70,
+            behavior: 'smooth'
+          });
+        }, 100);
+      }
+    }
+  });
+
+  // Close mobile menu on window resize (if open)
+  window.addEventListener('resize', () => {
+    if (window.innerWidth > 1200 && mobileMenu && mobileMenu.classList.contains('active')) {
+      closeMenuOnLinkClick();
+    }
+  });
+
+  // Touch-friendly: close menu on tapping outside (for mobile)
+  document.addEventListener('click', (e) => {
+    if (mobileMenu && mobileMenu.classList.contains('active')) {
+      const isClickInsideMenu = mobileMenu.contains(e.target);
+      const isHamburger = hamburger && hamburger.contains(e.target);
+      if (!isClickInsideMenu && !isHamburger) {
+        closeMenuOnLinkClick();
+      }
+    }
+  });
+
+  // Prevent scroll chaining when menu is open on touch devices
+  if (mobileMenu) {
+    mobileMenu.addEventListener('touchmove', (e) => {
+      if (mobileMenu.classList.contains('active')) {
+        e.preventDefault();
+      }
+    }, { passive: false });
+  }
+
+  // Optional: add active class styling in CSS for current menu item
+  // we already set color inline, but you can also add class .active-link
+})();
\ No newline at end of file
diff --git a/index.html b/index.html
index 1a429961..91f3816f 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <link rel="stylesheet" href="style.css">
-  <title>My Website</title>
+  <title>Arfan | Creative Web Solutions</title>
 </head>
 
 <body>
@@ -19,12 +19,12 @@ <h1><span>S</span>haif <span>A</span>rfan</h1>
           </a>
         </div>
         <div class="nav-list">
-          <div class="hamburger">
+          <div class="hamburger" aria-label="menu" role="button" tabindex="0">
             <div class="bar"></div>
           </div>
           <ul>
             <li><a href="#hero" data-after="Home">Home</a></li>
-            <li><a href="#services" data-after="Service">Services</a></li>
+            <li><a href="#services" data-after="Services">Services</a></li>
             <li><a href="#projects" data-after="Projects">Projects</a></li>
             <li><a href="#about" data-after="About">About</a></li>
             <li><a href="#contact" data-after="Contact">Contact</a></li>
@@ -33,10 +33,8 @@ <h1><span>S</span>haif <span>A</span>rfan</h1>
       </div>
     </div>
   </section>
-  <!-- End Header -->
 
-
-  <!-- Hero Section  -->
+  <!-- Hero Section -->
   <section id="hero">
     <div class="hero container">
       <div>
@@ -47,46 +45,39 @@ <h1>Arfan <span></span></h1>
       </div>
     </div>
   </section>
-  <!-- End Hero Section  -->
 
-  <!-- Service Section -->
+  <!-- Services Section -->
   <section id="services">
     <div class="services container">
       <div class="service-top">
         <h1 class="section-title">Serv<span>i</span>ces</h1>
-        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum deleniti maiores pariatur assumenda quas
-          magni et, doloribus quod voluptate quasi molestiae magnam officiis dolorum, dolor provident atque molestias
-          voluptatum explicabo!</p>
+        <p>I craft modern, responsive web experiences with clean UI/UX. From concept to launch, I provide full-cycle web
+          solutions tailored to your brand.</p>
       </div>
       <div class="service-bottom">
         <div class="service-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="web design"></div>
           <h2>Web Design</h2>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
-            architecto placeat beatae tenetur officia quod</p>
+          <p>Pixel-perfect, mobile-first designs that engage users and reflect your identity.</p>
         </div>
         <div class="service-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
-          <h2>Web Design</h2>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
-            architecto placeat beatae tenetur officia quod</p>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="frontend"></div>
+          <h2>Frontend Dev</h2>
+          <p>Interactive, dynamic interfaces using HTML5, CSS3, JS. Performance optimized.</p>
         </div>
         <div class="service-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
-          <h2>Web Design</h2>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
-            architecto placeat beatae tenetur officia quod</p>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="responsive"></div>
+          <h2>Responsive UI</h2>
+          <p>Seamless experience across tablets, phones, and desktops. Fluid layouts.</p>
         </div>
         <div class="service-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
-          <h2>Web Design</h2>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis debitis rerum, magni voluptatem sed
-            architecto placeat beatae tenetur officia quod</p>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="performance"></div>
+          <h2>Web Performance</h2>
+          <p>Lightning-fast load times, optimized assets, clean code for better SEO.</p>
         </div>
       </div>
     </div>
   </section>
-  <!-- End Service Section -->
 
   <!-- Projects Section -->
   <section id="projects">
@@ -98,89 +89,63 @@ <h1 class="section-title">Recent <span>Projects</span></h1>
         <div class="project-item">
           <div class="project-info">
             <h1>Project 1</h1>
-            <h2>Coding is Love</h2>
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
-              rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
-              harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
-          </div>
-          <div class="project-img">
-            <img src="./img/img-1.png" alt="img">
+            <h2>E-Commerce Dashboard</h2>
+            <p>Modern admin panel with dynamic charts, product management, and real-time analytics.</p>
           </div>
+          <div class="project-img"><img src="./img/img-1.png" alt="project"></div>
         </div>
         <div class="project-item">
           <div class="project-info">
             <h1>Project 2</h1>
-            <h2>Coding is Love</h2>
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
-              rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
-              harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
-          </div>
-          <div class="project-img">
-            <img src="./img/img-1.png" alt="img">
+            <h2>Travel Blog Platform</h2>
+            <p>Interactive storytelling hub with smooth transitions, lazy loading, and immersive gallery.</p>
           </div>
+          <div class="project-img"><img src="./img/img-1.png" alt="project"></div>
         </div>
         <div class="project-item">
           <div class="project-info">
             <h1>Project 3</h1>
-            <h2>Coding is Love</h2>
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
-              rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
-              harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
-          </div>
-          <div class="project-img">
-            <img src="./img/img-1.png" alt="img">
+            <h2>Portfolio Generator</h2>
+            <p>Customizable portfolio template for creatives, with dark/light mode and filtering.</p>
           </div>
+          <div class="project-img"><img src="./img/img-1.png" alt="project"></div>
         </div>
         <div class="project-item">
           <div class="project-info">
             <h1>Project 4</h1>
-            <h2>Coding is Love</h2>
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
-              rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
-              harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
-          </div>
-          <div class="project-img">
-            <img src="./img/img-1.png" alt="img">
+            <h2>Restaurant Web App</h2>
+            <p>Online ordering system with reservation module, menu showcase, and location finder.</p>
           </div>
+          <div class="project-img"><img src="./img/img-1.png" alt="project"></div>
         </div>
         <div class="project-item">
           <div class="project-info">
             <h1>Project 5</h1>
-            <h2>Coding is Love</h2>
-            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, iusto cupiditate voluptatum impedit unde
-              rem ipsa distinctio illum quae mollitia ut, accusantium eius odio ducimus illo neque atque libero non sunt
-              harum? Ipsum repellat animi, fugit architecto voluptatum odit et!</p>
-          </div>
-          <div class="project-img">
-            <img src="./img/img-1.png" alt="img">
+            <h2>Fitness Tracker</h2>
+            <p>Workout log, progress charts, and goal tracking. Interactive UI with local storage.</p>
           </div>
+          <div class="project-img"><img src="./img/img-1.png" alt="project"></div>
         </div>
       </div>
     </div>
   </section>
-  <!-- End Projects Section -->
 
   <!-- About Section -->
   <section id="about">
     <div class="about container">
       <div class="col-left">
-        <div class="about-img">
-          <img src="./img/img-2.png" alt="img">
-        </div>
+        <div class="about-img"><img src="./img/img-2.png" alt="profile"></div>
       </div>
       <div class="col-right">
         <h1 class="section-title">About <span>me</span></h1>
-        <h2>Front End Developer</h2>
-        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, velit alias eius non illum beatae atque
-          repellat ratione qui veritatis repudiandae adipisci maiores. At inventore necessitatibus deserunt
-          exercitationem cumque earum omnis ipsum rem accusantium quis, quas quia, accusamus provident suscipit magni!
-          Expedita sint ad dolore, commodi labore nihil velit earum ducimus nulla quae nostrum fugit aut, deserunt
-          reprehenderit libero enim!</p>
+        <h2>Front End Developer & UI Specialist</h2>
+        <p>I'm Arfan, a passionate front-end developer with 5+ years of experience crafting engaging digital
+          experiences. I focus on clean code, modern design systems, and user-centric performance. Let's build something
+          amazing together.</p>
         <a href="#" class="cta">Download Resume</a>
       </div>
     </div>
   </section>
-  <!-- End About Section -->
 
   <!-- Contact Section -->
   <section id="contact">
@@ -190,32 +155,31 @@ <h1 class="section-title">Contact <span>info</span></h1>
       </div>
       <div class="contact-items">
         <div class="contact-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" /></div>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" alt="phone"></div>
           <div class="contact-info">
             <h1>Phone</h1>
-            <h2>+1 234 123 1234</h2>
-            <h2>+1 234 123 1234</h2>
+            <h2>+1 234 567 8901</h2>
+            <h2>+1 987 654 3210</h2>
           </div>
         </div>
         <div class="contact-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" /></div>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" alt="email"></div>
           <div class="contact-info">
             <h1>Email</h1>
-            <h2>info@gmail.com</h2>
-            <h2>abcd@gmail.com</h2>
+            <h2>arfan.dev@example.com</h2>
+            <h2>hello@arfanstudio.com</h2>
           </div>
         </div>
         <div class="contact-item">
-          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" /></div>
+          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" alt="address"></div>
           <div class="contact-info">
             <h1>Address</h1>
-            <h2>Fatikchhari, Chittagong, Bangladesh</h2>
+            <h2>Chittagong, Bangladesh — worldwide</h2>
           </div>
         </div>
       </div>
     </div>
   </section>
-  <!-- End Contact Section -->
 
   <!-- Footer -->
   <section id="footer">
@@ -225,24 +189,19 @@ <h1><span>S</span>haif <span>A</span>rfan</h1>
       </div>
       <h2>Your Complete Web Solution</h2>
       <div class="social-icon">
-        <div class="social-item">
-          <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/facebook-new.png" /></a>
-        </div>
-        <div class="social-item">
-          <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" /></a>
-        </div>
-        <div class="social-item">
-          <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png" /></a>
-        </div>
-        <div class="social-item">
-          <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a>
-        </div>
+        <div class="social-item"><a href="#"><img src="https://img.icons8.com/bubbles/100/000000/facebook-new.png"
+              alt="fb"></a></div>
+        <div class="social-item"><a href="#"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png"
+              alt="ig"></a></div>
+        <div class="social-item"><a href="#"><img src="https://img.icons8.com/bubbles/100/000000/x.png" alt="x"></a>
+        </div>
+        <div class="social-item"><a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png"
+              alt="behance"></a></div>
       </div>
-      <p>Copyright © 2020 Arfan. All rights reserved</p>
+      <p>Copyright © 2025 Arfan. All rights reserved</p>
     </div>
   </section>
-  <!-- End Footer -->
-  <script src="./app.js"></script>
+  <script src="app.js" defer></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 3f690465..528d87f7 100644
--- a/style.css
+++ b/style.css
@@ -1,703 +1,791 @@
-@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';
+@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap';
+
 * {
-	padding: 0;
-	margin: 0;
-	box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
+
 html {
-	font-size: 10px;
-	font-family: 'Montserrat', sans-serif;
-	scroll-behavior: smooth;
+  font-size: 10px;
+  font-family: 'Montserrat', sans-serif;
+  scroll-behavior: smooth;
 }
+
 a {
-	text-decoration: none;
+  text-decoration: none;
 }
+
 .container {
-	min-height: 100vh;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 img {
-	height: 100%;
-	width: 100%;
-	object-fit: cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
+
 p {
-	color: black;
-	font-size: 1.4rem;
-	margin-top: 5px;
-	line-height: 2.5rem;
-	font-weight: 300;
-	letter-spacing: 0.05rem;
+  color: #2c2c2c;
+  font-size: 1.4rem;
+  margin-top: 5px;
+  line-height: 2.5rem;
+  font-weight: 300;
+  letter-spacing: 0.05rem;
 }
+
 .section-title {
-	font-size: 4rem;
-	font-weight: 300;
-	color: black;
-	margin-bottom: 10px;
-	text-transform: uppercase;
-	letter-spacing: 0.2rem;
-	text-align: center;
+  font-size: 4rem;
+  font-weight: 300;
+  color: #1e1e2a;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.2rem;
+  text-align: center;
 }
+
 .section-title span {
-	color: crimson;
+  color: #e63946;
+  /* improved vibrant crimson */
 }
 
 .cta {
-	display: inline-block;
-	padding: 10px 30px;
-	color: white;
-	background-color: transparent;
-	border: 2px solid crimson;
-	font-size: 2rem;
-	text-transform: uppercase;
-	letter-spacing: 0.1rem;
-	margin-top: 30px;
-	transition: 0.3s ease;
-	transition-property: background-color, color;
+  display: inline-block;
+  padding: 10px 30px;
+  color: white;
+  background-color: transparent;
+  border: 2px solid #e63946;
+  font-size: 2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1rem;
+  margin-top: 30px;
+  transition: 0.3s ease;
+  transition-property: background-color, color, transform;
+  border-radius: 4px;
 }
+
 .cta:hover {
-	color: white;
-	background-color: crimson;
+  color: white;
+  background-color: #e63946;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(230, 57, 70, 0.3);
 }
+
 .brand h1 {
-	font-size: 3rem;
-	text-transform: uppercase;
-	color: white;
+  font-size: 3rem;
+  text-transform: uppercase;
+  color: white;
 }
+
 .brand h1 span {
-	color: crimson;
+  color: #e63946;
 }
 
 /* Header section */
 #header {
-	position: fixed;
-	z-index: 1000;
-	left: 0;
-	top: 0;
-	width: 100vw;
-	height: auto;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: auto;
 }
+
 #header .header {
-	min-height: 8vh;
-	background-color: rgba(31, 30, 30, 0.24);
-	transition: 0.3s ease background-color;
+  min-height: 8vh;
+  background-color: rgba(31, 30, 30, 0.24);
+  transition: 0.3s ease background-color;
 }
+
 #header .nav-bar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	height: 100%;
-	max-width: 1300px;
-	padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  max-width: 1300px;
+  padding: 0 10px;
 }
+
 #header .nav-list ul {
-	list-style: none;
-	position: absolute;
-	background-color: rgb(31, 30, 30);
-	width: 100vw;
-	height: 100vh;
-	left: 100%;
-	top: 0;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	z-index: 1;
-	overflow-x: hidden;
-	transition: 0.5s ease left;
+  list-style: none;
+  position: absolute;
+  background-color: #1e1e2a;
+  width: 100vw;
+  height: 100vh;
+  left: 100%;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+  overflow-x: hidden;
+  transition: 0.5s ease left;
 }
+
 #header .nav-list ul.active {
-	left: 0%;
+  left: 0%;
 }
+
 #header .nav-list ul a {
-	font-size: 2.5rem;
-	font-weight: 500;
-	letter-spacing: 0.2rem;
-	text-decoration: none;
-	color: white;
-	text-transform: uppercase;
-	padding: 20px;
-	display: block;
+  font-size: 2.5rem;
+  font-weight: 500;
+  letter-spacing: 0.2rem;
+  text-decoration: none;
+  color: white;
+  text-transform: uppercase;
+  padding: 20px;
+  display: block;
 }
+
 #header .nav-list ul a::after {
-	content: attr(data-after);
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%) scale(0);
-	color: rgba(240, 248, 255, 0.021);
-	font-size: 13rem;
-	letter-spacing: 50px;
-	z-index: -1;
-	transition: 0.3s ease letter-spacing;
+  content: attr(data-after);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  color: rgba(240, 248, 255, 0.03);
+  font-size: 13rem;
+  letter-spacing: 50px;
+  z-index: -1;
+  transition: 0.3s ease letter-spacing;
 }
+
 #header .nav-list ul li:hover a::after {
-	transform: translate(-50%, -50%) scale(1);
-	letter-spacing: initial;
+  transform: translate(-50%, -50%) scale(1);
+  letter-spacing: initial;
 }
+
 #header .nav-list ul li:hover a {
-	color: crimson;
+  color: #e63946;
 }
+
 #header .hamburger {
-	height: 60px;
-	width: 60px;
-	display: inline-block;
-	border: 3px solid white;
-	border-radius: 50%;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 100;
-	cursor: pointer;
-	transform: scale(0.8);
-	margin-right: 20px;
+  height: 60px;
+  width: 60px;
+  display: inline-block;
+  border: 3px solid white;
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  cursor: pointer;
+  transform: scale(0.8);
+  margin-right: 20px;
 }
+
 #header .hamburger:after {
-	position: absolute;
-	content: '';
-	height: 100%;
-	width: 100%;
-	border-radius: 50%;
-	border: 3px solid white;
-	animation: hamburger_puls 1s ease infinite;
+  position: absolute;
+  content: '';
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  border: 3px solid white;
+  animation: hamburger_puls 1s ease infinite;
 }
+
 #header .hamburger .bar {
-	height: 2px;
-	width: 30px;
-	position: relative;
-	background-color: white;
-	z-index: -1;
+  height: 2px;
+  width: 30px;
+  position: relative;
+  background-color: white;
+  z-index: -1;
 }
+
 #header .hamburger .bar::after,
 #header .hamburger .bar::before {
-	content: '';
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	left: 0;
-	background-color: white;
-	transition: 0.3s ease;
-	transition-property: top, bottom;
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  background-color: white;
+  transition: 0.3s ease;
 }
+
 #header .hamburger .bar::after {
-	top: 8px;
+  top: 8px;
 }
+
 #header .hamburger .bar::before {
-	bottom: 8px;
+  bottom: 8px;
 }
+
 #header .hamburger.active .bar::before {
-	bottom: 0;
+  bottom: 0;
 }
+
 #header .hamburger.active .bar::after {
-	top: 0;
+  top: 0;
 }
-/* End Header section */
 
 /* Hero Section */
 #hero {
-	background-image: url(./img/hero-bg.png);
-	background-size: cover;
-	background-position: top center;
-	position: relative;
-	z-index: 1;
+  background-image: url(./img/hero-bg.png);
+  background-size: cover;
+  background-position: top center;
+  position: relative;
+  z-index: 1;
 }
+
 #hero::after {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 100%;
-	width: 100%;
-	background-color: black;
-	opacity: 0.7;
-	z-index: -1;
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: #0f0f1a;
+  opacity: 0.75;
+  z-index: -1;
 }
+
 #hero .hero {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0 50px;
-	justify-content: flex-start;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 50px;
+  justify-content: flex-start;
 }
+
 #hero h1 {
-	display: block;
-	width: fit-content;
-	font-size: 4rem;
-	position: relative;
-	color: transparent;
-	animation: text_reveal 0.5s ease forwards;
-	animation-delay: 1s;
+  display: block;
+  width: fit-content;
+  font-size: 4rem;
+  position: relative;
+  color: transparent;
+  animation: text_reveal 0.5s ease forwards;
+  animation-delay: 1s;
 }
+
 #hero h1:nth-child(1) {
-	animation-delay: 1s;
+  animation-delay: 1s;
 }
+
 #hero h1:nth-child(2) {
-	animation-delay: 2s;
+  animation-delay: 2s;
 }
+
 #hero h1:nth-child(3) {
-	animation: text_reveal_name 0.5s ease forwards;
-	animation-delay: 3s;
+  animation: text_reveal_name 0.5s ease forwards;
+  animation-delay: 3s;
 }
+
 #hero h1 span {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 0;
-	background-color: crimson;
-	animation: text_reveal_box 1s ease;
-	animation-delay: 0.5s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  background-color: #e63946;
+  animation: text_reveal_box 1s ease;
+  animation-delay: 0.5s;
 }
+
 #hero h1:nth-child(1) span {
-	animation-delay: 0.5s;
+  animation-delay: 0.5s;
 }
+
 #hero h1:nth-child(2) span {
-	animation-delay: 1.5s;
+  animation-delay: 1.5s;
 }
+
 #hero h1:nth-child(3) span {
-	animation-delay: 2.5s;
+  animation-delay: 2.5s;
 }
 
-/* End Hero Section */
-
 /* Services Section */
 #services .services {
-	flex-direction: column;
-	text-align: center;
-	max-width: 1500px;
-	margin: 0 auto;
-	padding: 100px 0;
+  flex-direction: column;
+  text-align: center;
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 100px 0;
 }
+
 #services .service-top {
-	max-width: 500px;
-	margin: 0 auto;
+  max-width: 500px;
+  margin: 0 auto;
 }
+
 #services .service-bottom {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-wrap: wrap;
-	margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 50px;
 }
+
 #services .service-item {
-	flex-basis: 80%;
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
-	flex-direction: column;
-	padding: 30px;
-	border-radius: 10px;
-	background-image: url(./img/img-1.png);
-	background-size: cover;
-	margin: 10px 5%;
-	position: relative;
-	z-index: 1;
-	overflow: hidden;
+  flex-basis: 80%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  padding: 30px;
+  border-radius: 10px;
+  background-image: url(./img/img-1.png);
+  background-size: cover;
+  margin: 10px 5%;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
 }
+
 #services .service-item::after {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 100%;
-	width: 100%;
-	background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
-	opacity: 0.9;
-	z-index: -1;
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(135deg, #1e2a3a 0%, #2c3e50 100%);
+  opacity: 0.92;
+  z-index: -1;
 }
+
 #services .service-bottom .icon {
-	height: 80px;
-	width: 80px;
-	margin-bottom: 20px;
+  height: 80px;
+  width: 80px;
+  margin-bottom: 20px;
 }
+
 #services .service-item h2 {
-	font-size: 2rem;
-	color: white;
-	margin-bottom: 10px;
-	text-transform: uppercase;
+  font-size: 2rem;
+  color: white;
+  margin-bottom: 10px;
+  text-transform: uppercase;
 }
+
 #services .service-item p {
-	color: white;
-	text-align: left;
+  color: #f0f0f0;
+  text-align: left;
 }
-/* End Services Section */
 
 /* Projects section */
 #projects .projects {
-	flex-direction: column;
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 100px 0;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 100px 0;
 }
+
 #projects .projects-header h1 {
-	margin-bottom: 50px;
+  margin-bottom: 50px;
 }
+
 #projects .all-projects {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
+
 #projects .project-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	width: 80%;
-	margin: 20px auto;
-	overflow: hidden;
-	border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 80%;
+  margin: 20px auto;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
+
 #projects .project-info {
-	padding: 30px;
-	flex-basis: 50%;
-	height: 100%;
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
-	flex-direction: column;
-	background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
-	color: white;
+  padding: 30px;
+  flex-basis: 50%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  background: linear-gradient(135deg, #1f2b38 0%, #2c3e4e 100%);
+  color: white;
 }
+
 #projects .project-info h1 {
-	font-size: 4rem;
-	font-weight: 500;
+  font-size: 4rem;
+  font-weight: 500;
 }
+
 #projects .project-info h2 {
-	font-size: 1.8rem;
-	font-weight: 500;
-	margin-top: 10px;
+  font-size: 1.8rem;
+  font-weight: 500;
+  margin-top: 10px;
 }
+
 #projects .project-info p {
-	color: white;
+  color: #f5f5f5;
 }
+
 #projects .project-img {
-	flex-basis: 50%;
-	height: 300px;
-	overflow: hidden;
-	position: relative;
+  flex-basis: 50%;
+  height: 300px;
+  overflow: hidden;
+  position: relative;
 }
+
 #projects .project-img:after {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 100%;
-	width: 100%;
-	background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
-	opacity: 0.7;
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(60deg, #1f2b38 0%, #2c3e4e 100%);
+  opacity: 0.5;
 }
+
 #projects .project-img img {
-	transition: 0.3s ease transform;
+  transition: 0.3s ease transform;
 }
+
 #projects .project-item:hover .project-img img {
-	transform: scale(1.1);
+  transform: scale(1.08);
 }
-/* End Projects section */
 
 /* About Section */
 #about .about {
-	flex-direction: column-reverse;
-	text-align: center;
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 100px 20px;
+  flex-direction: column-reverse;
+  text-align: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 100px 20px;
 }
+
 #about .col-left {
-	width: 250px;
-	height: 360px;
+  width: 250px;
+  height: 360px;
 }
+
 #about .col-right {
-	width: 100%;
+  width: 100%;
 }
+
 #about .col-right h2 {
-	font-size: 1.8rem;
-	font-weight: 500;
-	letter-spacing: 0.2rem;
-	margin-bottom: 10px;
+  font-size: 1.8rem;
+  font-weight: 500;
+  letter-spacing: 0.2rem;
+  margin-bottom: 10px;
+  color: #2c3e50;
 }
+
 #about .col-right p {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
+
 #about .col-right .cta {
-	color: black;
-	margin-bottom: 50px;
-	padding: 10px 20px;
-	font-size: 2rem;
+  color: #1e1e2a;
+  background-color: transparent;
+  border-color: #e63946;
 }
+
+#about .col-right .cta:hover {
+  color: white;
+  background-color: #e63946;
+}
+
 #about .col-left .about-img {
-	height: 100%;
-	width: 100%;
-	position: relative;
-	border: 10px solid white;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  border: 10px solid white;
+  border-radius: 8px;
+  overflow: hidden;
 }
+
 #about .col-left .about-img::after {
-	content: '';
-	position: absolute;
-	left: -33px;
-	top: 19px;
-	height: 98%;
-	width: 98%;
-	border: 7px solid crimson;
-	z-index: -1;
+  content: '';
+  position: absolute;
+  left: -33px;
+  top: 19px;
+  height: 98%;
+  width: 98%;
+  border: 7px solid #e63946;
+  z-index: -1;
+  border-radius: 8px;
 }
-/* End About Section */
 
 /* contact Section */
 #contact .contact {
-	flex-direction: column;
-	max-width: 1200px;
-	margin: 0 auto;
-	width: 90%;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 90%;
 }
+
 #contact .contact-items {
-	/* max-width: 400px; */
-	width: 100%;
+  width: 100%;
 }
+
 #contact .contact-item {
-	width: 80%;
-	padding: 20px;
-	text-align: center;
-	border-radius: 10px;
-	padding: 30px;
-	margin: 30px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-	box-shadow: 0px 0px 18px 0 #0000002c;
-	transition: 0.3s ease box-shadow;
+  width: 80%;
+  padding: 20px;
+  text-align: center;
+  border-radius: 12px;
+  padding: 30px;
+  margin: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
+  transition: 0.3s ease all;
+  background: #ffffff;
 }
+
 #contact .contact-item:hover {
-	box-shadow: 0px 0px 5px 0 #0000002c;
+  box-shadow: 0px 15px 35px rgba(230, 57, 70, 0.15);
+  transform: translateY(-3px);
 }
+
 #contact .icon {
-	width: 70px;
-	margin: 0 auto;
-	margin-bottom: 10px;
+  width: 70px;
+  margin: 0 auto;
+  margin-bottom: 10px;
 }
+
 #contact .contact-info h1 {
-	font-size: 2.5rem;
-	font-weight: 500;
-	margin-bottom: 5px;
+  font-size: 2.5rem;
+  font-weight: 500;
+  margin-bottom: 5px;
+  color: #e63946;
 }
+
 #contact .contact-info h2 {
-	font-size: 1.3rem;
-	line-height: 2rem;
-	font-weight: 500;
+  font-size: 1.3rem;
+  line-height: 2rem;
+  font-weight: 500;
+  color: #2c3e50;
 }
-/*End contact Section */
 
 /* Footer */
 #footer {
-	background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
+  background: linear-gradient(135deg, #1e2a36 0%, #2c3e50 100%);
 }
+
 #footer .footer {
-	min-height: 200px;
-	flex-direction: column;
-	padding-top: 50px;
-	padding-bottom: 10px;
+  min-height: 200px;
+  flex-direction: column;
+  padding-top: 50px;
+  padding-bottom: 10px;
 }
+
 #footer h2 {
-	color: white;
-	font-weight: 500;
-	font-size: 1.8rem;
-	letter-spacing: 0.1rem;
-	margin-top: 10px;
-	margin-bottom: 10px;
+  color: white;
+  font-weight: 500;
+  font-size: 1.8rem;
+  letter-spacing: 0.1rem;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
+
 #footer .social-icon {
-	display: flex;
-	margin-bottom: 30px;
+  display: flex;
+  margin-bottom: 30px;
 }
+
 #footer .social-item {
-	height: 50px;
-	width: 50px;
-	margin: 0 5px;
+  height: 50px;
+  width: 50px;
+  margin: 0 5px;
 }
+
 #footer .social-item img {
-	filter: grayscale(1);
-	transition: 0.3s ease filter;
+  filter: grayscale(0.2);
+  transition: 0.3s ease filter, transform 0.2s;
 }
+
 #footer .social-item:hover img {
-	filter: grayscale(0);
+  filter: grayscale(0);
+  transform: scale(1.1);
 }
+
 #footer p {
-	color: white;
-	font-size: 1.3rem;
+  color: #ddd;
+  font-size: 1.3rem;
 }
-/* End Footer */
 
 /* Keyframes */
 @keyframes hamburger_puls {
-	0% {
-		opacity: 1;
-		transform: scale(1);
-	}
-	100% {
-		opacity: 0;
-		transform: scale(1.4);
-	}
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.4);
+  }
 }
+
 @keyframes text_reveal_box {
-	50% {
-		width: 100%;
-		left: 0;
-	}
-	100% {
-		width: 0;
-		left: 100%;
-	}
+  50% {
+    width: 100%;
+    left: 0;
+  }
+
+  100% {
+    width: 0;
+    left: 100%;
+  }
 }
+
 @keyframes text_reveal {
-	100% {
-		color: white;
-	}
+  100% {
+    color: white;
+  }
 }
+
 @keyframes text_reveal_name {
-	100% {
-		color: crimson;
-		font-weight: 500;
-	}
+  100% {
+    color: #e63946;
+    font-weight: 500;
+  }
 }
-/* End Keyframes */
 
 /* Media Query For Tablet */
 @media only screen and (min-width: 768px) {
-	.cta {
-		font-size: 2.5rem;
-		padding: 20px 60px;
-	}
-	h1.section-title {
-		font-size: 6rem;
-	}
-
-	/* Hero */
-	#hero h1 {
-		font-size: 7rem;
-	}
-	/* End Hero */
-
-	/* Services Section */
-	#services .service-bottom .service-item {
-		flex-basis: 45%;
-		margin: 2.5%;
-	}
-	/* End Services Section */
-
-	/* Project */
-	#projects .project-item {
-		flex-direction: row;
-	}
-	#projects .project-item:nth-child(even) {
-		flex-direction: row-reverse;
-	}
-	#projects .project-item {
-		height: 400px;
-		margin: 0;
-		width: 100%;
-		border-radius: 0;
-	}
-	#projects .all-projects .project-info {
-		height: 100%;
-	}
-	#projects .all-projects .project-img {
-		height: 100%;
-	}
-	/* End Project */
-
-	/* About */
-	#about .about {
-		flex-direction: row;
-	}
-	#about .col-left {
-		width: 600px;
-		height: 400px;
-		padding-left: 60px;
-	}
-	#about .about .col-left .about-img::after {
-		left: -45px;
-		top: 34px;
-		height: 98%;
-		width: 98%;
-		border: 10px solid crimson;
-	}
-	#about .col-right {
-		text-align: left;
-		padding: 30px;
-	}
-	#about .col-right h1 {
-		text-align: left;
-	}
-	/* End About */
-
-	/* contact  */
-	#contact .contact {
-		flex-direction: column;
-		padding: 100px 0;
-		align-items: center;
-		justify-content: center;
-		min-width: 20vh;
-	}
-	#contact .contact-items {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-evenly;
-		margin: 0;
-	}
-	#contact .contact-item {
-		width: 30%;
-		margin: 0;
-		flex-direction: row;
-	}
-	#contact .contact-item .icon {
-		height: 100px;
-		width: 100px;
-	}
-	#contact .contact-item .icon img {
-		object-fit: contain;
-	}
-	#contact .contact-item .contact-info {
-		width: 100%;
-		text-align: left;
-		padding-left: 20px;
-	}
-	/* End contact  */
-}
-/* End Media Query For Tablet */
-
-/* Media Query For Desktop */
+  .cta {
+    font-size: 2.5rem;
+    padding: 20px 60px;
+  }
+
+  h1.section-title {
+    font-size: 6rem;
+  }
+
+  #hero h1 {
+    font-size: 7rem;
+  }
+
+  #services .service-bottom .service-item {
+    flex-basis: 45%;
+    margin: 2.5%;
+  }
+
+  #projects .project-item {
+    flex-direction: row;
+    height: 400px;
+    margin: 0;
+    width: 100%;
+    border-radius: 0;
+  }
+
+  #projects .project-item:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+
+  #projects .all-projects .project-info {
+    height: 100%;
+  }
+
+  #projects .all-projects .project-img {
+    height: 100%;
+  }
+
+  #about .about {
+    flex-direction: row;
+  }
+
+  #about .col-left {
+    width: 600px;
+    height: 400px;
+    padding-left: 60px;
+  }
+
+  #about .about .col-left .about-img::after {
+    left: -45px;
+    top: 34px;
+    height: 98%;
+    width: 98%;
+    border: 10px solid #e63946;
+  }
+
+  #about .col-right {
+    text-align: left;
+    padding: 30px;
+  }
+
+  #about .col-right h1 {
+    text-align: left;
+  }
+
+  #contact .contact {
+    flex-direction: column;
+    padding: 100px 0;
+    align-items: center;
+    justify-content: center;
+    min-width: 20vh;
+  }
+
+  #contact .contact-items {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin: 0;
+  }
+
+  #contact .contact-item {
+    width: 30%;
+    margin: 0;
+    flex-direction: row;
+  }
+
+  #contact .contact-item .icon {
+    height: 100px;
+    width: 100px;
+  }
+
+  #contact .contact-item .icon img {
+    object-fit: contain;
+  }
+
+  #contact .contact-item .contact-info {
+    width: 100%;
+    text-align: left;
+    padding-left: 20px;
+  }
+}
+
+/* Desktop */
 @media only screen and (min-width: 1200px) {
-	/* header */
-	#header .hamburger {
-		display: none;
-	}
-	#header .nav-list ul {
-		position: initial;
-		display: block;
-		height: auto;
-		width: fit-content;
-		background-color: transparent;
-	}
-	#header .nav-list ul li {
-		display: inline-block;
-	}
-	#header .nav-list ul li a {
-		font-size: 1.8rem;
-	}
-	#header .nav-list ul a:after {
-		display: none;
-	}
-	/* End header */
-
-	#services .service-bottom .service-item {
-		flex-basis: 22%;
-		margin: 1.5%;
-	}
-}
-/* End  Media Query For Desktop */
+  #header .hamburger {
+    display: none;
+  }
+
+  #header .nav-list ul {
+    position: initial;
+    display: block;
+    height: auto;
+    width: fit-content;
+    background-color: transparent;
+  }
+
+  #header .nav-list ul li {
+    display: inline-block;
+  }
+
+  #header .nav-list ul li a {
+    font-size: 1.8rem;
+  }
+
+  #header .nav-list ul a:after {
+    display: none;
+  }
+
+  #services .service-bottom .service-item {
+    flex-basis: 22%;
+    margin: 1.5%;
+  }
+}
\ No newline at end of file