/* 
        Créditos: Cristhian Yalle 
        Descripción: Estilos responsivos para el sitio web de la comunidad de desarrolladores Grupo Yalle.
        Fecha: 2025-06-15
        Licencia: MIT License
        Este archivo contiene estilos CSS para hacer que el sitio web sea responsivo y se adapte a diferentes tamaños de pantalla.
    */

    .mobile-navbar {
        display: none;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .hero {
            flex-direction: column;
            text-align: center;
        }

        .gallery {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .sidebar {
            width: 60px;
        }

        .mega-menu.active {
            left: 60px;
            width: 100% !important;
        }

        .full-bg {
            display: none;
        }


        .hero-text h1 {
            font-size: 36px;
        }

        .hero-text h2 {
            font-size: 20px;
        }

        .event {
            flex-direction: column;
        }

        .event-date {
            flex-direction: row;
            justify-content: space-around;
            padding: 10px;
        }

        .event-day,
        .event-month {
            display: inline-block;
        }

        .sidebar {
            display: none !important;
        }

        .mega-menu {
            display: none !important;
        }

        .mobile-navbar {
            display: flex !important;
        }

        .floating-btns {
            position: fixed;
            right: 20px;
            bottom: 150px;
        }

        .main-content {
            margin-left: 0;
            padding: 20px;
        }
    }

    @media (max-width: 480px) {
        .gallery {
            grid-template-columns: 1fr;
        }

        .hero-text h1 {
            font-size: 28px;
        }

        .section-title {
            font-size: 28px;
        }

    }