We are connected
  <style>
/* Header */
header {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #007bff;
}

nav {
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
  padding: 0.5rem 0.75rem;
  /* Add position relative for pseudo-element positioning */
  position: relative;
  overflow: hidden; /* Hide the pseudo-element until it's ready to animate */
  z-index: 1; /* Ensure link text is above the pseudo-element */
}

nav a:hover {
  color: #007bff; /* Still change text color on hover for desktop */
}

/* Pseudo-element for the right-to-left fill effect on desktop */
nav a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0; /* Start from the right */
  width: 0; /* Start with zero width */
  height: 100%;
  background-color: #f0f0f0; /* Default hover background for desktop if desired */
  transition: width 0.3s ease-out; /* Smooth transition for width */
  z-index: -1; /* Place behind the text */
}

nav a:hover::before {
  width: 100%; /* Expand to full width on hover */
  left: 0; /* Ensure it expands from right to left */
}


/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  left: 0;
  min-width: 140px; /* reduced from 180px */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  flex-direction: column;
  z-index: 999;
  padding: 0.25rem 0; /* tighten top/bottom spacing */
}

.dropdown-menu li a {
  padding: 0.4rem 0.8rem; /* tighter padding inside items */
  display: block;
  font-size: 0.95rem; /* slightly smaller font */
  color: #333;
  white-space: nowrap;
  position: relative; /* Essential for dropdown link pseudo-element */
  overflow: hidden; /* Hide pseudo-element until ready */
  z-index: 1; /* Keep text above the hover effect */
}


.dropdown-menu li a:hover {
  /* This rule is now primarily handled by the ::before pseudo-element */
  color: #333; /* Maintain text color */
}

/* Pseudo-element for dropdown menu items (desktop) */
.dropdown-menu li a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0; /* Start from the right */
  width: 0; /* Start with zero width */
  height: 100%;
  background-color: #f0f0f0; /* Default hover background for desktop dropdown if desired */
  transition: width 0.3s ease-out;
  z-index: -1;
}

.dropdown-menu li a:hover::before {
  width: 100%; /* Expand to full width on hover */
  left: 0; /* Ensure it expands from right to left */
}


/* Show on hover for desktop */
.dropdown:hover .dropdown-menu {
  display: flex;
}

/* Hamburger */
.hamburger {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  nav {
    display: none;
    width: 100%;
  }

  nav.active {
    display: block;
    background: #fff;
    margin-top: 1rem;
  }

  nav ul {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
  }

  /* Adjust padding for better hover area in mobile */
  nav.active ul li a {
    padding: 0.75rem 1rem;
    display: block; /* Important for the full block hover effect */
    width: 100%; /* Ensure links take full width for the effect */
    box-sizing: border-box; /* Include padding in the width */
    color: #333; /* Default text color in mobile */
  }

  /* Reset desktop pseudo-element behavior for mobile links */
  nav.active ul li a::before {
    background-color: #ffc0cb; /* Pink background for mobile hover */
    left: unset; /* Remove left 0 from desktop */
    right: 0; /* Ensure start from right for mobile */
  }

  /* Mobile: Hover effect for main navigation links */
  nav.active ul li a:hover::before {
    width: 100%;
  }

  /* Mobile: Text color change on hover (if desired) */
  nav.active ul li a:hover {
    color: #333; /* Keep text color dark, or change to white if preferred */
  }


  /* Dropdown specific styles for mobile */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0; /* Remove top/bottom padding from desktop */
  }

  .dropdown-menu li a {
      padding-left: 2rem; /* Indent dropdown items for hierarchy */
  }

  /* Mobile: Reset desktop pseudo-element behavior for dropdown links */
  .dropdown.active .dropdown-menu li a::before {
    background-color: #ffc0cb; /* Pink background for mobile dropdown hover */
    left: unset;
    right: 0;
  }

  /* Mobile: Hover effect for dropdown links */
  .dropdown.active .dropdown-menu li a:hover::before {
    width: 100%;
  }

  /* Mobile: Text color change on hover for dropdown links (if desired) */
  .dropdown.active .dropdown-menu li a:hover {
    color: #333; /* Keep text color dark */
  }

  .dropdown:hover .dropdown-menu {
    display: none;
  }

  .dropdown.active .dropdown-menu {
    display: flex;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hamburger {
    display: block;
  }
}
  </style>

