/* styles.css */
body {
  overflow-x: hidden; /* Evita el movimiento horizontal */
  background-color: #f8f9fa; /* Color de fondo más suave */
  color: #343a40; /* Color de texto más oscuro */
  font-family: 'Arial', sans-serif;
}

.btn-primary {
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #03080f;
}

.carousel-item svg {
  width: 100%;
  height: 400px; /* Altura del SVG en el carrusel */
}

.navbar {
    background-color: #FF6600; /* Fondo oscuro para la navbar */
}

.navbar-brand img {
  max-width: 120px; /* Ajustar el tamaño del logo */
}

.nav-link {
  color: #000000; /* Color de texto blanco */
  transition: color 0.3s; /* Transición suave para el hover */
}

.nav-link:hover {
  color: #ffffff; /* Color dorado al pasar el mouse */
}

.carousel-caption {
  position: absolute;
  bottom: 10px; /* Ajusta la distancia desde la parte inferior */
  left: 80%; /* Ajusta la posición desde la izquierda */
  transform: translateX(-100%); /* Mueve el texto completamente a la derecha */
  color: white; /* Cambia el color según sea necesario */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejorar la legibilidad */
  font-size: 1.5rem; /* Ajusta el tamaño de la fuente según sea necesario */
}

.informes-container {
    background-color: #f8f9fa; /* Color de fondo suave */
    padding: 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.informe-item {
    transition: transform 0.3s; /* Transición suave para el efecto hover */
    width: 200px; /* Ancho fijo para las imágenes */
}

.informe-item:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el mouse */
}

.flex {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en múltiples líneas */
    justify-content: center; /* Centra los elementos en el contenedor */
}

.justify-center {
    justify-content: center; /* Centra los elementos en el eje horizontal */
}

.bg-card {
    background-color: #f8f9fa; /* Color de fondo claro */
    border: 1px solid #dee2e6; /* Borde gris claro */
    transition: transform 0.3s; /* Transición suave para el efecto hover */
}

.bg-card:hover {
    transform: scale(1.05); /* Aumenta el tamaño al pasar el mouse */
}

h2 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Sombra de texto para el título */
}

h3 {
    color: #343a40; /* Color del texto del título */
    transition: color 0.3s; /* Transición suave para el efecto hover */
}

h3:hover {
    color: #ff5722; /* Cambia el color al pasar el mouse */
}

.card {
  border: none; /* Sin borde en las tarjetas */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s; /* Transición suave para el hover */
}

.card:hover {
  transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
}



footer a {
  color: #ffc107; /* Color dorado para los enlaces del footer */
}

footer a:hover {
  text-decoration: underline; /* Subrayar al pasar el mouse */
}

/* Estilo para los botones de servicio */
.service-button {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido dentro del botón */
    justify-content: center; /* Centra el contenido verticalmente */
    background-color: #4b5563; /* Color de fondo */
    color: #ffffff; /* Color del texto */
    width: 200px; /* Ancho fijo para todos los botones */
    height: 200px; /* Altura fija para hacerlos cuadrados */
    border-radius: 0.5rem; /* Bordes redondeados */
    text-decoration: none; /* Elimina el subrayado del enlace */
    transition: background-color 0.3s; /* Transición suave para el hover */
    margin: 1rem; /* Margen para separación entre botones */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
}

/* Efecto hover para los botones */
.service-button:hover {
    background-color: #374151; /* Color de fondo más oscuro al pasar el mouse */
}

/* Estilo para las imágenes dentro de los botones */
.service-button img {
    max-width: 50px; /* Tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: 1rem; /* Espaciado entre la imagen y el texto */
}

/* Estilo para el contenedor de texto */
.text-container {
    padding: 1rem; /* Espaciado interno para separar el texto de los bordes */
}

/* Ajustes para el texto dentro de los botones */
.service-button h3 {
    text-align: center; /* Centra el texto dentro del botón */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0.5rem; /* Espaciado interno para el texto */
}

/* Asegura que el texto no exceda el tamaño del botón */
.service-button {
    overflow: hidden; /* Evita que el texto se desborde */
    text-align: center; /* Centra el texto dentro del botón */
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .service-button {
        width: 100%; /* En pantallas pequeñas, los botones ocupan el 100% del ancho */
        height: auto; /* Altura automática para mantener la proporción */
    }
}

/* Otros estilos que estaban en línea o en el HTML pueden ser añadidos aquí */