/* General reset */
body,
h5,
p,
a,
div,
span,
img,
button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#sidebarFsDk {
  background: #c31324 !important;
  height: 45px;
}
#textotitulosidebar {
  font-size: 100%;
  text-align: center;
  color: white;
}

/* Contenedor principal */
.post {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Imagen y botones */
.post .col-md-2 {
  flex: 1 1 20%;
  max-width: 194px;
  text-align: center;
}

.post-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.delete-post-button,
.edit-post-button {
  display: block;
  margin: 5px 0;
  width: 100%;
  font-size: 14px;
}

/* Contenido del post */
.post .col-md-7 {
  flex: 1 1 70%;
  padding: 10px;
}

.post-content {
  text-align: left;
}

.post-title a {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.post-title a:hover {
  color: #007bff;
}

.post-excerpt {
  font-size: 14px;
  color: #555;
  margin: 10px 0;
}

.cocoSeEnfada {
  font-style: italic;
}

/* Precios y ofertas */
.post-price-and-chollo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

.post-price-and-chollo .btn {
  margin: 5px 0;
  padding: 10px 20px;
  font-size: 14px;
}

.btn-warning {
  color: #fff;
  background-color: #ffc107;
  border: none;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border: none;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
  border: none;
}

/* Autor y tiempo */
.post-author-info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size: 12px;
}

.post-avatar img {
  border-radius: 50%;
}

.post-author {
  font-weight: bold;
  margin-right: 5px;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .post {
    flex-direction: column;
    align-items: center;
  }

  .post .col-md-2,
  .post .col-md-7 {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .post-image2 img {
    max-width: 150px;
    margin-bottom: 10px;
  }

  .post-image img {
    max-width: 150px;
    margin-bottom: 10px;
    width: 46%;
  }

  .post-price-and-chollo {
    flex-direction: column;
  }

  .btn {
    width: 90%;
  }
}

@media screen and (max-width: 480px) {
  .post-title a {
    font-size: 16px;
  }

  .post-excerpt {
    font-size: 12px;
  }

  .btn {
    font-size: 12px;
  }
}

.reactions-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button_like,
.button_dislike {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  width: auto;
}
.reaction-count {
  margin-left: 5px;
  font-size: 16px;
}

.loading-spinner {
  display: none;
  margin-left: 10px;
}

.reaction-count.updated {
  transition: transform 0.2s ease;
  transform: scale(1.2);
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

.h5,
h5 {
  font-size: 1em !important;
  color: black;
}

#Coco-Dispara-xD {
  .h5,
  h5 {
    font-size: 1em !important;
    color: black;
  }
}

a {
  color: var(--bs-link-color);
  text-decoration: none !important;
}

.img-fluid {
  max-width: 75% !important;
  height: auto;
  mix-blend-mode: multiply;
  filter: brightness(1) invert(0);
}

@media (max-width: 300px) {
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}

#coco-se-esconde {
  box-shadow: 0 0 9px 2px;
  border-radius: 12px;
}

.fixed-size-image {
  display: con;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f30006 !important;
  --bs-btn-border-color: #f30006 !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d40000;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #f30006 !important;
  --bs-btn-disabled-border-color: #f30006 !important;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd !important;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: var(--bs-btn-active-color);
  background-color: #900210 !important;
  border-color: #900210 !important;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: #dee2e6;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: #e9ecef;
  --bs-pagination-hover-border-color: #dee2e6;
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: #e9ecef;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0d6efd;
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #dee2e6;
  display: flex;
  list-style: none;
  align-items: stretch;
  align-content: flex-end;
  flex-direction: row;
  justify-content: flex-end;
}

.pagination .page-numbers:hover {
  background-color: #f0f0f0;
}

.pagination .current {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.pagination .prev {
  margin-right: 10px;
}

.pagination .next {
  margin-left: 10px;
}

#FsDk-con-Coco-te-apaleanxD {
  margin-top: 2%;
}

#coco-colorcito {
  color: #0d6efd !important;
  text-decoration: none !important;
}

