<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Perfect Business Sysservices  - Shop</title>
    
    <link rel="stylesheet" href="mainCSS/shoppbs.css" />
    
     <link rel="icon" type="image/png" href="images2/logo1-768x600.jpg">

    <link rel="stylesheet" href="css/output.css">
    <script src="https://cdn.tailwindcss.com"></script>
    
      <style>

      :root {
          /* Your Company Colors */
          --primary-color: #7a1918;    /* Brand primary color */
          --secondary-color: #b38140;  /* Brand secondary color */
      
          /* Navbar Colors */
          --nav-bg: var(--primary-color);      /* Navbar background uses primary */
          --nav-text: #ffffff;                  /* White text on navbar */
          --hover-bg: var(--secondary-color);   /* Hover background uses secondary */
          --hover-text: #ffffff;                /* White text on hover */
          --border-color: #ffffff;              /* White border */
      
          --bg-color: #fff9eb;
          --soft-bg: #fdf9f2;
        }
      
      
        a.nav-link {
          position: relative;
          display: inline-block;
        }
        a.nav-link::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -2px;
          height: 2px;
          width: 0%;
          background: var(--secondary-color);
          transition: width 0.3s ease-in-out;
        }
        a.nav-link:hover::after {
          width: 100%;
        }
          /* Example custom style for angled stripes on the right side */
          .angled-stripes {
            background: linear-gradient(
              75deg,
              transparent 50%,
              #fff 50%,
              #fff 55%,
              transparent 55%
            );
            background-size: 50px 50px;
            background-repeat: repeat-y;
          }
      /* Footer Container */
          .footer {
            background-color: #862828;
            color: #f4d488;
            padding: 50px 35px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
            border-radius: 80px 80px 0 0;
            text-align: center;
          }
      
          /* Left Section */
          .footer-sec {
            max-width: 250px;
            text-align: left;
            color: #f4d488;
          }
          .footer-sec img.footer-logo {
            width: 100px;
            height: auto;
            margin-bottom: 10px;
          }
          .footer-sec p {
            font-size: 18px;
            font-weight: bold;
            margin: 0;
          }
      
          /* (Old) Contact Info and Dots Wrapper removed in favor of the awards image in center */
      
          /* Right Section - Certifications */
          .certification-info {
            max-width: 250px;
            text-align: center;
            color: #f4d488;
          }
          .certification-info h3 {
            font-size: 18px;
            margin: 0 0 10px;
            font-weight: bolder;
          }
          .certification-info p {
            font-size: 18px;
            font-weight: bold;
            margin: 0 0 10px;
          }
          .certification-images {
            display: flex;
            gap: 5px;
            justify-content: center;
          }
          .certification-images img {
            width: 90px;
            height: auto;
          }
      
          .footer-bottom {
            background-color: #D2B260; /* Beige background */
            color: #7C111E;
            text-align: center;
            padding: 10px 0;
            margin-top: 0px;
            font-size: 14px;
            bottom: 0px;
          }
          .footer-bottom ul {
            list-style: none;
            padding: 0;
            margin: 10px 0 0;
            display: flex;
            justify-content: center;
            gap: 10px;
          }
          .footer-bottom ul li a {
            color: #7C111E;
            text-decoration: none;
          }
      
          /* Responsive Design */
          @media (max-width: 768px) {
            .footer {
              flex-direction: column;
              text-align: center;
            }
            .footer-sec, .certification-info {
              max-width: 100%;
              margin: 10px 0;
            }
            .certification-images img {
              width: 50px;
            }
          }
      
      
        </style>
  </head>
  <body>
    <div class="sticky top-0 z-50">
      <!-- Top Bar -->
      <div class="bg-[var(--secondary-color)] text-white py-2">
        <div class="max-w-7xl mx-auto px-4 flex justify-between items-center text-sm">
          <!-- Left Side: Company Contact Number -->
          <div class="flex items-center">
            <span class="mr-2 font-semibold">Call us:</span>
            <span>+223 302 778 859</span>
          </div>
          <!-- Right Side: Company Address -->
          <div class="flex items-center">
            <span class="mr-2 font-semibold">Address:</span>
            <span>75 La Beach Road, South La Estate, Otswe-Accra</span>
          </div>
        </div>
      </div>
      
      <!-- Navigation -->
      <header class="w-full bg-[var(--primary-color)] text-white">
        <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-18">
          <!-- Logo -->
          <div class="flex items-center">
            <img src="mainImages/logo1-768x600.jpg" alt="PBSL Logo" class="h-20">
          </div>
          <!-- Desktop Menu -->
          <nav class="hidden md:flex space-x-6">
            <a href="index.html" class="hover:text-[var(--secondary-color)] transition-colors relative after:block after:h-0.5 after:bg-white after:w-0 hover:after:w-full after:transition-all">HOME</a>
    
            <a href="aboutpbs.html" class="hover:text-[var(--secondary-color)]  transition-colors relative after:block after:h-0.5 after:bg-white after:w-0 hover:after:w-full after:transition-all">ABOUT</a>
            <a href="servicespbs.html" class="hover:text-[var(--secondary-color)]  transition-colors relative after:block after:h-0.5 after:bg-white after:w-0 hover:after:w-full after:transition-all">SOLUTIONS AND SERVICES</a>
            <a href="partnerspbs.html" class="hover:text-[var(--secondary-color)]  transition-colors relative after:block after:h-0.5 after:bg-white after:w-0 hover:after:w-full after:transition-all">PARTNERS</a>
            <a href="shoppbs.html" class="hover:text-[var(--secondary-color)]  transition-colors relative after:block after:h-0.5 after:bg-white after:w-0 hover:after:w-full after:transition-all">SHOP</a>
            
            
          </nav>
          <!-- Right Side Button (Contact) -->
          <div class="hidden md:flex items-center space-x-4">
            <button class="bg-transparent border border-white py-1 px-3 rounded hover:bg-[var(--secondary-color)]  hover:text-white">
              Contact Us
            </button>
          </div>
          <!-- Mobile Menu Button -->
          <button class="md:hidden flex flex-col space-y-1" onclick="toggleMobileMenu()">
            <div class="w-6 h-0.5 bg-white"></div>
            <div class="w-6 h-0.5 bg-white"></div>
            <div class="w-6 h-0.5 bg-white"></div>
          </button>
        </div>
        <!-- Mobile Menu (Stacked Items) -->
        <nav id="mobileMenu" class="bg-[var(--primary-color)] md:hidden hidden flex flex-col space-y-2 px-4 pb-4">
          <a href="index.html" class="block text-white hover:text-[var(--secondary-color)] py-2">HOME</a>
          <a href="aboutpbs.html" class="block text-white hover:text-[var(--secondary-color)] py-2">ABOUT</a>
          <a href="servicespbs.html" class="block text-white hover:text-text-[var(--secondary-color)] py-2">SOLUTIONS AND SERVICES</a>
          <a href="partnerspbs.html" class="block text-white hover:text-text-[var(--secondary-color)] py-2">PARTNERS</a>
          <a href="shoppbs.html" class="block text-white hover:text-text-[var(--secondary-color)] py-2">SHOP</a>
         
         
        </nav>
      </header>
    </div>  
    <div class="container">
      <!-- Sidebar -->
      <aside class="sidebar">
        <div class="search-bar">
          <h3>Search</h3>
          <input type="text" placeholder="Search products..." />
          <button class="search-btn">Search</button>
        </div>

        <div class="category-section">
          <h3>Category</h3>
          <ul>
            <li><input type="checkbox" id="APC UPS" /> APC UPS (3)</li>
            <li><input type="checkbox" id="Desktops & Laptops" /> Desktops & Laptops (24)</li>
            
            <li><input type="checkbox" id="Parts & Accessories" /> Parts & Accessories (25)</li>
            <li><input type="checkbox" id="Printers, Scanners & Copiers" /> Printers, Scanners & Copiers (12)</li>
            <li><input type="checkbox"  id="Servers" /> Servers (1)</li>
           
            <li><input type="checkbox" id="Switches & Routers" /> Switches & Routers (11)</li>
            <li><input type="checkbox" id="Toners & Inks" /> Toners & Inks (10)</li>
            <li><input type="checkbox" id="Others"  /> Others (10)</li>
          </ul>
        </div>
      </aside>

      <!-- Main Content -->
      <main>
        <div class="header-row">
          <h2>Featured Products</h2>
          <div class="sort-section">
            <button class="sort-btn">Sort By: Default</button>
          </div>
        </div>

        <!-- Product Grid -->
        <div class="product-grid">
          <div class="product">
            <img
              src="mainImages/shop-sandisk.jpg"
              alt="16GB Pendrive Sandisk"
            />
            <h3 class="productname">16GB Pendrive Sandisk</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-1tb external.png"
              alt="1TB External HDD Seagate"
            />
            <h3 class="productname">1TB External HDD Seagate</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-Apc-ups.jpeg"
              alt="APC Back UP 1400VA UPS"
            />
            <h3 class="productname">APC Easy UPS BV 1000VA</h3>
            <p class="Category">APC UPS</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <!-- Repeat similar product items as needed -->
          <div class="product">
            <img src="mainImages/shop-apc700.jpg" alt="APC Back-UPS 700VA" />
            <h3 class="productname">APC Back-UPS 700VA</h3>
            <p class="Category">APC UPS</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-apc700.jpg" alt="APC Easy UPS BV 800VA" />
            <h3 class="productname">APC Easy UPS BV 800VA</h3>
            <p class="Category">APC UPS</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-rack.jpg"
              alt="APC NetShelter SX 24U 600mm Wide x 1070mm Deep Enclosure"
            />
            <h3 class="productname">
              APC NetShelter SX 24U 600mm Wide x 1070mm Deep Enclosure
            </h3>
            <p class="Category">Others</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-rack2.jpg"
              alt="APC NetShelter SX 42U Server Rack Enclosure 600mm x 1070mm w/ Sides Black"
            />
            <h3 class="productname">
              APC NetShelter SX 42U Server Rack Enclosure 600mm x 1070mm w/
              Sides Black
            </h3>
            <p class="Category">Others</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-apc-5outlet.webp"
              alt="APC SurgeArrest White 5 AC outlets"
            />
            <h3 class="productname">APC SurgeArrest White 5 AC outlets</h3>
            <p class="Category">Others</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-conDell Inspiron.webp"
              alt="Dell Inspiron 3280 All In One"
            />
            <h3 class="productname">Dell Inspiron 3280 All In One</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-dell-3480.jpeg"
              alt="Dell Inspiron AIO 3480 All-in-One"
            />
            <h3 class="productname">Dell Inspiron AIO 3480 All-in-One</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-optiplex1.jpeg"
              alt="Dell Optiplex 3060MT i5"
            />
            <h3 class="productname">Dell Optiplex 3060MT i5</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-optiplex2.jpeg"
              alt="Dell Optiplex 7040MT"
            />
            <h3 class="productname">Dell Optiplex 7040MT</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-7040-optiplex.jpeg"
              alt="Dell Optiplex 7050SFF"
            />
            <h3 class="productname">Dell Optiplex 7050SFF</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-7L-768x860.jpeg"
              alt="Dell Optiplex 7060MT"
            />
            <h3 class="productname">Dell Optiplex 7060MT</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp c06.png"
              alt="HP 24 F0565NH All in One"
            />
            <h3 class="productname">HP 24 F0565NH All in One</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp c065.png"
              alt="HP 24-F0318NH All in One"
            />
            <h3 class="productname">HP 24-F0318NH All in One</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@1.webp"
              alt="HP 24-F0568NH All in One"
            />
            <h3 class="productname">HP 24-F0568NH All in One</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@2.webp" alt="HP 280 G4 Monitor" />
            <h3 class="productname">HP 280 G4 Monitor</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@3.webp"
              alt="HP Desktop Computer 280 G2"
            />
            <h3 class="productname">HP Desktop Computer 280 G2</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@4.webp"
              alt="HP EliteBook Folio 1040 G2"
            />
            <h3 class="productname">HP EliteBook Folio 1040 G2</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@5.webp"
              alt="HP Pavilion 24-b030xt AIO"
            />
            <h3 class="productname">HP Pavilion 24-b030xt AIO</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@6.webp" alt="HP Pavilion All-in-One" />
            <h3 class="productname">HP Pavilion All-in-One</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@7.webp" alt="HP Pro 3500 MT" />
            <h3 class="productname">HP Pro 3500 MT</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@9.webp" alt="HP ProBook 450 G6" />
            <h3 class="productname">HP ProBook 450 G6</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@10.webp" alt="HP ProDesk 400 G3" />
            <h3 class="productname">HP ProDesk 400 G3</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@11.webp"
              alt="HP ProDesk 600 G3 – SFF"
            />
            <h3 class="productname">HP ProDesk 600 G3 – SFF</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@12.webp" alt="Ideacentre AIO 520S" />
            <h3 class="productname">Ideacentre AIO 520S</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@13.webp"
              alt="Lenovo ThinkCentre Edge 72 Tower"
            />
            <h3 class="productname">Lenovo ThinkCentre Edge 72 Tower</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@14.webp"
              alt="Lenovo ThinkCentre M720S"
            />
            <h3 class="productname">Lenovo ThinkCentre M720S</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@15.webp" alt="Lenovo ThinkPad T480" />
            <h3 class="productname">Lenovo ThinkPad T480</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@16.webp" alt="Lenovo ThinkPad T480s" />
            <h3 class="productname">Lenovo ThinkPad T480s</h3>
            <p class="Category">Desktops & Laptops</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@17.webp" alt="BladeCenter HS22" />
            <h3 class="productname">BladeCenter HS22</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@18.webp"
              alt="Brother cassette tape,black on white 12mm (GLF Tze-231)"
            />
            <h3 class="productname">
              Brother cassette tape,black on white 12mm (GLF Tze-231)
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@19.webp"
              alt="Canon Super G3 FAX Board-T1"
            />
            <h3 class="productname">Canon Super G3 FAX Board-T1</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@20.webp"
              alt="Dell MS116 USB Optical Mouse (Black)"
            />
            <h3 class="productname">Dell MS116 USB Optical Mouse (Black)</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@21.webp"
              alt="Dell Multimedia Keyboard-KB216 – US International (QWERTY) – Black"
            />
            <h3 class="productname">
              Dell Multimedia Keyboard-KB216 – US International (QWERTY) – Black
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@22.webp"
              alt="Dell Wireless Mouse-WM126 – Black"
            />
            <h3 class="productname">Dell Wireless Mouse-WM126 – Black</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@23.webp"
              alt="DYMO D1 12MM/7M Labeling Cassete"
            />
            <h3 class="productname">DYMO D1 12MM/7M Labeling Cassete</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@24.webp"
              alt="GCM16 and GCM32 Global Console Managers"
            />
            <h3 class="productname">GCM16 and GCM32 Global Console Managers</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@25.webp"
              alt="HP SK-2086 Business Wired PC USB Black Keyboard"
            />
            <h3 class="productname">
              HP SK-2086 Business Wired PC USB Black Keyboard
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@26.webp"
              alt="IBM 1U 17-inch Flat Panel Console Kits"
            />
            <h3 class="productname">IBM 1U 17-inch Flat Panel Console Kits</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@27.webp"
              alt="IBM DPI C19 Enterprise PDU"
            />
            <h3 class="productname">IBM DPI C19 Enterprise PDU</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@28.webp"
              alt="IBM LTO Ultrium 6 Magnetic Tape Data Cartridge for System Storage (2.5TB)"
            />
            <h3 class="productname">
              IBM LTO Ultrium 6 Magnetic Tape Data Cartridge for System Storage
              (2.5TB)
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@29.webp"
              alt="IBM LTO-5 Backup Tape Cartridge 1.5TB"
            />
            <h3 class="productname">IBM LTO-5 Backup Tape Cartridge 1.5TB</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@30.webp" alt="Lenovo 300 USB Mouse" />
            <h3 class="productname">Lenovo 300 USB Mouse</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@31.webp"
              alt="Lenovo Professional Wireless Laser Mouse"
            />
            <h3 class="productname">
              Lenovo Professional Wireless Laser Mouse
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@32.webp"
              alt="Logitech H390 Wired Headset"
            />
            <h3 class="productname">Logitech H390 Wired Headset</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@33.webp"
              alt="Logitech Laser R400 Presentation Pointer"
            />
            <h3 class="productname">
              Logitech Laser R400 Presentation Pointer
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@34.webp"
              alt="Logitech MK120 USB Keyboard and Mouse"
            />
            <h3 class="productname">Logitech MK120 USB Keyboard and Mouse</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@35.webp"
              alt="Network Cable Tester & Wire Tracker NF-308"
            />
            <h3 class="productname">
              Network Cable Tester & Wire Tracker NF-308
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@36.webp"
              alt="Sandisk Pendrive 32GB /OTG USB"
            />
            <h3 class="productname">Sandisk Pendrive 32GB /OTG USB</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@37.webp" alt="USB Conversion Option" />
            <h3 class="productname">USB Conversion Option</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@38.webp"
              alt="WD My Passport Ultra 500 GB Portable External USB 3.0 Hard Drive"
            />
            <h3 class="productname">
              WD My Passport Ultra 500 GB Portable External USB 3.0 Hard Drive
            </h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@39.webp"
              alt="WD10000HIU-00 2TB backup external HDD"
            />
            <h3 class="productname">WD10000HIU-00 2TB backup external HDD</h3>
            <p class="Category">Parts & Accessories</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@40.webp"
              alt="Canon imageFORMULA P-215II"
            />
            <h3 class="productname">Canon imageFORMULA P-215II</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@41.webp"
              alt="Canon imageRUNNER 2530i"
            />
            <h3 class="productname">Canon imageRUNNER 2530i</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@42.webp"
              alt="Epson LQ-590 24-Pin Dot Matrix Impact Printer"
            />
            <h3 class="productname">
              Epson LQ-590 24-Pin Dot Matrix Impact Printer
            </h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@43.webp" alt="Epson SP 6430DN" />
            <h3 class="productname">Epson SP 6430DN</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img src="mainImages/shop-hp@44.webp" alt="Epson Stylus C91" />
            <h3 class="productname">Epson Stylus C91</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>

          <div class="product">
            <img
              src="mainImages/shop-hp@45.webp"
              alt="HP Color LaserJet Pro MFP 4303fdw Printer"
            />
            <h3 class="productname">
              HP Color LaserJet Pro MFP 4303fdw Printer
            </h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>
          <div class="product">
            <img
              src="mainImages/shop-hp@46.webp"
              alt="HP Color LaserJet Pro MFP M283fdw"
            />
            <h3 class="productname">HP Color LaserJet Pro MFP M283fdw</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>
          <div class="product">
            <img
              src="mainImages/shop-hp@47.webp"
              alt="HP LaserJet Enterprise M611dn"
            />
            <h3 class="productname">HP LaserJet Enterprise M611dn</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>
          <div class="product">
            <img
              src="mainImages/shop-hp@48.webp"
              alt="HP LaserJet Pro 4003dn Printer"
            />
            <h3 class="productname">HP LaserJet Pro 4003dn Printer</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>
          <div class="product">
            <img
              src="mainImages/shop-hp@49.webp"
              alt="HP LaserJet Pro M404dn"
            />
            <h3 class="productname">HP LaserJet Pro M404dn</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>
          <div class="product">
            <img
              src="mainImages/shop-hp@50.webp"
              alt="HP ScanJet Pro 4500 fn1 Network Scanner"
            />
            <h3 class="productname">HP ScanJet Pro 4500 fn1 Network Scanner</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>
          <div class="product">
            <img src="mainImages/shop-hp@51.webp" alt="Panasonic KX-MB2061" />
            <h3 class="productname">Panasonic KX-MB2061</h3>
            <p class="Category">Printers, Scanners & Copiers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>


          <div class="product">
            <img src="mainImages/shop-hp@52.webp" alt="PowerEdge R550 Rack Server" />
            <h3 class="productname">PowerEdge R550 Rack Server</h3>
            <p class="Category">Servers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
          </div>


          <div class="product">
            <img src="mainImages/shop-hp@53.webp" alt="Cisco CISCO2911/K9 Router">
            <h3 class="productname">Cisco CISCO2911/K9 Router</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@54.webp" alt="Cisco SG300-52P 52-Port Gigabit PoE+ Managed Switch (SG300-52P-WS)">
            <h3 class="productname">Cisco SG300-52P 52-Port Gigabit PoE+ Managed Switch (SG300-52P-WS)</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@55.webp" alt="Cisco WS-C3560X-24P-S Catalyst 3560-X Switch">
            <h3 class="productname">Cisco WS-C3560X-24P-S Catalyst 3560-X Switch</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@56.webp" alt="Cisco-Linksys BEFSR81 Cable/dsl Router with 8-PT Switch">
            <h3 class="productname">Cisco-Linksys BEFSR81 Cable/dsl Router with 8-PT Switch</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@57.webp" alt="D-Link 5 Port Gigabit Desktop Switch – DGS-1005A">
            <h3 class="productname">D-Link 5 Port Gigabit Desktop Switch – DGS-1005A</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@58.webp" alt="D-Link CABLE MODEM – DCM 201">
            <h3 class="productname">D-Link CABLE MODEM – DCM 201</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@59.webp" alt="Linksys Dual-Band Mesh Wi-Fi 6 Router (MR9600)">
            <h3 class="productname">Linksys Dual-Band Mesh Wi-Fi 6 Router (MR9600)</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@60.webp" alt="Linksys Hydra Pro 6E Tri-Band Mesh Wi-Fi Router (AXE6600)">
            <h3 class="productname">Linksys Hydra Pro 6E Tri-Band Mesh Wi-Fi Router (AXE6600)</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@61.webp" alt="Linksys N300 Wi-Fi Wireless Router">
            <h3 class="productname">Linksys N300 Wi-Fi Wireless Router</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@62.webp" alt="Linkys AC1900 Dual Band Smart W-FI Router">
            <h3 class="productname">Linkys AC1900 Dual Band Smart W-FI Router</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        
        <div class="product">
            <img src="mainImages/shop-hp@63.webp" alt="Us Robotics 56k External Serial Data/Fax Modem">
            <h3 class="productname">Us Robotics 56k External Serial Data/Fax Modem</h3>
            <p class="Category">Switches & Routers</p>
            <p class="price">₵0.00</p>
            <button class="add-to-cart">Add to Cart</button>
        </div>
        

        <div class="product">
          <img src="mainImages/shop-hp@64.webp" alt="C7115A">
          <h3 class="productname">C7115A</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@65.webp" alt="C8543X">
          <h3 class="productname">C8543X</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@66.webp" alt="CB436A">
          <h3 class="productname">CB436A</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@67.webp" alt="HP 11A (Q6511A) Black Original Laserjet Toner Cartridge">
          <h3 class="productname">HP 11A (Q6511A) Black Original Laserjet Toner Cartridge</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@68.webp" alt="HP 12A Black Original Laserjet Toner Cartridge (Q2612A)">
          <h3 class="productname">HP 12A Black Original Laserjet Toner Cartridge (Q2612A)</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@69.webp" alt="HP 13A Q2613A Toner-Cartridge Black">
          <h3 class="productname">HP 13A Q2613A Toner-Cartridge Black</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@70.webp" alt="HP 151A Black LaserJet Toner Cartridge">
          <h3 class="productname">HP 151A Black LaserJet Toner Cartridge</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@71.webp" alt="HP Toner 220A / W2200A W2201A">
          <h3 class="productname">HP Toner 220A / W2200A W2201A</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@72.webp" alt="Q5942A">
          <h3 class="productname">Q5942A</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      
      <div class="product">
          <img src="mainImages/shop-hp@73.webp" alt="Q7516A">
          <h3 class="productname">Q7516A</h3>
          <p class="Category">Toners & Inks</p>
          <p class="price">₵0.00</p>
          <button class="add-to-cart">Add to Cart</button>
      </div>
      









        </div>

        <div class="pagination">
          <button id="prev-btn" class="page-btn" disabled>Previous</button>
          <span id="page-info"></span>
          <button id="next-btn" class="page-btn">Next</button>
      </div>



      </main>
    </div>

     <div class="footer">
      <!-- Left Section: Footer Information -->
      <div class="footer-sec">
        <img src="mainImages/logo.jpg" alt="PBSL Logo" class="footer-logo">
        <p>
          Our track record has been impeccable since our founding in 1996, and this has led to acclamations,
          recognitions, and awards from reputable international bodies, manufacturers, business partners, and customers.
        </p>
      </div>
    
      <!-- Center Section: Company Awards Image (Increased Height) -->
      <div class="flex items-center justify-center">
        <img src="landmages/awards.png" alt="Company Awards" class="h-64">
      </div>
     
      <!-- Right Section: Certification Information -->
      <div class="certification-info">
        <h3>Our Certification</h3>
        <p>PBSL has achieved and maintained ISO 9001:2015 status and certification for quality management.</p>
        <div class="certification-images">
          <img src="mainImages/ISO-SGS.png" alt="Certification 1">
          <img src="mainImages/ISO-UKAS.png" style="background-color: #ffffff;" alt="Certification 2">
          <img src="mainImages/ISO-IAF.png" style="background-color: #ffffff;" alt="Certification 3">
        </div>
      </div>
    </div>
    
    <!-- Footer Bottom Section -->
    
    
    
    <!-- Footer Bottom Section -->
    <div class="footer-bottom">
      <p>© 2024 Perfect Business Services Limited. All rights reserved.</p>
      <ul>
        <li><a href="#">Terms and Conditions</a></li>
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>

    <script src="mainJS/shop.js"></script>
  </body>
</html>
