.banner {
    width: 100%;
    overflow: hidden;
}

.banner img {
    width: 100%; /* Ensures the image spans the entire width */
    height: auto; /* Maintains aspect ratio */
    max-height: 600px;
    display: block; /* Removes bottom whitespace */
    object-fit: cover;
}

.nav-icon {
    width: 40px;
    height: 40px; 
    object-fit: contain;
}

.productImg {
    width: 100%;
    display: block;
    object-fit: cover;
    height: auto;
}

@media (max-width: 768px) {
    .banner {
        max-height: 300px; /* Shrinks the banner for mobile */
    }
}