.active>.page-link, .page-link.active {
    --bs-pagination-active-color: #fff !important;
    --bs-pagination-active-bg: saddlebrown !important;
    --bs-pagination-active-border-color: #fff !important;
}

.btn-brown {
    --bs-btn-color: #fff;
    --bs-btn-bg: saddlebrown;
    --bs-btn-border-color: saddlebrown;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: saddlebrown;
    --bs-btn-hover-border-color: saddlebrown;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: saddlebrown;
    --bs-btn-active-border-color: saddlebrown;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: saddlebrown;
    --bs-btn-disabled-border-color: saddlebrown;
}

.start-80 {
    left: 80% !important;
}

.bg-brown {
    background-color: saddlebrown;
}

.product-image {
    max-width: 100px; /* Ajustez la largeur maximale selon vos besoins */
    max-height: 200px; /* Ajustez la hauteur maximale selon vos besoins */
    object-fit: cover; /* Maintient les proportions de l'image */
    display: block;
    margin: 0 auto; /* Centre l'image dans son conteneur */
    padding: 0.4rem;
}

@media screen and (max-width: 1695px) {
    .header-background {
        min-height: 716px; /* Moitié de la hauteur originale */
    }

    .body-background {
        min-height: 1883px; /* Moitié de la hauteur originale */
    }

    .footer-background {
        min-height: 655px; /* Moitié de la hauteur originale */
    }
}

@media screen and (max-width: 768px) {
    .header-background {
        min-height: 358px; /* Moitié de la hauteur originale */
    }

    .body-background {
        min-height: 950px; /* Moitié de la hauteur originale */
    }

    .footer-background {
        min-height: 328px; /* Moitié de la hauteur originale */
    }
}

@media screen and (max-width: 430px) {
    .header-background {
        min-height: 150px;
    }

    .body-background {
        min-height: 350px;
    }

    .footer-background {
        min-height: 150px;
    }
}

@media screen and (max-width: 310px) {
    .header-background {
        min-height: 150px;
    }

    .body-background {
        min-height: 350px;
    }

    .footer-background {
        min-height: 150px;
    }
}

.header-background {
    background-image: url("../images/header-1Dp2RPn.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.body-background {
    background-image: url("../images/content-0oHDI9G.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-background {
    background-image: url("../images/footer-lnUak1_.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body {
    background-color: saddlebrown;
}

@media only screen and (max-width: 768px) and (orientation: landscape)  {
    body {
        background-color: #212121;
        display: block !important;
        background-image: url("../images/turn-vohtLbe.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .header-background {
        display: none;
    }

    .body-background {
        display: none;
    }

    .footer-background {
        display: none;
    }
}

/*.card-container {
    position: relative;
    height: 500px;
    width: 300px;
}
.card-container:hover .card {
    transform: rotateY(180deg);
}
.card {
    position: absolute;
    height: 100%;
    width: 100%;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}
.card-front {
    position: absolute;
    height: 100%;
    width: 100%;
    background: lightgreen;
    backface-visibility: hidden;
}
.card-back {
    position: absolute;
    height: 100%;
    width: 100%;
    background: skyblue;
    backface-visibility: hidden;
    transform: rotateY(-180deg);
}*/