img,
svg {
  vertical-align: middle !important;
  margin-right: auto !important;
}

.form-control {
  margin-top: 3px !important;
  width: auto !important;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  flex-direction: column-reverse;
  align-content: stretch;
  position: relative !important;
  left: 0 !important;
}

.mega-coco-enrollao-xd {
  max-width: 63% !important;
  height: auto;
  box-shadow: 0px 0px 12px 0px;
  object-fit: contain;
  margin-top: 28px;
  margin-left: 67px;
  color: #f3000633;
  border-radius: 20px;
}

#coco-colorin-colorado {
  background: #f30006;
  font-weight: 700;
}

#coco-colorin-colorado-pero-colorado-no-nos-copieeeees-xD {
  background: #0d6efd;
}

#loginform-custom {
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#loginform-custom .input,
#loginform-custom .button {
  margin-bottom: 10px;
}

#loginform-custom .input[type="text"],
#loginform-custom .input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#loginform-custom .button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

#loginform-custom .button:hover {
  background-color: #0056b3;
}

.b-coco-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
  list-style-type: none !important;
}

.ms-2 {
  margin-left: -14px !important;
}

#FsDk-cuestabajo {
  margin-top: -16px !important;
}

.banner-container {
}

#cocoSeEnfada-con-banner {
  position: relative;
  top: -32px;
  left: 54px;
  font-weight: bold;
  font-size: 19px;
  background: #0d6efda3;
  background-size: contain;
  width: 50%;
  text-align: center;
  border-radius: 11px;
  box-shadow: -1px -2px 0px 0px !important;
  color: white;
}

.cocofonti {
  width: 73% !important;
  text-align: center !important;
  right: -52px !important;
  background: #ffefd569 !important;
}

.card-categoriza {
  width: 300px !important;
  /* Fija el ancho de la tarjeta */
  height: 387px !important;
  /* Fija la altura de la tarjeta */
  display: flex !important;
  flex-direction: column !important;
}

.FsDk-body-categorias {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
}

.f-de-coco {
  font-size: 1rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mega-coco-enrollao-xd {
  width: 100% !important;
  height: 211px !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 50px !important;
  left: 0 !important;
}
.alert {
  font-size: 0.875rem !important;
  width: 100% !important;
  height: 80px !important;
  position: relative;
  bottom: 60px !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  top: -22px;
}
.botonazo {
  flex: 1 !important;
  margin: 2px !important;
}

.d-flex {
  margin-top: auto !important;
}

body {
  background: #e3e6e6;
}

.laDescripcionDe_coco {
  font-size: 1px;
  color: #e3e6e6;
}

#mega-menu-wrap-primary #mega-menu-primary {
  text-align: center;
  padding: 0px 0px 0px 0px;
  background: #c31324;
}

/* Archivo: style.css o en la sección <style> de tu archivo header.php */

#search-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
  font-size: 13px !important;
  height: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#search-popup::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#search-popup {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#search-popup #search-results {
  width: 74%;
}

/* Responsiveness for search container */
@media (max-width: 768px) {
  .search-container .form-group {
    width: 100%;
    padding: 0 15px;
  }

  .search-container .form-control {
    width: 100%;
  }
}

/* Specific adjustments for small devices */
@media (max-width: 576px) {
  #search-popup {
    max-width: 95%;
    padding: 10px;
    top: 82%;
    position: absolute;
  }

  #search-popup #search-results {
    width: 100%;
  }
}

.p-color,
.FsDk_coco_y_los_chollos_de_ofertas {
  color: #3d3d3d;
  font-size: 25px;
}

.cargandobuscador {
  color: green !important;
}

.textocargandobuscador {
  color: black !important;
}

.reactions-container {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  margin-top: 2px;
}

.button_like {
  background: #0057b39a;
}

.button_dislike {
  background: #f8250574;
}

