.my-global-style {
    background-color: #f2f2f2; /* Fondo claro */
    padding: 15px; /* Espacio interno */
}
.mud-tf-input {
    color: red;
    font-size: 20px;
}

.mud-tab-slider {
    height: 4px; /* Cambia el espesor del slider */
    background-color: #c99c45 !important; /* Cambia el color del slider */
}

.mud-dialog.mud-dialog-fullscreen {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}
@media (max-width: 767px) {
    .footer-section {
        display: none;
    }
}
.text-justify {
    text-align: justify;
}

/* Estilo base para dispositivos más grandes que móviles */
.social-bar {
    display: flex;
    justify-content: flex-end; /* Cambiado de 'right' a 'flex-end' */
    padding: 10px;
}

    .social-bar a {
        margin: 0 15px;
        text-decoration: none;
        color: inherit;
    }

    .social-bar svg {
        width: 22px;
        height: 22px;
        fill: var(--bs-nav-link-color);
        transition: 0.3s;
    }

        .social-bar svg:hover {
            opacity: 0.7;
        }

/* Media query para ocultar la barra de redes sociales en dispositivos móviles */
@media (max-width: 768px) {
    .social-bar {
        display: none;
    }
}
.description-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
p {
    font-size: 16px;
}

.description-container * {
    color: inherit; /* Restablece el color del texto */
    font-size: inherit; /* Restablece el tamaño de fuente */
    font-weight: normal; /* Restablece el peso de fuente */
    text-decoration: none; /* Elimina subrayado, sobrerayado, etc. */
    background: none; /* Elimina cualquier fondo */
    border: none; /* Elimina bordes */
    padding: 0; /* Elimina el padding */
    margin: 0; /* Elimina el margen */
    /* Puedes agregar más propiedades si es necesario */
}
.reduced-height {
    max-height: 200px;
    overflow-y: auto; /* esto permitirá que se desplace si el contenido es más grande que el alto máximo */
}

/* Estilos para pantallas con ancho menor a 768px (típicamente móviles) */
@media (max-width: 767px) {
    .masthead {
        flex-direction: column; /* Cambia la dirección del flex a vertical */
        height: auto; /* Ajusta la altura automáticamente */
    }

        .masthead .d-flex.col-6 {
            width: 100%; /* Ocupa todo el ancho */
            margin: 10px 0; /* Añade un pequeño margen superior e inferior */
        }

            .masthead .d-flex.col-6 div {
                width: 90%; /* Ocupa la mayor parte del ancho */
                height: auto; /* Ajusta la altura automáticamente */
                margin: 0 auto; /* Centra el contenido horizontalmente */
            }

            .masthead .d-flex.col-6 img {
                width: 100%; /* Ocupa todo el ancho */
                height: auto; /* Ajusta la altura automáticamente */
            }
}

/* Este es un ejemplo que limita el ancho máximo del contenido a 1440px, que es una resolución de pantalla común para las laptops. */
@media screen and (min-width: 1441px) {
    #page-top {
        width: 1440px;
        margin: 0 auto; /* Centra el contenido */
    }
}

.full-width {
    width: 100%;
}

/* Estilos para pantallas grandes */
@media (min-width: 1024px) {
    .masthead {
        height: 550px;
        background-size: cover;
    }

    .carousel-item-image {
        width: 820px; /* Ajusta este valor según sea necesario */
    }
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .masthead {
        height: auto; /* Ajuste de altura automático para adaptarse al contenido */
        background-size: contain;
    }

    .carousel-item-image {
        width: 100%; /* Ajusta el ancho a la pantalla */
    }
}

.large-pagination .mud-pagination-button,
.large-pagination .mud-select-input {
    font-size: 1.5rem; /* Ajusta el tamaño de la fuente */
    padding: 12px 16px; /* Ajusta el padding para hacer los botones más grandes */
}

.large-pagination .mud-pagination-ellipsis {
    font-size: 1.5rem; /* Ajusta el tamaño de los puntos suspensivos */
    padding: 12px; /* Ajusta el padding si es necesario */
}
.fullscreen-image {
    height: 100vh; /* Ajusta la altura al 100% de la altura de la ventana del navegador */
    width: 100vw; /* Ajusta el ancho al 100% de la anchura de la ventana del navegador */
    color: red;
}