#tienda {
    background-color: #f0f4f2;
    }

.item {
    width: auto;
    height: 280px;

}

#tienda {
    color: #266F43!important;
}

#tiendalogo {
    width: auto;
    height: 80px;
    margin-left: 10px;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%);
}

.custom-btn {
    background-color: #1d6429; /* Color de fondo */
    color: #ffffff; /* Color del texto */
    border: 2px solid #1d6429; /* Borde */
    border-radius: 25px; /* Radio de borde */
    padding: 10px 20px; /* Relleno */
    font-size: 18px; /* Tamaño de fuente */
    transition: all 0.3s ease-in-out; /* Transición suave al pasar el cursor */
  }

  .custom-btn:hover {
    background-color: #ffffff; /* Color de fondo al pasar el cursor */
    color: #1d6429; /* Color del texto al pasar el cursor */
    border-color: #1d6429; 
  }

  .item-info {
    visibility: hidden; /* Inicialmente la ventana es invisible */
    opacity: 0;
    position: absolute;
    top: -10%; /* Ajusta la distancia desde la parte superior */
    left: 50%; /* Alinear en el centro horizontalmente */
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    color: #1d6429; /* Cambia el color del texto a negro */
    box-shadow: 0 0 10px rgba(29, 100, 41, 0.3); /* Sombra suave */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Transición suave */
  }

  /* Mostrar la información al pasar el cursor sobre la imagen */
  .item:hover + .item-info {
    visibility: visible; /* Hacer la ventana visible al pasar el ratón */
    opacity: 1;
    transition-delay: 0.1s; /* Añadir un pequeño retraso */
  }

 #lapicero {
  height: 200px;
  position: relative; /* Asegúrate de que tenga una posición relativa o absoluta */
  top: -50px; /* Puedes ajustar este valor según lo necesites */
}