/* Banner principal con imagen de fondo */
.banner-area {
  position: relative;
  background: url("../images/todogoma frente.jpeg") no-repeat center center;
  background-size: 85%;
  background-position: center 35%;
  padding: 120px 0; /* Ajusta según altura deseada */
  color: #fff; /* Texto blanco para contraste */
  overflow: hidden;
}

/* Overlay oscuro para que la imagen no sea muy brillante */
.banner-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Ajusta la opacidad a gusto */
  z-index: 1;
}

/* Contenido dentro del banner (texto, nav, etc.) */
.banner-area .breadcrumb-banner {
  position: relative;
  z-index: 2; /* Para que quede encima del overlay */
}

/* Logo dentro del contenido (opcional) */
#banner-logo {
  max-width: 150px; /* Ajusta tamaño */
  margin-bottom: 15px;
  display: block;
}

/* Efecto sutil al pasar el mouse */
.banner-area:hover::before {
  background: rgba(0, 0, 0, 0.35); /* Un poco más claro al hover */
  transition: background 0.3s ease;
}