/* Custom styles for your project */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

.card-modern {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
}

.feature-icon {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.bg-primary {
    background-color: #007bff !important; /* Ajusta a tu color primario */
}

.bg-success {
    background-color: #28a745 !important; /* Ajusta a tu color de éxito */
}

        /* Estilos básicos para las cards del catálogo */
        .card {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }
        .card-title {
            min-height: 48px; /* Para mantener altura uniforme en títulos de 2 líneas */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-text {
            min-height: 72px; /* Para mantener altura uniforme en descripciones */
        }
        /* Estilos del modal de video */
        .modal-body {
            padding: 0;
        }
        .modal-header .btn-close {
            filter: invert(1); /* Para que el icono blanco sea visible en fondo oscuro */
        }

/* WhatsApp Floating Button */
/* --- Estilos para el botón de WhatsApp (Asegúrate de que este sea el que tienes) --- */

.whatsapp-button-container {
    /* Si tienes un contenedor alrededor, puedes usarlo para posicionar */
    /* Por ejemplo, si el botón está fijo en la esquina, este contenedor no sería necesario */
}

.whatsapp-float {
    position: fixed; /* Mantiene el botón en la pantalla mientras el usuario hace scroll */
    width: 60px; /* Tamaño del botón */
    height: 60px; /* Tamaño del botón */
    bottom: 40px; /* Distancia desde la parte inferior de la pantalla */
    right: 40px; /* Distancia desde el lado derecho de la pantalla */
    background-color: #25d366; /* Color de WhatsApp */
    color: #FFF;
    border-radius: 50px; /* Hace que el botón sea circular */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    display: flex; /* Para centrar el icono dentro del círculo */
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Elimina el subrayado */
}

.whatsapp-float i {
    /* El icono de Font Awesome ya es parte del botón */
}

/* --- Ajustes Específicos para Móviles (Media Queries) --- */
@media (max-width: 768px) { /* Para pantallas de hasta 768px de ancho (típicamente móviles) */
    .whatsapp-float {
        width: 50px; /* Un poco más pequeño en móviles */
        height: 50px; /* Un poco más pequeño en móviles */
        bottom: 20px; /* Menos distancia desde el borde inferior */
        right: 20px; /* Menos distancia desde el borde derecho */
        font-size: 25px; /* Icono un poco más pequeño */
        /* Si se sigue encimando con el footer en móvil, considera moverlo un poco más arriba */
        /* bottom: 80px; */ /* Por ejemplo, si el footer es muy alto */
    }

    /* Si el botón de WhatsApp está en el footer y no es fixed, ajusta esto: */
    .footer-content .whatsapp-button-container {
        /* Ejemplo: si el botón de WhatsApp está dentro de un div en el footer */
        display: block; /* O display: inline-block; si quieres que esté en línea */
        margin: 10px auto; /* Centrarlo si es necesario */
        text-align: center; /* Si el contenido es texto o inline-block */
    }
}

/* Si tu footer es muy alto y el botón fixed se superpone con él al final */
/* Podemos ajustar el padding-bottom del body si el botón fijo está muy cerca del footer */
body {
    padding-bottom: 80px; /* Añade un padding extra en la parte inferior del body para el botón fijo */
}

/* O, si ya tienes un footer con padding, asegúrate de que tenga espacio suficiente */
footer {
    padding-bottom: 60px; /* Si tu botón fijo de WhatsApp se superpone */
}


/* Estilos para el logo con texto encima */
.logo-stacked {
    position: relative; /* Hace que este contenedor sea el punto de referencia para el posicionamiento absoluto */
    display: flex; /* Mantiene el comportamiento flex para que el texto se ajuste */
    flex-direction: column; /* Apila los elementos verticalmente por defecto */
    justify-content: center; /* Centra verticalmente si los elementos tienen alturas diferentes */
    align-items: center; /* Centra horizontalmente */
    height: 100px; /* Ajusta esta altura total del logo según sea necesario */
    padding: 0; /* Asegúrate de que no haya padding extra que interfiera */
    text-decoration: none; /* Quita el subrayado del enlace */
}

.logo-stacked .logo-image {
    position: absolute; /* Permite posicionar la imagen libremente */
    top: 50%; /* Centra verticalmente la imagen */
    left: 50%; /* Centra horizontalmente la imagen */
    transform: translate(-50%, -50%); /* Ajusta para centrado exacto basado en su propio tamaño */
    height: 80px; /* Tamaño de la imagen del logo */
    width: auto; /* Mantiene la proporción de la imagen */
    z-index: 1; /* Asegura que la imagen esté debajo del texto */
    display: block; /* Asegura que la imagen no tenga espacios extra debajo */
}

.logo-stacked .logo-text {
    position: relative; /* Permite posicionar el texto sobre la imagen */
    z-index: 2; /* Asegura que el texto esté encima de la imagen */
    font-size: 1.5rem; /* Ajusta el tamaño de la fuente para el texto "Alelu" */
    color: white; /* Color del texto para que se vea sobre el fondo oscuro de la navbar y el logo */
    /* Puedes añadir text-shadow si el fondo del logo es muy claro y el texto se pierde */
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.7); */
}

/* Ajustes para pantallas más pequeñas si es necesario */
@media (max-width: 768px) {
    .logo-stacked {
        height: 80px; /* Reducir la altura total del logo en móviles */
    }
    .logo-stacked .logo-image {
        height: 60px; /* Reducir el tamaño del logo en móviles */
    }
    .logo-stacked .logo-text {
        font-size: 1.2rem; /* Reducir el tamaño del texto en móviles */
    }
}

body {
    padding-top: 100px; /* Ajusta este valor según la altura real de tu navbar */
}

/* Puedes usar este estilo si ya lo tienes para el contenido principal */
.dashboard-content {
    padding-top: 20px; /* Un padding adicional para el contenido dentro de la sección */
    min-height: calc(100vh - 120px); /* Ajusta si es necesario */
}