.img-container {
  overflow: hidden;
}



.newsletter {
  position: relative;
  top: 150px;
  width: 100%;
  height: 0;
  -webkit-transition: top 0.5s;
  transition: top 0.5s;
}

.img-container:hover .newsletter {
  top: -80px;
}

.product_container {
  overflow: hidden;
}

.addProduct {
  position: relative;

  top: 150px;
  width: 100%;

  -webkit-transition: top 0.5s;
  transition: top 0.5s;
}

.product_container:hover .addProduct {
  top: 10px;
}

.addProduct2 {
  position: relative;

  top: 100px;
  width: 100%;

  -webkit-transition: top 0.5s;
  transition: top 0.5s;
}

.product_container:hover .addProduct2 {
  top: -20px;
}

/* ---------------- Modificar los Bullets de swiper Beneficios -------------------- */
.beneficioRelative {
  position: relative;
}

.swiper-pagination-beneficios .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-beneficios .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

.swiper-pagination-beneficios.swiper-pagination-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1024px) {
  .swiper-pagination-beneficios.swiper-pagination-horizontal {
    --swiper-pagination-bottom: 670px;
    position: absolute;
    justify-content: start;
  }
}

/* Barras de scroll estilos */

.scroll__categorias::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}

.scroll__categorias::-webkit-scrollbar-thumb {
  background-color: #21201e;
  border-radius: 2rem;
}

/* -------- ------ */

/* ---------------- Modificar los Bullets de swiper Testimonios ------------------*/

/* .swiper-pagination-testimonios.swiper-pagination-horizontal {
    background-color: rgb(0, 0, 0);
    position: absolute;
  
    display: flex;
  
    justify-content: center;
    align-items: center;
  }
   */

/* ---------------categorias -------------------- */

.swiper-pagination-categorias.swiper-pagination-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  /*  position: absolute;
  
    left: -295px;
    --swiper-pagination-bottom: 670px; */
}

.swiper-pagination-categorias .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-categorias .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

/* 
  .categorias {
    position: relative;
  }
  
  .swiper-pagination-categorias.swiper-pagination-horizontal {
    position: absolute;
    display: flex;
    justify-content: left;
    align-items: center;
    top: 0 !important;
    left: 10px !important;
    bottom: 0 !important;
    height: 50px;
  
    padding-top: 10px;
  }
  
  .swiper-pagination-categorias
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: transparent;
    background-image: url(../images/svg/bullets.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
  }
  .swiper-pagination-categorias .swiper-pagination-bullet {
    background-color: #eb5d2c;
    opacity: 1;
  } */

/* ---destacados-- */

/* .swiper-pagination-productos-destacados.swiper-pagination-horizontal {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
   */

.productos-destacados {
  position: relative;
  /* height: 500px; */
}

.swiper-pagination-productos-destacados.swiper-pagination-horizontal {
  position: absolute;
  display: flex;
  justify-content: left;
  align-items: center;
  top: 0 !important;
  left: 10px !important;
  bottom: 0 !important;

  height: 50px;
}

.swiper-pagination-productos-destacados .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-productos-destacados .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

/* ----------------------- productos en oferta -------- */

/* .swiper-pagination-productos-oferta.swiper-pagination-horizontal {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  } */

.productos-oferta {
  position: relative;
}

.swiper-pagination-productos-oferta.swiper-pagination-horizontal {
  position: absolute;
  display: flex;
  justify-content: left;
  align-items: center;
  top: 0 !important;
  left: 10px !important;
  bottom: 0 !important;
  height: 50px;

  padding-top: 10px;
}

.swiper-pagination-productos-oferta .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-productos-oferta .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

/* ---------------------------------------------- */

/* ----------------------- testimonios -------- */

/* .swiper-pagination-productos-oferta.swiper-pagination-horizontal {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  } */

.myTestimonios {
  position: relative;
}

.swiper-pagination-testimonios.swiper-pagination-horizontal {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .swiper-pagination-testimonios.swiper-pagination-horizontal {
    justify-content: end;
    /* top: 0 !important; */
    /* right: 0 !important; */
    bottom: -20px !important;
    /* width: 200px !important; */
    width: 100%;
    /* padding-right: 5rem; */
    height: 50px;
    width: 100%;
    left: 60px !important;
  }
}

.swiper-pagination-testimonios .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-testimonios .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

/* ---------------------------------------------- */

/* radius color */
.background-radius {
  accent-color: black;
}

.swiper-pagination-productos.swiper-pagination-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-productos .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-productos .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

/* ---- */

.swiper-pagination-producto-catalogo.swiper-pagination-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* prueba */

.productos-complementarios {
  position: relative;
  /* height: 500px; */
}

