/* Make the entire product box clickable */
.product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-link .product {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  background-color: #fff;
  transition: transform 0.2s; /* Add a transition for hover effect */
}

.product-link .product:hover {
  transform: scale(1.05); /* Slightly enlarge the product box on hover */
}

/* Next Day Shipping Styles */
.product .nextDayShipping {
  background-color: green;
  color: white !important; /* Ensure the text color is white */
  padding: 5px 10px;
  border-radius: 5px;
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
  font-size: 1em; /* Increase font size for better readability */
}

/* Other styles... */

/* Shipping Banner Styles */
#shippingBanner {
background-color: #d4af37; /* Gold color */
color: #333;
text-align: center;
padding: 10px 0;
font-weight: bold;
font-size: 1.2em;
position: fixed;
top: 0; /* Align with the top of the page */
width: 100%;
z-index: 999; /* Ensure it stays below the navbar */
}

#shippingBanner .phoneNumber {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 0.8em;
color: #333;
font-weight: bold; /* Make the phone number bold */
}

/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #e3eaecd0;
color: #333;
padding-top: 100px; /* Adjust this value based on the combined height of your navbar and banner */
}

header, section, footer {
padding: 20px;
margin: 20px;
background-color: #fff; /* White background for sections */
border: 1px solid #ddd; /* Light gray border */
border-radius: 10px; /* Rounded edges */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better visibility */
}

h1, h2 {
color: #000; /* Change to black */
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

.badge {
background-color: #28a745;
color: white;
padding: 5px 10px;
border-radius: 5px;
}

/* Popup Styles */
.popup {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
justify-content: center;
align-items: center;
z-index: 1001; /* Above other content */
}

.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
position: relative; /* Ensure the close button is positioned relative to this container */
}

.popup-content h2 {
margin-top: 0;
}

.popup-content input[type="email"] {
width: calc(100% - 20px); /* Slightly reduce the width */
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}

.popup-content button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}

.popup-content button:hover {
background-color: #0056b3;
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}

/* Navbar Styles */
#mainNav {
background-color: #343a40;
color: white;
padding: 10px;
display: flex;
justify-content: flex-end; /* Align items to the right */
align-items: center; /* Center items vertically */
position: fixed;
top: 50px; /* Adjust this value to align with the bottom of the banner */
width: 100%;
z-index: 1000; /* Ensure it stays above other content */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for better visibility */
}

#mainNav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
margin-left: auto; /* Push the list to the right */
}

#mainNav ul li {
display: inline;
margin: 0 10px; /* Adjust the margin to control spacing between items */
}

#mainNav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px; /* Adjust the padding to control spacing within items */
}

#mainNav ul li a:hover {
text-decoration: underline;
}

/* Gold Products Styles */
#goldProducts, #silverProducts {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 items per row */
gap: 20px; /* Space between items */
padding: 20px;
}

.product {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}

.product img {
max-width: 100%;
height: auto;
border-radius: 10px;
}

.product h3 {
margin: 10px 0;
}

.product p {
color: #666;
}