/* General Settings */
/* Personalización de la barra de scroll */
::-webkit-scrollbar {
  width: 8px; /* Ancho de la barra de scroll */
  height: 8px; /* Altura de la barra de scroll (para desplazamiento horizontal) */
}

::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);
 /* Fondo de la barra */
  border-radius: 10px; /* Bordes redondeados */
}

::-webkit-scrollbar-thumb {
  background: #888; /* Color del "thumb" (parte móvil) */
  border-radius: 10px; /* Bordes redondeados */
  transition: background 0.3s ease; /* Transición para un efecto suave */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color del "thumb" al pasar el mouse por encima */
}

/* Para navegadores que no soportan WebKit */
.scrollbar {
  scrollbar-width: thin; /* Estilo de barra más delgada (Firefox) */
  scrollbar-color: #888 #f1f1f1; /* Color del thumb y track (Firefox) */
}
html {
  scroll-behavior: smooth; /* Suaviza el desplazamiento */
}


body {
  background-image: url(../imagen/FONDO1.png);
  background-size: cover;
  background-attachment: fixed;

}
#cabecera {
  display: flex; /* Usar flexbox para organizar los elementos */
  align-items: center; /* Centra verticalmente los elementos */
  justify-content: space-between; /* Asegura espacio entre el logo y el texto */
  background: linear-gradient(190deg, #414743, #1C2023);
  padding: 20px;
  color: #f7ad53;
}

#logo {
  display: flex;
  align-items: center; /* Centra verticalmente el logo */
  justify-content: flex-start; /* Alinea a la izquierda */
}

#logo img {
  margin-right: 20px; /* Espacio entre la imagen y el texto del logo */
}

#cabecera h1 {
  font-family: "The Army Of God", sans-serif;
  font-size: 55px;
  text-align: center; /* Centra el texto dentro del contenedor de texto */
  margin: 0; /* Elimina márgenes */
  flex-grow: 1; /* Hace que el texto ocupe el espacio restante */
}

#cabecera h2 {
  font-family: "Agency FB", sans-serif;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
  #cabecera {
    flex-direction: column; /* Cambia la disposición a columna */
    align-items: center; /* Centra todo horizontalmente */
  }

  #logo {
    justify-content: center; /* Centra el logo en pantallas pequeñas */
    margin-bottom: 10px; /* Espacio inferior entre el logo y el texto */
  }

  #cabecera h1 {
    text-align: center;
    flex-grow: 0; /* Elimina el comportamiento de expansión */
  }
}
.resaltar {
  margin: 0; /* Elimina márgenes */
  text-align: center; /* Alineación a la izquierda */

}



/* Cambiar el color de fondo del botón */
.custom-bg-color {
  background-color: #ffffff; /* Color de fondo personalizado */
}

/* Cambiar color de las líneas del icono */
.navbar-toggler-icon {
  background-color: transparent; /* Hacer el fondo del icono transparente */
}

/* Personalizar las barras del ícono */
.navbar-toggler-icon::before, 
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
  background-color: #ff0000; /* Color de las líneas */
}

/* Si quieres personalizar el grosor de las líneas, también puedes hacerlo */
.navbar-toggler-icon::before, 
.navbar-toggler-icon::after {
  height: 1px; /* Grosor de las líneas */
}






.navbar{
  background: #1C2023;
  
  font-family:"Agency FB";
  font-size: 23px;
  font-weight: bold;
}

.navbar li a {
  background-color:#1C2023;
  color: #f7ad53;

  text-decoration:none;
  padding:10px 15px;
  display:block;
  

}
.navbar li a:hover{
  background-color:#fdfbff;
 color: black;
 border-radius: 10px;


}

.navbar > li{
  float:left;
}

.navbar li ul{
  display: none;
  position: absolute;
  min-width: 140px;
}