.swiper-pagination-producto-complementario.swiper-pagination-horizontal {
  position: absolute;
  display: flex;
  justify-content: left;
  align-items: center;
  top: 0 !important;
  left: 10px !important;
  bottom: 0 !important;

  height: 50px;
}

.swiper-pagination-producto-complementario .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  background-image: url(../images/svg/bullets.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.swiper-pagination-producto-complementario .swiper-pagination-bullet {
  background-color: #eb5d2c;
  opacity: 1;
}

/* .swiper-pagination-producto-complementario.swiper-pagination-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
  } */

/* .swiper-pagination {
    --swiper-paginations-bottom: 600px;
    left: -530px;
    display: flex;
    align-items: center;
    overflow: auto;
  }
  
  .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: transparent;
    background-image: url(../images/svg/bullets.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
  }
  .swiper-pagination .swiper-pagination-bullet {
    background-color: black;
    opacity: 1;
  } */

/* ------ */
/* .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  background-color: #f7beab !important;
} */

/* select comentario */

.dropdown-comentario:hover .dropdown-menu-comentario {
  display: block;
}

/* select departamentoio */
.dropdown-departamento:hover .dropdown-menu-departamento {
  display: block;
}

/* bag - inicio  */

.bag {
  /* width: 600px; */
  background-color: white;
}

.bag__modal:checked+.bag {
  display: block;
}

.bag__modal {
  display: none;
}

/* .body {
    transition: background-color 0.3s ease-in-out; 
  }
  .body.dark {
    background-color: rgba(0, 0, 0, 0.5); 
  } */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Fondo oscuro semi-transparente */
  z-index: 50;
  /* Z-index superior para superponerse a otros elementos */
  display: none;
  /* Ocultar inicialmente */
}

.body.dark .overlay {
  display: block;
  /* Mostrar la superposición cuando el cuerpo está oscurecido */
}

/* --------------- modal direccion   ------------------- */

.modal-mostrar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111111bd;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s 0.9s;
  --transform: translateY(-100vh);
  --transition: transform 0.8s;
}

.modal--show {
  opacity: 1;
  pointer-events: unset;
  transition: opacity 0.6s;
  --transform: translateY(0);
  --transition: transform 0.8s 0.8s;
}

.modal__mostrar-info {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin: auto;
  width: 90%;
  max-width: 800px;
  max-height: 900px;
  background-color: #fff;

  padding: 20px;
  place-items: center;
  grid-auto-columns: 100%;
  transform: var(--transform);
  transition: var(--transition);

  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.modal__close-mostrar {
  display: inline-block;
}

/* ---------------- Corona circular ------------------------------ */
.circle-container {
  position: relative;
  display: flex;
  margin: 10px;
  width: 3rem;
  height: 3rem;
}

.circle {
  width: 3rem;
  height: 3rem;
  /*  background-color: #f9cca7; */
  border-radius: 50%;
}

/* Estilo para la corona */
.circle-container::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border: 3px solid transparent;
  border-radius: 50%;
  transition: border-color 0.3s ease-in-out;

  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  -ms-transition: border-color 0.3s ease-in-out;
  -o-transition: border-color 0.3s ease-in-out;
}

/* Al pasar el mouse sobre el contenedor */
.circle-container:hover::before {
  border-color: #151515;
  /* Color del borde al pasar el mouse */
}

/* - */

/* .swiper-wrapper-height {
    height: 350px !important;
  }
  
  .swiper-slide-flex {
    display: flex !important;
    justify-content: center;
    background-color: #f3f5f7;
  }
   */

/* -----------------modal filtro--------------- */

/* clase del modal oculto */
.modal-filtros {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111111bd;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s 0.9s;
  --transform: translateY(-100vh);
  --transition: transform 0.8s;
  -webkit-transition: opacity 0.6s 0.9s;
  -moz-transition: opacity 0.6s 0.9s;
  -ms-transition: opacity 0.6s 0.9s;
  -o-transition: opacity 0.6s 0.9s;
}

/* S le agregar cuando se da click en abri en modal */
.modal--show-filtro {
  opacity: 1;
  pointer-events: unset;
  transition: opacity 0.6s;
  --transform: translateY(0);
  --transition: transform 0.8s 0.8s;
}

