@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&family=Rubik+Glitch&display=swap');
body {background-color: #131313;}
.navbar-nav { color: white;
    font-family: "Lucida Console", sans-serif;
    margin: 1px; 
    padding: 1px; }
.navbar-nav .nav-link:hover { 
    color: red; 
    outline: solid yellow 1px;
    transition: all 0.3s ease;}

h1,h2,h3,h4,h5 {
    color: white;
    font-family: "Protest Guerrilla",serif;
    text-shadow: 3px 3px 3px black;
    transition: all 0.3s ease;

    }
p { color: white;
    font-family: "Lucida Console", sans-serif;
    }
.parrafo { color:gray;
    font-family: "Lucida Console", sans-serif;
    }
img { max-width: 100%;}

section { border: solid white 1px;
    padding: 100px;
    margin-top: 150px;
    border-radius: 15px;
    }

a {text-decoration: none;}

.volver { color: white;
    border: solid white 1px;
    padding: 3px 10px;
    margin-top: 15px;
}  
.volver:hover { color: red; 
    border: solid yellow 1px;
    padding: 3px 10px;
}

.modal-content { background-color:  #343a40;
    font-family: "Lucida Console", sans-serif;
}
.btn-secondary { border: solid white 1px;
background-color: transparent; 
}
.btn-secondary:hover { background-color: transparent;
    border: solid yellow 1px;
color: red;
}


.custom-bg1, .custom-bg2, .custom-bg3, .custom-bg4, .custom-bg5, .custom-bg6, .custom-bg7, .custom-bg8 {
        position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
        overflow: hidden; /* Para que la imagen no salga del contenedor */
        color: white; /* Cambia el color del texto si es necesario */
    }
.custom-bg1::before {
        content: "";
        background-image: url(img/banner1.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }
    
.custom-bg2::before {
        content: "";
        background-image: url(img/banner2.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }
    
.custom-bg3::before {
        content: "";
        background-image: url(img/banner3.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }

.custom-bg4::before {
        content: "";
        background-image: url(img/banner4.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }

.custom-bg5::before {
        content: "";
        background-image: url(img/banner5.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }

.custom-bg6::before {
        content: "";
        background-image: url(img/banner6.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }

.custom-bg7::before {
        content: "";
        background-image: url(img/banner7.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }

    .custom-bg8::before {
        content: "";
        background-image: url(img/banner8.png); /* Reemplaza con la URL de tu imagen */
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Controla la opacidad de la imagen */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0; /* La imagen quedará detrás del contenido */
    }

    /* Asegurando que el contenido esté en frente */
.custom-bg1 > *,
.custom-bg2 > *,
.custom-bg3 > *,
.custom-bg4 > *,
.custom-bg5 > *,
.custom-bg6 > *,
.custom-bg7 > *,
.custom-bg8 > * {
    position: relative; /* Mantiene el contenido en su posición original */
    z-index: 1; } /* Asegura que el contenido esté por encima del pseudo-elemento */

.custom-bg1:hover::before,
.custom-bg2:hover::before,
.custom-bg3:hover::before,
.custom-bg4:hover::before,
.custom-bg5:hover::before,
.custom-bg6:hover::before,
.custom-bg7:hover::before,
.custom-bg8:hover::before {
        opacity: 1; /* Cambia la opacidad a un valor menor en hover */
        transition: opacity 0.3s ease-in-out;
    }

/* Esto activa el cambio de color en el h1 al hacer hover solo en el fondo correspondiente */
.custom-bg1:hover a h1,
.custom-bg2:hover a h1,
.custom-bg3:hover a h1,
.custom-bg4:hover a h1,
.custom-bg5:hover a h1,
.custom-bg6:hover a h1,
.custom-bg7:hover a h1,
.custom-bg8:hover a h1 {
    color: yellow; /* Cambia el color del h1 al hacer hover sobre el fondo */
    font-size: 4rem;
    transition: all 0.3s ease;}
.custom-carousel {
    max-width: 1200px; /* Ancho máximo del carrusel */
    max-height: 600px; /* Altura máxima del carrusel */
    margin: 0 auto; /* Centrar horizontalmente */
}
.custom-carousel .carousel-inner img {
    object-fit: contain; /* Ajusta cómo se muestra la imagen */
    height: 600px; /* Ajusta la altura de las imágenes */
}

.card {background-color: transparent;
border: solid white 1px;}
.col-md-4 img {
    object-fit: cover; /* Hace que la imagen cubra toda el área de la columna */
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho de la columna */
    height: 100%; /* Asegura que la imagen ocupe el 100% del alto de la columna */
  }
.custom-hover img:hover { 
    opacity: 0.5;
    cursor: pointer; 
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: black;
  opacity: 0.8;
  width: 50px;
  height: 50px; 
}

.accordion-item, .accordion-button, .accordion-body, .accordion-button:not(.collapsed) {
  background-color: #131313;
  font-family: "Lucida Console", sans-serif;
  color: white;
  border: 1px solid white;
}
.accordion-button.collapsed, .accordion-button:not(.collapsed) { padding: 16px 20px; }

.accordion-button:hover { color: yellow;
    transition: all 0.3s ease-in-out;

}

.card-img-top {
    width: 100%; /* Ajusta el ancho al contenedor */
    height: 200px; /* Define una altura fija */
    object-fit: cover; /* Asegura que las imágenes no se deformen */
  }

  .banner { 
   
    background-image: url(img/mainbanner.png);
    background-size: cover;
    background-position: center;
    height: 400px; 
  }
  .banner-text { font-family: "Rubik Glitch", system-ui;
    font-weight: 400;
    font-style: normal;
    opacity: 0.6;
    font-size: 15em;
  }
  
@media (max-width: 768px) {
  .banner-text {
    font-size: 8rem; 
  }
}

@media (max-width: 576px) {
  .banner-text {
    font-size: 6rem;
  }
}