/* 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-color: #1C2023;
    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 */
 
  .navbar-toggler{
    color: rgb(0, 0, 0);
  }

  


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


 
  
  
  .d-flex {
    display: flex;
    flex-direction: column; /* Cambiar a diseño en columna */
    align-items: center; /* Centrar elementos horizontalmente */
  }
  
 
  
  .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;
  }
  

  h1 {
    font-family: "The Army Of God", sans-serif;
    font-size: 100px;
    
    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 */
    color: white;
  }

  h2{
	font-size: 70px;

	font-family: "Agency FB";
	font-weight: bold;
	font-style: italic;
	color: #ffe600;
  
  }
  h3{
	font-size: 60px;
	
	font-family: "Agency FB";
	font-weight: bold;
	font-style: italic;
	color: #000000;
  
  }

  a{
    font-size: 100px;
	
	font-family: "Agency FB";
	font-weight: bold;
	font-style: italic;
	color: #000000;
  }
  
h5, label{
    font-size: 30px;
    font-family: "Agency FB";
	font-weight: bold;
	font-style: italic;
	color: #ff9900;
  }
  footer {
    position: relative; /* Cambiado a relative para que se ajuste al contenido */
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    text-align: center;
    padding: 10px 0; /* Espaciado interno */
    bottom: -100px;
}

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