/* Dispositivos pequeños (celulares, 576px y menos) */
@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 2.5rem; /* Reducir tamaño de fuente del título principal */
    }

    .hero-section p.lead {
        font-size: 1rem; /* Reducir tamaño de fuente del párrafo lead */
    }

    .navbar-brand img {
        height: 40px !important; /* Ajustar el tamaño del logo en móviles */
    }

    .footer .col-md-4 {
        text-align: center; /* Centrar el texto en el footer en móviles */
    }

    .footer .social-icons {
        justify-content: center; /* Centrar los iconos sociales */
    }

}

/* Dispositivos medianos (tabletas, 768px y más) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Aquí puedes añadir estilos específicos para tabletas si es necesario */
    .hero-section h1 {
        font-size: 3.5rem;
    }
}

/* Dispositivos grandes (desktops, 992px y más) */
@media (min-width: 992px) {
    /* Estilos para desktops si los necesitas (normalmente el diseño base ya es para esto) */
}

/* Dispositivos extra grandes (desktops muy grandes, 1200px y más) */
@media (min-width: 1200px) {
    /* Estilos para pantallas muy grandes */
}