/* css de wappi market */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap');


.categoriesswiper {
  flex-wrap: wrap;
  flex-direction: column;
  width: auto;
  white-space: nowrap;
  display: flex;
}

.swiper-wrapper {
  flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.category-card {
  flex: 0 0 auto;
  width: 120px;
  text-align: center;
  background-color: #e0e0e0;
  border-radius: 8px;
  margin: 5px;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}


.category-image {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 8px;
}

.category-card:hover {
background-color: #ccc;
}


.card-body {
    position: absolute;
}

.small-image-bottom-left {
    position: relative;
    top: -42px;
    left: -11px;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.additional-details {
    position: absolute;
    margin: 0px;
}

.text-enfrente {
    position: relative;
    top: -66px;
    left: 27px;
    color: black; /* Ajusta el color del texto según tus necesidades */
    font-size: 16px; /* Ajusta el tamaño de la fuente según tus necesidades */
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; /* Añade un contorno blanco alrededor del texto */
    font-weight: bold; /* Hace el texto en negrita */   
}

.fixed-section {
    position: fixed;
    height: 200vh;
    border-right: 1px solid #ddd; /* Añade un borde a la derecha para separar las secciones */
}

.conteiner-productos {
position: relative;
overflow: hidden;
}

.conteiner-productos {
position: relative;
overflow: hidden;
}


#menu-container {
border-right: 1px solid #ddd; /* Agrega un borde a la derecha para separar visualmente las secciones */
}

/* Ajusta el espacio inferior según sea necesario */
#container_companys {
margin-bottom: 20px;
}

/* Ajusta el espacio entre los elementos del menú */
.menu-item {
margin-bottom: 10px;
}

.round-icon {
width: 80px; /* Ajusta el ancho según sea necesario */
height: 80px; /* Ajusta la altura según sea necesario */
border-radius: 50%; /* Hace que la imagen sea redonda */
margin-right: 10px; /* Ajusta el margen derecho según sea necesario para separar la imagen del texto */
}

.text-content {
display: inline-block; /* Permite que el contenido de texto fluya junto a la imagen */
vertical-align: middle; /* Alinea el texto verticalmente en el centro de la imagen */
line-height: 22px; /* Ajusta la altura de línea para centrar el texto verticalmente */
margin-right: 0; /* Elimina el margen derecho para que no haya separación entre la imagen y el texto */
font-size: 22px;
}


section {
    display: flex;
    height: 100vh;
}

.menu {
    width: 25%;
    background-color: #007bff;
    color: #fff;
    padding: 5px;
}

.contenido {
    flex: 1;
    padding: 0px;
    overflow-y: auto;
}

#container_companys {
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
}

.menu h5 {
    margin-bottom: 10px;
    margin: 0px;
    padding: 0px;
    text-align: left;
}


.contenido p {
    margin-bottom: 10px;
}

@media only screen and (max-width : 900px) {
    .menu h5 {
        font-size: 15px;
    }

  .text-enfrente{
    font-size: 13px;
  }
  .cursorpointer{
    font-size: 10px;
  }
  .tex-recortar {
    width: 20ch;
 }
  .position-relative{
    margin: 0px;
    padding: 0px;
  }

  .category-card {
    flex: 0 0 auto;
    width: 100px;
    text-align: center;
    background-color: #e0e0e0;
    border-radius: 8px;
    margin: 5px;
    padding: 5px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
  }
  
  .category-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: px;
}

}
  .slider-container {
    overflow: hidden;
  }
  
  .slider2 {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .slider2 img {
    width: 50%; /* Se ajusta al 50% del ancho en pantallas grandes */
    height: auto;
    padding: 10px; /* Agrega un espacio entre las imágenes */
    border-radius: 15px;
  }
  
  @media (max-width: 768px) {
    .slider2 {
      flex-direction: row;
      width: 100%; /* Ajusta el ancho al 100% para mostrar solo una imagen */
    }
  
    .slider2 img {
      width: 100%; /* Ocupa el 100% del ancho en dispositivos móviles */
      margin-right: 0; /* Elimina el espacio entre las imágenes en dispositivos móviles */
      padding: 5px;
    }
  }
  
 
  .icono-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    cursor: pointer;
    z-index: 99; /* Ajusta esto según sea necesario para que el icono esté sobre otros elementos */
}

/* Estilos para el icono */
.icono-container img {
    width: 67px; /* Ajusta el tamaño del icono según tus necesidades */
    height: auto;
}