styles.css

/* Cambiar el color de fondo de la barra de navegación */
.navbar {
    background-color: #6c4f3d; /* Color marrón oscuro */
  }
  
  /* Cambiar el color del texto de la barra de navegación */
  .navbar .navbar-brand,
  .navbar .nav-link {
    color: #f1c575; /* Color amarillo claro */
  }
  
  /* Cambiar el color del texto del enlace activo en la barra de navegación */
  .navbar .nav-link.active,
  .navbar .nav-item:hover .nav-link {
    color: #f1e8d8; /* Color blanco apagado */
  }
  
  /* Cambiar el color de fondo y texto de los botones */
  .btn-primary {
    background-color: #d19862; /* Color marrón claro */
    border-color: #d19862;
    color: #f1e8d8; /* Color blanco apagado */
  }
  
  /* Cambiar el color de fondo y texto de los botones al pasar el cursor */
  .btn-primary:hover {
    background-color: #c48858;
    border-color: #c48858;
    color: #f1e8d8;
  }
  
  /* Cambiar el color de fondo del encabezado */
  .jumbotron {
    background-color: #935d38; /* Color marrón */
    height: 400px; /* Aumentar la altura del header */
    background-image: url('header_img.png'); /* Agregar imagen de fondo */
    background-position: center; /* Centrar la imagen de fondo */
    background-repeat: no-repeat; /* No repetir la imagen de fondo */
    background-size: cover; /* Ajustar el tamaño de la imagen de fondo para cubrir el área completa del header */
    display: flex;
    align-items: center;
}
  
  /* Cambiar el color del texto del encabezado */
  .jumbotron .display-4,
  .jumbotron .lead {
    color: #f1e8d8; /* Color blanco apagado */
  }
  
  /* Cambiar el color de fondo del pie de página */
footer {
    background-color: #935d38; /* Color marrón */
  }
  
  /* Cambiar el color del texto del pie de página */
  footer p {
    color: #f1e8d8; /* Color blanco apagado */
  }
  
.responsive-image {
    max-width: 100%;
    height: auto;
    max-height: 150px; /* Ajusta este valor según tus necesidades */
  }

.feature-icon {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin-bottom: 1rem;
  }

  .text-background {
    background-color: rgba(0, 0, 0, 0.65); /* Color negro con opacidad del 50% */
    padding: 1rem; /* Agregar un espacio interno alrededor del texto */
    border-radius: 5px; /* Añadir bordes redondeados a la caja */
  }