.additional-buttons {
  position: sticky;
  top: 20px;
  margin-left: unset;
  width: auto !important;
}

.additional-buttons .btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  transition: background-color 0.3s ease;
}

.additional-buttons .btn-primary {
  background-color: #007bff;
}

.additional-buttons .btn-info {
  background-color: #17a2b8;
}

.additional-buttons .btn-warning {
  background-color: #db5229;
}

.additional-buttons .btn:hover {
  opacity: 0.9;
  transform: scale(1.1);
}

/* Estilos para los comentarios */
.comments-container {
  margin-top: 40px;
}

.comments-container h3 {
  margin-bottom: 20px;
  font-size: 1.5em;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

ul.comment-list {
  list-style-type: none;
  padding-left: 0;
}

.comment-list li {
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
  display: flex;
  align-items: flex-start;
}

.comment-list .comment-avatar {
  margin-right: 15px;
  border-radius: 50%;
}

.comment-list .comment-author {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 5px;
}

.comment-list .comment-date {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 10px;
}

.comment-list .comment-text {
  margin-top: 10px;
}

.comment-form {
  margin-top: 40px;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.comment-form .btn-primary {
  background-color: #007bff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.comment-form .btn-primary:hover {
  background-color: #0056b3;
}

.additional-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.additional-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .additional-buttons {
    align-items: center;
    flex-direction: row;
    gap: 5px;
  }
}

.comment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px 12px;
  font-size: 18px;
}

.comment-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #ff4757;
  /* Color de fondo para el número */
  color: white;
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 12px;
  /* Tamaño más pequeño que el icono */
  font-weight: bold;
  line-height: 1;
  min-width: 18px;
  text-align: center;
}

.post-meta {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
  color: #666;
}

.meta-item {
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.author-meta img {
  border-radius: 50%;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .post-meta {
    text-align: center;
  }

  .meta-item {
    display: block;
    margin: 5px 0;
  }
}

img.avatar.avatar-50.photo {
  width: 100%;
  height: 30px;
}

.contenedor-de-coco {
  width: auto;
}

/* Estilos adicionales para mejorar la responsividad */
@media (max-width: 768px) {
  .container-fluid h1 {
    font-size: 24px;
    text-align: center;
  }

  .row div {
    margin-bottom: -9px;
  }
}

@media (max-width: 1024px) {
  .container h1 {
    font-size: 28px;
  }

  .row {
    flex-wrap: wrap;
  }
}

.additional-buttons {
  display: flex;
  gap: 10px;
  margin-top: 3%;
  justify-content: space-evenly;
  align-items: flex-end;
}

.comment-icon-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Responsividad */
@media (max-width: 768px) {
  .additional-buttons {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
}

.maquetasion-fsdk {
  display: flex;
  width: auto;
  margin-right: 69%;
}
.gokuOferta {
  position: relative;
  display: flex;
  justify-content: center;
}
.fsdkpeleajpg {
  width: auto;
  height: 200px;
  margin-left: 52px;
}

/* Contenedor principal */
.row.fsdkbanner {
  display: flex !important;
  flex-wrap: wrap !important; /* Ajuste de elementos en múltiples filas */
  gap: 15px !important; /* Espaciado entre elementos */
  justify-content: center !important; /* Centrado horizontal */
  padding: 10px !important;
  margin: 0 auto !important;
}

/* Cada columna */

.col-md-3 {
  flex: 1 1 calc(1% - 15px) !important;
  max-width: calc(100% - 15px) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  text-align: center !important;
}

/* Imágenes redondas */
.fsdkpeleajpg {
  width: 100% !important; /* Imagen al 100% del contenedor */
  max-width: 80px !important; /* Tamaño máximo de las imágenes (pequeño como iconos) */
  height: 80px !important; /* Tamaño fijo para hacerlas redondas */
  object-fit: cover !important; /* Ajuste proporcional */
  border-radius: 50% !important; /* Redondeo de las imágenes */
  margin: 0 auto !important; /* Centrado vertical */
}

/* Botones */
#gokuOferta .btn {
  display: block !important;
  margin: 5px auto !important;
  font-size: 0.9rem !important; /* Tamaño de fuente más pequeño */
  text-align: center !important;
  padding: 5px !important;
  border-radius: 5px !important;
}

/* Botón de precio */
#precio-banner {
  background: #28a745 !important; /* Verde */
  color: #ffffff !important;
}

