main>.container {
    padding: 30px 0;

}


.form-login {
    max-width: 350px;
}

.pagination .page-item {
    display: inline-block;
    margin-right: 5px; /* Adjust margin between page numbers */
}

.pagination .page-item a {
    color: black;
    text-decoration: none;
    transition: color 0.3s;
}

.pagination .page-item a:hover {
    color: #6c757d; /* Gray-blue color */
}

.page-item.active .page-link {
    background-color: #444444; /* Cambia este color al que prefieras */
    color: #ffffff; /* Cambia este color al que prefieras */
}

.img-border {
    border: 2px solid #000; /* Borde de 2px de ancho y color negro */
    padding: 5px; /* Espaciado interno para el borde */
}

img.img-custom-size {
    width: 250px !important;
    height: auto;
}

.fixed-size-img {
    max-width: 100%;
    height: auto;
}


/* Estilos del botón flotante */
.boton-flotante {
    position: fixed;
    bottom: 20px; /* Distancia desde el borde inferior */
    right: 20px; /* Distancia desde el borde derecho */
    background-color: #313335; /* Color de fondo */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra */
}

.boton-flotante:hover {
    background-color: #293d64; /* Cambia el color de fondo al pasar el ratón */
}
.pagination-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pagination {
    display: inline-block;
    margin-bottom: 0; /* Evita el espacio debajo del paginado */
}

.pagination .page-link {
    padding: 0.5rem 0.75rem; /* Ajusta el padding de los enlaces */
    font-size: 1rem; /* Tamaño de fuente */
}

/* Ajuste de tamaño para pantallas pequeñas */
@media (max-width: 576px) {
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Agrega este estilo a tu archivo CSS para ocultar inicialmente el botón y darle estilo */
.btn-volver-arriba {
    position: fixed;
    bottom: 68px;
    right: 20px;
    display: none; /* Inicialmente oculto */
    z-index: 999; /* Asegura que esté por encima de otros elementos */
    background-color: #313335; /* Color de fondo del botón (cambia esto al color deseado) */
    color: #fff; /* Color del texto del botón (cambia esto al color deseado) */
    border: none; /* Sin borde */
    width: 40px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    font-size: 20px; /* Tamaño de la fuente */
}

.btn-volver-arriba:hover {
    background-color: #293d64; /* Cambia el color de fondo al pasar el ratón */
}

.btn-detalles {
    background-color: #313335; /* Cambia el color de fondo del botón */
    border-color: #313335; /* Cambia el color del borde del botón */
}

/* Estilo para el botón "Detalles" al pasar el cursor sobre él */
.btn-detalles:hover {
    background-color: #293d64; /* Cambia el color de fondo al pasar el cursor sobre el botón */
    border-color: #293d64; /* Cambia el color del borde al pasar el cursor sobre el botón */
}

.btn-agregar {
    background-color: #167046; /* Cambia el color de fondo del botón */
    border-color: #167046; /* Cambia el color del borde del botón */
}

/* Estilo para el botón "Detalles" al pasar el cursor sobre él */
.btn-agregar:hover {
    background-color: #198754; /* Cambia el color de fondo al pasar el cursor sobre el botón */
    border-color: #198754; /* Cambia el color del borde al pasar el cursor sobre el botón */
}

.btn-carrito {
    background-color: #372946; /* Cambia el color de fondo del botón */
    border-color: #6a6075; /* Cambia el color del borde del botón */
}

/* Estilo para el botón "Detalles" al pasar el cursor sobre él */
.btn-carrito:hover {
    background-color: #30243d; /* Cambia el color de fondo al pasar el cursor sobre el botón */
    border-color: #198754; /* Cambia el color del borde al pasar el cursor sobre el botón */
}

.btn-finalizarCompra {
    background-color: #372946; /* Cambia el color de fondo del botón */
    border-color: #372946; /* Cambia el color del borde del botón */
}

/* Estilo para el botón "Detalles" al pasar el cursor sobre él */
.btn-finalizarCompra:hover {
    background-color: #30243d; /* Cambia el color de fondo al pasar el cursor sobre el botón */
    border-color: #198754; /* Cambia el color del borde al pasar el cursor sobre el botón */
}

.btn-agregarOutLine {
    border-color: #372946; /* Cambia el color del borde del botón */
    color: #000000;
}

/* Estilo para el botón "Detalles" al pasar el cursor sobre él */
.btn-agregarOutLine:hover {
    background-color: #372946; /* Cambia el color de fondo del botón */
}