.main-img-container {
position: relative;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #fff;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#mainProductImage {
width: 100%;
height: 100%;
object-fit: contain; /* Keeps the image sharp and within the box */
}
.thumb-btn {
cursor: pointer;
opacity: 0.7;
transition: 0.3s;
border: 2px solid #eee;
height: 70px;
object-fit: cover;
width: 100%;
border-radius: 5px;
}
.thumb-btn:hover, .active-thumb {
opacity: 1;
border-color: #007bff; /* Blue border for the selected image */
}
/* Styling the Enquiry Button to make it visible */
.btn-enquiry {
background-color: #d32f2f; /* Matching the Polychem Red logo color */
color: #ffffff !important;
border: none;
padding: 12px 30px;
border-radius: 5px;
font-weight: 600;
text-decoration: none;
display: inline-flex; /* Ensures the button takes up physical space */
align-items: center;
justify-content: center;
transition: all 0.3s ease;
min-width: 250px; /* Ensures it doesn't shrink */
}
.btn-enquiry:hover {
background-color: #b71c1c; /* Darker red on hover */
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
/* Container to ensure it stays below the images */
.button-wrapper {
margin-top: 30px;
display: flex;
width: 100%;
}