
        
        
        .content {
            flex: 1; /* Permite que el contenido ocupe el espacio disponible */
            display: flex; /* Usa flexbox para el diseño */
            flex-direction: column; /* Coloca los elementos en una columna */
            justify-content: center; /* Centra el contenido verticalmente */
            align-items: center; /* Centra el contenido horizontalmente */
            padding: 20px; /* Añade espacio alrededor del contenido */
        }
        
        .image-container {
            display: flex; /* Usa flexbox para el diseño */
            flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
            justify-content: space-around; /* Espacia los elementos alrededor del contenedor */
            align-items: center; /* Centra los elementos verticalmente */
            width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
            padding: 20px; /* Añade espacio alrededor del contenedor */
        }
        .image-container a {
            text-align: center; /* Centra el texto dentro del enlace */
            margin: 10px; /* Añade espacio alrededor del enlace */
            flex: 1 1 calc(25% - 20px); /* Ajusta el tamaño de las imágenes para cuatro por fila en pantallas grandes */
        }
        .image-container img {
            width: 100%; /* Ajusta el ancho de las imágenes al 100% del contenedor */
            height: auto; /* Mantiene la proporción de las imágenes */
        }
        .image-container h2 {
            margin: 10px 0 0; /* Añade espacio arriba del encabezado */
        }
        /* Media Queries for Responsiveness */
        @media (max-width: 768px) {
            .image-container a {
                flex: 1 1 calc(50% - 20px); /* Ajusta el tamaño de las imágenes para dos por fila en pantallas medianas */
            }
        }
        @media (max-width: 480px) {
            .image-container a {
                flex: 1 1 calc(100% - 20px); /* Ajusta el tamaño de las imágenes para una por fila en pantallas pequeñas */
            }
        }
        .footer {
            width: 100%; /* Asegura que el footer ocupe todo el ancho disponible */
            padding: 20px; /* Añade espacio alrededor del footer */
            box-sizing: border-box; /* Incluye el padding en el ancho total */
            background-color: #D49A4A; /* Color de fondo del footer */
            text-align: center; /* Centra el texto dentro del footer */
        }
        
        .carousel {
            width: 100%; /* Asegura que el carousel ocupe todo el ancho disponible */
            max-height: 600px; /* Ajusta la altura máxima del carousel */
            overflow: hidden; /* Oculta el contenido que desborde */
        }
        .carousel-inner {
            width: 100%; /* Asegura que el contenido del carousel ocupe todo el ancho */
        }
        .carousel-item {
            width: 100%; /* Asegura que cada item del carousel ocupe todo el ancho */
            height: 100%; /* Asegura que cada item del carousel ocupe toda la altura disponible */
        }
        .carousel-item img {
            width: 100%; /* Ajusta el ancho de las imágenes al 100% del contenedor */
            height: auto; /* Mantiene la proporción de las imágenes */
            display: block; /* Asegura que la imagen no tenga márgenes adicionales */
        }