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>Product Grid</title>
  <head>
<link rel="stylesheet" href="cssfolder/login.css"/>
</head>


  <section class="login-section">
    <div class="login-box">
      <h2>Login</h2>
      <form action="login.php" method="post">
        <label for="email">Enter Username</label>
        <input type="text" id="email" name="name" required>

        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>

        <button type="submit">Login</button>
      </form>
      <div class="footer-text">
        Don't have an account? <a href="#">Register here</a>
      </div>
    </div>
  </section>
</body>
</html>