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>

<link rel="stylesheet" href="cssfolder/electronic.css"/>

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Grid</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
      font-family: 'Segoe UI', sans-serif;
      background: #f4f4f4;
      color: #333;
      line-height: 1.6;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin: 100px auto;
      max-width: 1200px;
      padding: 0 1rem;
    }

    .product-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .product-card img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .product-info {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .product-name {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: #333;
    }

    .product-description {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: auto;
    }

    .product-price {
      font-size: 1rem;
      color: #007bff;
      font-weight: bold;
      margin: 1rem 0 0.5rem;
    }

    .add-to-cart {
      background-color: #28a745;
      color: #fff;
      border: none;
      padding: 0.6rem;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.3s;
    }

    .add-to-cart:hover {
      background-color: #218838;
    }

    @media (max-width: 992px) {
      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .product-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .product-card img {
        height: auto;
      }
    }
  </style>
</head>
<body>

  <div class="product-grid">
    <!-- Product 1 -->
	
	
	 	
	
	
	
	
	
	
	
    <div class="product-card">
      <img src="img/phone.png" />
      <div class="product-info">
        <div class="product-name">Smartphone X100</div>
        <div class="product-description">Latest smartphone with great features</div>
        <div class="product-price">25000.00</div>
		<a href="https://wa.me/254700673933?text=Hi%20I%20want%20to%20make%20an%20order" target="_blank">
        <button class="add-to-cart">Make Order via WhatsApp</button>
  </a>
		 
      </div>
	 
    </div>
		
	
	
	
	
	
	
	
    <div class="product-card">
      <img src="img/electronics.png" />
      <div class="product-info">
        <div class="product-name">Tv</div>
        <div class="product-description">nice looking</div>
        <div class="product-price">1200.00</div>
		<a href="https://wa.me/254700673933?text=Hi%20I%20want%20to%20make%20an%20order" target="_blank">
        <button class="add-to-cart">Make Order via WhatsApp</button>
  </a>
		 
      </div>
	 
    </div>
		</div>



     
<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></body>
</html>