.container1 {
    display: grid;
    /*    background-image: url('/images/slideshow/image16.webp');*/
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
}

.container2 {
    width: 60vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-card {
    background-color: #343a40; /* Match the dark theme */
    color: #F5AE18; /* Text color to match theme */
    width: 60%;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    padding: 2rem;
    margin: 2rem 0;
}

.quantity-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.quantity-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 50%;
    margin-top: 1em;
}

.footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 2rem;
}

    .footer-buttons button {
        border-radius: 10px;
        padding: 1rem 2rem;
        font-size: 1rem;
    }

.product-card {
    background-color: #222;
    color: #F5AE18;
    border-radius: 8px;
    margin: 2rem auto;
    padding: 2rem;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-content {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.product-card h1, .product-card h3 {
    margin: 0.5rem 0;
}

.product-card p {
    margin: 1rem 0;
}

.image-and-quantity-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 50%;
    height: auto;
    background-color: #222;
    border-radius: 8px;
    position: relative;
}

.product-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 200px; /* Adjust this value based on your needs */
    background-color: #222;
    position: relative; /* This ensures that the absolute positioning of the children is relative to this container */
}

    .product-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* This will ensure the image is fully visible and centered without being stretched */
    }

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none; /* No background color for the controls */
    width: auto;
    height: auto;
}

.carousel-control-prev {
    left: 0; /* Align to the left edge */
}

.carousel-control-next {
    right: 0; /* Align to the right edge */
}

.bi-chevron-left, .bi-chevron-right {
    fill: #F5AE18; /* Change the color to F5AE18 */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%;
    filter: invert(50%); /* This will make the icons lighter. You can remove this line if you prefer the original color */
    fill: #F5AE18
}



.carousel-indicators {
    position: absolute;
    bottom: -35px; /* Adjust this value to position the indicators below the image */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    list-style: none;
}

    .carousel-indicators li {
        background-color: #F5AE18; /* Active indicator color */
        width: 10px; /* Indicator width */
        height: 10px; /* Indicator height */
        border-radius: 50%; /* Make it round */
        margin: 0 5px; /* Spacing between indicators */
        cursor: pointer;
    }

    .carousel-indicators .active {
        background-color: #e59b10; /* Different color for the active indicator */
    }


/* Media query to change styles for smaller screens */
@media (max-width: 768px) {
    .container2 {
        width: 90vw; /* Increases width to give more space */
    }

    .footer-buttons {
        flex-direction: column; /* Makes the buttons stack vertically */
        gap: 1rem; /* A more modern approach to space items */
    }

    .product-card {
        width: 100%; /* Increases the width of the card on smaller screens */
    }
}