/* Background container */
.background-container {
    background-image: url('static/picture/advantage-bg.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 440px;
    display: flex;
    justify-content: center; /* Center the image row */
    align-items: center;     /* Center the images vertically */
    overflow: hidden;        /* Prevent both horizontal and vertical scroll */
}

/* Row to hold images */
.image-row {
    display: flex;                /* Display images in a row */
    justify-content: space-between; /* Distribute space evenly between images */
    align-items: center;          /* Vertically align images */
    gap: 6px;                    /* Add gap between images */
    width: 100%;
    max-width: 100%;               /* Set max width to 100% to fit within container */
    flex-wrap: nowrap;            /* Prevent wrapping of images */
    overflow: hidden;             /* Prevent both horizontal and vertical scroll */
}

/* Image styling */
.image-row img {
    width: 16%;  /* Adjust width to 16.66% for 6 images per row */
    height: auto; /* Maintain image aspect ratio */
    transition: transform 0.3s ease; /* Optional: Add hover effect */
    object-fit: cover; /* Ensure the image is contained within its container */
    transform-origin: top center; /* Set the scaling origin to the top center */
    margin-left: -10px;
}

/* Optional: Hover effect for images */
.image-row img:hover {
    transform: scale(1.1); /* Scale up the image */
}

/* Mobile responsiveness */

/* Media query for screens with a maximum width of 768px (Tablets and smaller screens) */
@media (max-width: 768px) {
    /* Adjust the background container height for small screens */
    .background-container {
        height: 300px; /* Adjust to a smaller height */
    }

    /* Image row: Allow images to adjust in small screens */
    .image-row {
        justify-content: center; /* Center images horizontally */
        gap: 5px; /* Reduce the gap between images */
    }

    /* Adjust image size for medium screens (tablets) */
    .image-row img {
        width: 16%;  /* Keep 16% width for each image (always 6 images per row) */
    }
}

/* Media query for screens with a maximum width of 480px (Mobile devices) */
@media (max-width: 480px) {
    /* Make sure the image width stays consistent even on small screens */
    .image-row img {
        width: 16%;  /* Keep 16% width for each image (always 6 images per row) */
    }
}