/* Base Styles for the page */
body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 0 20px; /* Adjust padding for all devices */
    background-color: #f8f9fa;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
}

/* Hide Google Translate widget on all devices */
#google_translate_element {
    display: none;
}

/* Styles for side images (hidden in mobile-first approach) */
.side-image {
    display: none; /* Keep side images settings as previously defined */
}

/* Main content styles */
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-grow: 1;
}

/* Product grid setup using flexbox */
.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product {
    flex: 1 0 21%; /* Start with four products per row */
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ddd;
}

/* Responsive image handling for all images, including banners and products */
img, .carousel-inner img {
    width: 100%; /* Ensure images are fully responsive */
    height: auto; /* Maintain aspect ratio */
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.footer-info {
    background-color: #0000CD;
    padding: 40px 0;
    color: #fff;
}

/* Responsive adjustments for navigation and footer */
.navigation a {
    color: #000;
    text-decoration: none;
    padding: 10px;
    border: none;
    background-color: transparent;
}

/* Custom button for translation, sized as requested */
#customTranslateButton {
    width: 50px; /* Set width to 50 pixels */
    height: 15px; /* Set height to 15 pixels */
}

/* Responsive adjustments for product images on mobile devices */
@media (max-width: 768px) {
    .product img {
        width: 150px; /* Width set to 150 pixels */
        height: 150px; /* Height set to 150 pixels */
    }
    
    .header-bar {
        flex-direction: column; /* Stack elements vertically */
    }

    .header-bar #logo {
        order: -1; /* Ensure logo is above the search bar */
        width: 50%; /* Reduce logo width to 50% */
        margin: 0 auto; /* Center logo horizontally */
    }

    .header-bar #search, .navigation {
        order: 1; /* Ensures search bar and navigation follow below */
        width: 100%; /* Full width for better alignment */

.footer-info {
    background-color: #0000CD; /* Confirming the background is dark */
    color: #fff; /* Ensuring text is white for contrast */
    padding: 40px 0;
}

.footer-section h3, .footer-section p {
    color: inherit; /* Ensures text color is inherited from the parent */
}