/* Tamaño del elemento que esta dentr del modal */
.modal__mostrar-filtro {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin: auto;
  width: 90%;
  max-width: 600px;
  max-height: 90%;
  background-color: #fff;

  padding: 20px;
  place-items: center;
  grid-auto-columns: 100%;
  transform: var(--transform);
  transition: var(--transition);

  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

/* Cierra el modal */
.modal__close-filtro {
  display: inline-block;
}

/* scroll carrito */

.scroll__carrito::-webkit-scrollbar {
  width: 3px;
  background-color: #f1f1f1;
}

.scroll__carrito::-webkit-scrollbar-thumb {
  background-color: #151515;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

/* ---- */

.scroll-direccion::-webkit-scrollbar {
  width: 3px;
  background-color: #f1f1f1;
}

.scroll-direccion::-webkit-scrollbar-thumb {
  background-color: #151515;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}




/* -----------------CSS para menu sidebar--------------- */


a,
button {
  cursor: pointer;
}

.menu-list {
  position: absolute;
  top: 70px;
  right: 70px;
  width: 235px;
}

.navigation {
  position: fixed;
  left: -100%;
  width: 350px;
  height: 100%;
  background-color: #2d694b;
  transition: 0.5s;
}

.navigation ul li {
  color: #fff;
  text-align: left;
  text-transform: initial;
  list-style-type: none;
  font-size: 16px;
  /* padding: 10px 15px; */
  /* border-bottom: 1pt solid #252525; */
}

.bar {
  position: fixed;
}

.hamburger {
  margin-right: 30%;
  display: block;
  /* top: 5%;
        left: 95%; */
  width: 60px;
  height: 15px;
  transform: translateY(-50%);
  border: 0;
  background: 0 0;
}

#position {
  margin-top: 10%;
  margin-left: 85%;
}

.bar {
  top: 5px;
  background: black;
  width: 100%;
  height: 4px;
  transition: all 0.3s ease-in;
}

#bar2 {
  top: 12px;
}

#bar3 {
  top: 19px;
}

.navigation.active {
  left: 0;
}

.hamburger.open #bar1 {
  background-color: #fff;
  transform: rotate(45deg) translate(6px, 5px);
}

.hamburger.open #bar2 {
  background-color: transparent;
}

.hamburger.open #bar3 {
  background-color: #fff;
  transform: rotate(-45deg) translate(6px, -5px);
}

.banner_section {
  background-image: url("../img_donas/fondomovil2.png");
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.banner_section2 {
  background-image: url("../img_donas/Fondo-30_1.png");
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.js-example-tags-container ul {
  list-style: none;
  padding: 0;
}

.tag-selected {
  list-style: none;
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

.destroy-tag-selected {
  color: #999;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;

  &:hover {
    text-decoration: none;
  }
}

.select2-selection__choice {
  display: none;
}



.dropdown {
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1.5px solid white;
  /* padding: 16px 0; */
}

.input-box {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  outline: none;
  border-radius: 2mm;

  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  position: relative;
}

.input-box::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-down_1.svg);
}

.input-box.open::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-up_1.svg);
}

/* .input-box:empty::after {
    content: "Tipo de servicio";
    color: #96a1a6;
  } */
.list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /*height: fit-content;
    */
  /*background: #ffffff;
    */
  background: #ffffff;
  margin-top: 10px;
  border-radius: 2mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  max-height: 0;
  transition: 0.25s ease-out;
}

.list input {
  display: none;
}

.list label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;

  padding: 10px 15px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.list label .material-icons-outlined,
.input-box .material-icons-outlined {
  margin-right: 5px;
}

.list label:hover {
  background: #393f53;
}

input:checked+.comentar {
  color: white;
  background: #393f53;
}

.open {
  outline: none;
}

.title {
  margin-bottom: 10px;
}

.scroll-departamento::-webkit-scrollbar {
  width: 5px;
  background-color: #f1f1f1;
  border-radius: 1rem;
}

.scroll-departamento::-webkit-scrollbar-thumb {
  background-color: #393f53;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}




.dropdown-distrito {
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1.5px solid white;
  /* padding: 16px 0; */
}

.input-box-distrito {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  outline: none;
  border-radius: 2mm;

  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  position: relative;
}

.input-box-distrito::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-down_1.svg);
}

.input-box-distrito.open-distrito::before {
  content: "";

  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-up_1.svg);
}

/* .input-box:empty::after {
      content: "Tipo de servicio";
      color: #96a1a6;
    } */
.list-distrito {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /*height: fit-content;
      */
  /*background: #ffffff;
      */
  background: #ffffff;
  margin-top: 10px;
  border-radius: 2mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  max-height: 0;
  transition: 0.25s ease-out;
}

.list-distrito input {
  display: none;
}

.list-distrito label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;

  padding: 10px 15px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.list-distrito label .material-icons-outlined,
.input-box-distrito .material-icons-outlined {
  margin-right: 5px;
}

.list-distrito label:hover {
  background: #393f53;
}

/* Selecciona el item que esta en el combo */
input:checked+.distrito {
  color: white;
  background: #393f53;
}

.open-distrito {
  outline: none;
}

.title-distrito {
  margin-bottom: 10px;
}

.scroll-distrito::-webkit-scrollbar {
  width: 5px;
  background-color: #f1f1f1;
  border-radius: 1rem;
}

