/* Dentro de custom.css */
@media (max-width: 767px) {
    .custom-logo-hero {
        max-width: 200px;
        height: auto;
    }
    .text-8 {
        font-size: 1.5rem !important;
    }
}
.custom-hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh; /* O la altura que desees para que se vea bien en móviles */
    display: flex;
    align-items: center;
}
/* Desktop por defecto */
.custom-event-text p {
  color: white;
  font-size: 1.2rem; /* tamaño normal */
}

.moonshot-logo {
  max-width: 200px; /* tamaño normal del logo */
}

/* Responsive: pantallas pequeñas */
@media (max-width: 768px) {
  .custom-event-text p {
    color: black !important; /* fuerza el color negro */
    font-size: 0.9rem;       /* letras más pequeñas en mobile */
  }

  .moonshot-logo {
    max-width: 120px; /* logo más pequeño en mobile */
  }
}
/* Espaciado entre secciones */
#venue {
  margin-bottom: 4rem; /* separación clara */
}

#sponsors {
  margin-top: 4rem; /* evita que quede detrás */
}

/* Imagen del evento */
.venue-img {
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Caja de información */
.custom-venue-info {
  background: #fff; /* opcional */
  padding: 0;
  border-radius: 8px;
}

/* Logos de sponsors */
.sponsor-logo {
  max-height: 100px;
  width: auto;