.navbar li:hover> ul{
display:block;
}
/* Motivational Images */
#motivacion, #motivacion3 {
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.navbar-toggler{
  color: white;
}
#Video {
  border-radius: 15px;
 margin-left: -55px;
  width: 90vw; /* Ancho completo de la ventana */
  height:75vh; /* Alto completo de la ventana */
  object-fit: cover; /* Asegura que el video cubra el área sin distorsionarse */
  max-height: 100%; /* Asegura que no exceda la altura del contenedor */
  border: 4px solid #ffffff; /* Borde */

}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
  #Video {
      width: 100%; /* Ancho completo en pantallas pequeñas */
      height: auto; /* Altura automática para mantener la relación de aspecto */
      margin-left: 0; /* Elimina el margen izquierdo en pantallas pequeñas */
      border-radius: 15px; /* Elimina el borde redondeado si es necesario */
      border: 4px solid #ffffff; /* Borde */
  }
}
#motivacion {
  background-color: rgb(255, 251, 0); /* Fondo amarillo */
  padding: 20px; /* Espacio interno para que la imagen no esté pegada al borde */
  font-size: 20px;
  font-family: "Agency FB", sans-serif;
  font-weight: bold;
  text-align: justify;
  color: black;
  border-radius: 20px; /* Bordes redondeados opcionales */

}

#QueEncontraras {
  background-color: black; /* Fondo negro */
  color: white; /* Color del texto blanco para contraste */
  padding: 20px; /* Espacio interno para que la imagen no esté pegada al borde */
  font-size: 20px;
  font-family: "Agency FB", sans-serif;
  font-weight: bold;
  text-align: justify;
  border-radius: 20px; /* Bordes redondeados opcionales */

  
}

.section-container {
  display: flex;
  flex-direction: column; /* Apila la imagen sobre el texto */
  align-items: center; /* Centra todo horizontalmente */
}

.section-container img {
  width: 300px; /* Ancho fijo */
  height: 300px; /* Altura fija para que sea igual al ancho */
  border-radius: 100%; /* Forma completamente redonda */
  margin-bottom: 20px; /* Espacio inferior para separar la imagen del texto */
  object-fit: cover; /* Asegura que la imagen se recorte correctamente dentro del círculo */
  border: 4px solid #ffffff; /* Borde */
}

.section-container p {
  max-width: 80%; /* Limita el ancho del texto */
  text-align: center; /* Centra el texto */
  margin: 0 auto; /* Centrado horizontalmente */
}

#inspiracion {
  background-color: rgb(255, 251, 0); /* Fondo amarillo */
  color: black;
  padding: 20px; /* Espacio interno para la sección */
  font-size: 20px;
  font-family: "Agency FB", sans-serif;
  font-weight: bold;
  text-align: justify;
  border-radius: 20px; /* Bordes redondeados opcionales */

}


.d-flex {
  display: flex;
  flex-direction: column; /* Cambiar a diseño en columna */
  align-items: center; /* Centrar elementos horizontalmente */
}

.video-container video {
  max-height: 300px; /* Limitar la altura máxima del video */
  border-radius: 100%; /* Bordes redondeados */
  margin: 0 auto 20px auto; /* Centrado con margen inferior */
  width: 100%; /* Ancho completo en pantallas pequeñas */
  height: auto; /* Mantener la relación de aspecto */
  border: 4px solid #ffffff; /* Borde */
}

.text-container {
  max-width: 80%; /* Ancho máximo del texto */
  text-align: center; /* Centrar el texto */
  margin: 0 auto; /* Centrar horizontalmente */
}


/* Sections */
.text-content {
  font-size: 20px;
  font-family: "Agency FB", sans-serif;
  font-weight: bold;
  text-align: justify;
}

.text-content.mx-auto {
  max-width: 600px;
}

#QuienSoy {
  background-color: black; /* Fondo negro */
  color: white; /* Color del texto blanco para contraste */
  padding: 20px; /* Espacio interno para la sección */
  font-size: 20px;
  font-family: "Agency FB", sans-serif;
  font-weight: bold;
  text-align: justify;
  border-radius: 20px; /* Bordes redondeados opcionales */

}



footer{


	background-color: rgb(0, 0, 0);
    
	text-align: center;


}

q{
    	font-size: 15px;
    color: white;
    font-family: "Agency FB";
    font-weight: bold;
    }
    .f1{
      color: rgb(255, 251, 0);
         
    }