/* Botón de descuento */
#descuento-banner {
  background: #dc3545 !important; /* Rojo */
  color: #ffffff !important;
}

/* Media Queries */
@media (max-width: 992px) {
  .col-md-3 {
    flex: 1 1 calc(10% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }
}

@media (max-width: 576px) {
  .col-md-3 {
    flex: 1 1 calc(25% - 10px) !important; /* Ocupa el 25% para mostrar 4 elementos */
    max-width: calc(25% - 10px) !important;
  }

  .col-md-3 {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}
.bannerpost {
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.fsdk-md-3 {
  flex: 1 1 calc(1% - 15px) !important;
  max-width: calc(100% - 15px) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  text-align: center !important;
}

.card-img-top-cats {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  top: 65px;
  left: 68px;
}

.site-header {
  background-color: #f8f9fa; /* Cambia el color de fondo si lo deseas */
  border-bottom: 1px solid #e9ecef; /* Línea inferior opcional */
}

.site-header .logo img {
  max-width: 100%; /* Asegura que el logo sea responsivo */
  height: auto;
}

.site-header .site-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}

.site-header .site-description {
  font-size: 1rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

/* Estilo para la barra lateral */
.sidebar {
  border: 1px solid #ddd;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

.sidebar h3,
.sidebar h4 {
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  margin-bottom: 10px;
}

.sidebar ul li a {
  color: #007bff;
  text-decoration: none;
}

.sidebar ul li a:hover {
  text-decoration: underline;
  color: #0056b3;
}

/* Estilo para las tarjetas */

/* Estilo para las tarjetas */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

/* Contenedor de la imagen */
.card-img-top {
  width: 100%;
  height: 200px; /* Altura fija para mantener uniformidad */
  object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente */
  background-color: #f8f9fa; /* Fondo para casos de imágenes sin carga */
}

/* Títulos de las tarjetas */
.card-title {
  font-size: 1rem;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 40px; /* Asegura espacio consistente para el título */
  overflow: hidden; /* Oculta texto que exceda */
  text-overflow: ellipsis; /* Agrega "..." al exceder el espacio */
  white-space: nowrap; /* Evita que el texto ocupe más de una línea */
}

.card-title a {
  text-decoration: none;
  color: #333;
}

.card-title a:hover {
  color: #007bff;
}

/* Respuesta a diferentes tamaños de pantalla */
@media (max-width: 768px) {
  .card-img-top {
    height: 180px; /* Ajusta la altura en pantallas más pequeñas */
  }
}

@media (max-width: 576px) {
  .card-img-top {
    height: 150px; /* Ajusta la altura en pantallas más pequeñas */
  }
}

.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #f8f9fa;
}

.card-title {
  font-size: 1rem;
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-title a {
  text-decoration: none;
  color: #333;
}

.card-title a:hover {
  color: #007bff;
}

/* Paginación */
.pagination {
  margin-top: 20px;
}

.pagination .page-numbers {
  color: #1e2f41;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ddd;
  margin: 0 5px;
  border-radius: 5px;
}

.pagination .page-numbers:hover {
  background-color: #007bff;
  color: #fff;
}

#price-slider {
  margin: 20px 0;
  height: 5px;
  background: #ddd;
  border-radius: 5px;
  position: relative;
}

.noUi-connect {
  background: #007bff;
}

.card-title a {
  text-decoration: none;
  color: #333;
  background: #cfe2ff4a !important;
}