/* ===== BLUE THEME ===== */
:root {
  --nxtgen-blue: #1a237e;
  --nxtgen-lightblue: #00bcd4;
  --nxtgen-gray: #f8f9fa;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--nxtgen-gray);
  color: #333;
  padding-top: 60px; /* For fixed navbar */
}

/* Header */
.navbar {
  background-color: var(--nxtgen-blue) !important;
  border-bottom: 3px solid var(--nxtgen-lightblue);
}

.navbar-brand img {
  height: 50px;
   width: auto;
  transition: all 0.3s;
}

.nav-link {
  font-weight: 500;
  padding: 8px 15px !important;
}

.nav-link i {
  width: 20px;
  text-align: center;
  margin-right: 5px;
}

/* Hero */
.hero-bg {
  background: linear-gradient(135deg, var(--nxtgen-blue), #283593);
  color: white;
  padding: 100px 0;
}

/* Footer */
footer {
  background-color: var(--nxtgen-blue);
  color: white;
  padding: 40px 0 20px;
}

.footer-links a {
  color: #ccc;
  text-decoration: none;
}

.footer-links a:hover {
  color: white;
}
/* Add this to your existing CSS */
body {
  background-color: #f8f9fa; /* Light gray background */
}

.hero-section {
  background: linear-gradient(135deg, #1a237e, #283593);
  color: white;
  padding: 100px 0;
}

.navbar {
  background-color: #1a237e !important; /* Navy blue */
  border-bottom: 3px solid #00bcd4; /* Teal accent */
}
/* Product Cards */
.product-card {
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid rgba(0,0,0,0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.product-card .card-img-top {
  height: 180px;
  object-fit: contain;
}
<style>
        .whatsapp-icon {
            display: inline-block;
            width: 30px; /* Adjust size as needed */
            height: 30px; /* Adjust size as needed */
            background-image: url('assets/images/whatsapp-logo.png'); /* Replace with the actual path to your WhatsApp logo image */
            background-size: cover;
            cursor: pointer;
        }
        .whatsapp-link {
            display: flex;
            align-items: center;
            gap: 5px; /* Space between icon and text if you want text */
            text-decoration: none; /* Remove underline from link */
            color: inherit; /* Inherit text color from parent */
        }
        .sort-options {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.sort-btn.active {
  background-color: #2563EB;
  color: white;
  border-color: #2563EB;
}
    </style>
    input {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
button.cta {
  background: #fca311;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 6px;
  cursor: pointer;
}