body {
    overflow-x: hidden; /* remove horizontal scroll bar */
}

:focus {
    outline: none !important;
    box-shadow: none !important;
}
.responsive-image {
    height: 200px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .responsive-image {
        height: 100%; /* or height: 100% */
    }
}
.product-image {
    height: 250px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .product-image {
        height: 100%; /* Use viewport height instead of percentage */
    }
}