<header>
  <div class="container header">
    <div class="logo">ChezaBei</div>
    <div class="hamburger" id="hamburger">&#9776;</div>
    <nav id="nav-menu">
      <ul>
        <li><a href="index.php">Home</a></li>
        <li class="dropdown">
          <a href="#">Categories</a>
          <ul class="dropdown-menu">
            <li><a href="electronics.php">Electronics</a></li>
            <li><a href="clothing.php">Clothing</a></li>
            <li><a href="accessories.php">Accessories</a></li>
            <li><a href="kitchen.php">Home & Kitchen</a></li>
          </ul>
        </li>
        <li><a href="cart.php">Cart</a></li>
        <li><a href="contacts.php">Contact</a></li>
		<li><a href="#">Call: 0700673933</a></li>
        <li><a href="login.php">Login</a></li>
      </ul>
    </nav>
  </div>
</header>
<script>
  document.getElementById('hamburger').addEventListener('click', function () {
    document.getElementById('nav-menu').classList.toggle('active');
  });

  const dropdownLink = document.querySelector('.dropdown > a');
  dropdownLink.addEventListener('click', function (e) {
    if (window.innerWidth <= 768) {
      e.preventDefault(); // prevent default anchor behavior
      this.parentElement.classList.toggle('active');
    }
  });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>SmartShop | Home</title>
  <link rel="stylesheet" href="cssfolder/styles.css"/>
  
  <link rel="stylesheet" href="cssfolder/hero.css"/>
</head>
<body>





<section class="hero">
  <div class="container">
    <h1>Welcome to ChezaBei</h1>
    <p>Your one-stop online shop for everything you need</p>
    <a href="#" class="btn">Shop Now</a>
  </div>
</section>
<section class="categories container">
  <h2>Top Categories</h2>
  <div class="grid">
    <div class="card">
      <a href="electronics.php"><img src="img/electronics.png" alt="Electronics" /></a>
      <h3>Electronics</h3>
    </div>
    <div class="card">
      <a href="clothing.php"><img src="img/fashion.jpg" alt="Fashion" /><a/>
      <h3>Fashion</h3>
    </div>
    <div class="card">
      <a href="accessories.php"><img src="img/appliances.jpg" alt="Home Appliances" /><a/>
      <h3>Home Appliances</h3>
    </div>
  </div>
</section>


<section class="products container">
  <h2>Featured Products</h2>
  <div class="grid">
  
  
  
  
    
  
    <div class="card">
      <img src="img/phone.png" />
      <h3>Smartphone X100</h3>
      <p>Latest smartphone with great features</p>
	  <p>25000.00</p>
	  <a href="https://wa.me/254700673933?text=Hi%20I%20want%20to%20make%20an%20order" target="_blank">
  <button >
    Make Order via WhatsApp
  </button>
  </a>
      
    </div>
		
	
  </div>
  
</section>



<link rel="stylesheet" href="cssfolder/footer.css"/>
<footer>
  <div class="container">
    <p>&copy; 2025 SmartShop. All rights reserved.</p>
	<p>Developed and Maintained by <a href="https://codeclean.co.ke/">Codeclean</a></p>
  </div>
</footer><!--

<script>
  const hamburger = document.getElementById("hamburger");
  const navMenu = document.getElementById("nav-menu");

  hamburger.addEventListener("click", () => {
    navMenu.classList.toggle("active");
  });
</script>

</body>
</html>
-->