/****************************** 
Custom colors:
    background-color: #badc58;
	background-image: linear-gradient(to bottom, #b2d44f, #afd349);
	background-repeat: repeat-x;
	border-color: #badc58 #badc58 #badc58;
OC default button colors:
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
******************************/

.module-container {
    max-width: 100%; /* Ensure the module doesn't exceed the viewport width */
    padding: 20px;
    box-sizing: border-box;
    background-color:aliceblue; 
}

/* Media queries for responsiveness */
@media screen and (max-width: 768px) {
    .module-container {
        padding: 10px;
    }
}

@media screen and (max-width: 480px) {
    .module-container {
        padding: 5px;
    }
}

.ad-product {
    padding-left: 5px;
    padding-right: 5px;
}

.image-container {
    max-width: 300px; /* Set the maximum width for the image container */
    margin: 0 auto; /* Center the container horizontally */
    transition: max-width 0.5s ease-in-out; /* Add a smooth transition effect */
    background-color:aliceblue; /* same as module-container */
}

.image-container img {
    width: 100%; /* Ensure the image takes up 100% of the container width */
    height: auto; /* Maintain the image's aspect ratio */
}

.image-container:hover {
    max-width: 500px; /* Increase the maximum width on hover */
}