.scroll-distrito::-webkit-scrollbar-thumb {
  background-color: #393f53;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}




.dropdown-provincia {
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1.5px solid white;
  /* padding: 16px 0; */
}

.input-box-provincia {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  outline: none;
  border-radius: 2mm;

  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  position: relative;
}

.input-box-provincia::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-down_1.svg);
}

.input-box-provincia.open-provincia::before {
  content: "";

  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-up_1.svg);
}

/* .input-box:empty::after {
    content: "Tipo de servicio";
    color: #96a1a6;
  } */
.list-provincia {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /*height: fit-content;
    */
  /*background: #ffffff;
    */
  background: #ffffff;
  margin-top: 10px;
  border-radius: 2mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  max-height: 0;
  transition: 0.25s ease-out;
}

.list-provincia input {
  display: none;
}

.list-provincia label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;

  padding: 10px 15px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.list-provincia label .material-icons-outlined,
.input-box-provincia .material-icons-outlined {
  margin-right: 5px;
}

.list-provincia label:hover {
  background: #393f53;
}

/* Selecciona el item que esta en el combo */
input:checked+.provincia {
  color: white;
  background: #393f53;
}

.open-provincia {
  outline: none;
}

.title-provincia {
  margin-bottom: 10px;
}

.scroll-provincia::-webkit-scrollbar {
  width: 5px;
  background-color: #f1f1f1;
  border-radius: 1rem;
}

.scroll-provincia::-webkit-scrollbar-thumb {
  background-color: #393f53;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}



.dropdown {
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1.5px solid white;
  /* padding: 16px 0; */
}

.input-box {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  outline: none;
  border-radius: 2mm;

  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  position: relative;
}

.input-box::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-down_1.svg);
}

.input-box.open::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-up_1.svg);
}

/* .input-box:empty::after {
  content: "Tipo de servicio";
  color: #96a1a6;
} */
.list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /*height: fit-content;
  */
  /*background: #ffffff;
  */
  background: #ffffff;
  margin-top: 10px;
  border-radius: 2mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  max-height: 0;
  transition: 0.25s ease-out;
}

.list input {
  display: none;
}

.list label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;

  padding: 10px 15px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.list label .material-icons-outlined,
.input-box .material-icons-outlined {
  margin-right: 5px;
}

.list label:hover {
  background: #393f53;
}

/* Selecciona el item que esta en el combo */
input:checked+.departamento {
  color: white;
  background: #393f53;
}

.open {
  outline: none;
}

.title {
  margin-bottom: 10px;
}

.scroll-departamento::-webkit-scrollbar {
  width: 5px;
  background-color: #f1f1f1;
  border-radius: 1rem;
}

.scroll-departamento::-webkit-scrollbar-thumb {
  background-color: #393f53;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

/*------------------ dropdown.css ------------------------*/

.dropdown {
  height: fit-content;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1.5px solid white;

}

.input-box {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  outline: none;
  border-radius: 2mm;

  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  position: relative;
}

.input-box::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-down.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* corregir este bug  */
.input-box.open::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/chevron-up.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* .input-box:empty::after {
      content: "Tipo de servicio";
      color: #96a1a6;
    } */
.list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  /*height: fit-content;
      */
  /*background: #ffffff;
      */
  background: #ffffff;
  margin-top: 10px;
  border-radius: 2mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  max-height: 0;
  transition: 0.25s ease-out;
}

.list input {
  display: none;
}

.list label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;

  padding: 10px 15px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

.list label .material-icons-outlined,
.input-box .material-icons-outlined {
  margin-right: 5px;
}

.list label:hover {
  background: #393f53;
}

input:checked+.ordenar {
  color: white;
  background: #393f53;
}

.open {
  outline: none;
}

.title {
  margin-bottom: 10px;
}

.scroll-departamento::-webkit-scrollbar {
  width: 5px;
  background-color: #f1f1f1;
}

.scroll-departamento::-webkit-scrollbar-thumb {
  background-color: #393f53;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

@font-face {
  font-family: "PlusJakartaSans-Regular";
  src: url("/fonts/PlusJakartaSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "PlusJakartaSans-Bold";
  src: url("/fonts/PlusJakartaSans-Bold.woff") format("woff");
}



#gift-icon {
  display: none;
  position: absolute;
  transition: all .25s;
  transform: translate(-50%, -50%);
}

#gift-icon::before {
  content: "\f06b";
  height: 20px;
  width: 20px;
  font-size: xx-large;
}

.send-to-cart {
  z-index: 999999;
  display: block !important;
  animation: xAxis 1s forwards cubic-bezier(1.000, 0.440, 0.840, 0.165);
}
.send-to-cart::before {
  animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.shake {
  animation: shakeCart .4s ease-in-out forwards;
}

@keyframes shakeCart {
  25% {
    transform: translateX(6px)
  }

  50% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(2px);
  }

  100% {
    transform: translateX(0);
  }
}