/* CSS personalizado */
body {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3,p {
  font-family: 'Montserrat', sans-serif;
}
.navbar-custom {
    background-color: white;
  }

  .navbar-custom .navbar-brand,
  .navbar-custom .nav-link {
    color: black;
  }
  
  .navbar-custom .nav-link:hover {
    color: black;
  }
  
  .navbar-custom .navbar-toggler {
    border-color: white;
  }

  .navbar-brand img {
    width: 100px; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la relación de aspecto */
  }
  
  .full-width-image img {
    width: 100%;
    height: auto;
    display: block;
  }
 
  .social-bar {
    margin-top: 20px;
    background-color: #FF0000;
    padding: 10px 0;
    margin-bottom: 20px;
  }
  
  .social-bar a {
    color: white;
    font-size: 18px;
    margin-right: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  
  .social-bar i {
    margin-right: 8px;
    font-size: 24px;
  }
  
  .social-bar a:hover {
    color: #FFD700; /* Cambia el color al pasar el mouse */
  }


  .gray-bar {
    background-color: darkgray;
    padding: 20px;
}

.gray-bar .text-left p {
    margin: 0;
    text-align: justify;
}

.gray-bar .text-left {
    margin-right: 30px; /* Espacio entre el texto y la imagen */
}

.gray-bar .image-right img, 
.spaced-section .image-left img {
    width: 100%; /* Mantiene la imagen dentro del contenedor */
    max-width: 900px; /* Aumenta el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
}

/* Para pantallas más grandes */
@media (min-width: 768px) {
    .gray-bar .image-right img, 
    .spaced-section .image-left img {
        max-width: 800px; /* Aumenta el tamaño en pantallas grandes */
    }
}

.spaced-section {
    padding: 20px 0; /* Añadimos espacio arriba y abajo */
    margin-top: 20px; /* Espacio entre la barra gris y esta nueva sección */
}

.spaced-section .text-right p {
    margin-left: 30px;
    text-align: justify;
}


.image-gallery {
    margin-top: 20px; /* Espacio entre la galería y la sección anterior */
  }
  
  .image-gallery .row {
    margin-bottom: 20px; /* Espacio entre filas */
  }


  .image-gallery img {
    width: 100%; /* Las imágenes se ajustan al tamaño de su contenedor */
    height: auto;
    border-radius: 8px; /* Opcional: redondear las esquinas de las imágenes */
  }


 /* Estilo para el footer */
.footer {
    background-color: #FF0000; /* Cambia el color de fondo según tus necesidades */
    padding: 20px 0; /* Espaciado superior e inferior */
}

/* Contenedor del footer */
.footer .container {
    display: flex;
    flex-direction: column; /* Cambia a columna para dispositivos móviles */
    align-items: center; /* Centrar contenido horizontalmente */
    text-align: center; /* Centrar texto */
}

/* Información de contacto */
.footer .contact-info {
    margin-bottom: 10px; /* Espaciado inferior */
    
}

.footer .contact-info p {
    margin: 5px 0; /* Espaciado entre los párrafos */
    color: white;
}

/* Estilo para el copyright */
.footer .copyright {
    font-size: 14px; /* Ajusta el tamaño de la fuente */
    color: white;
}

/* Estilo para pantallas grandes */
@media (min-width: 768px) {
    .footer .container {
        flex-direction: row; /* Cambia a fila para pantallas más grandes */
        justify-content: space-between; /* Espacia el contenido */
        text-align: left; /* Alinear texto a la izquierda */
    }

    .footer .contact-info {
        margin-bottom: 0; /* Elimina el margen inferior en pantallas grandes */
    }
}

  .navbar-custom {
    background-color: #f8f9fa; /* Ajusta el color de la navbar */
  }
  
  /* Espacio entre secciones */
  .spaced-section {
    margin-top: 30px;
    margin-bottom: 30px;
  }