@import "../mixins";
@import "../variables";

/* Add your responsiveness hook here  */
/* ipad and tablet */
@media(max-width: 1024px){
	
}

/* ipad and tablet */
@media(max-width: 800px){
	
}

/* phone */
@media(max-width: 600px){
	
}
@media(max-width: 992px){
    /* Asegurar que las secciones se apilen en lugar de estar lado a lado */
    .section .content .c-left,
    .section .content .c-right {
        width: 100%;
        float: none;
        padding: 0 15px; /* Añadir padding horizontal para evitar que el contenido toque los bordes */
    }

    /* Ajustar el tamaño de la fuente de los títulos en móviles */
    .section .content .title h2 {
        font-size: 2.5rem; /* Reducir el tamaño del título principal */
    }
    .section .content .title h3 {
        font-size: 1.5rem; /* Reducir el tamaño del subtítulo */
    }

    /* Ajustar el logo en la sección de inicio */
    .section-home .content .home-logo img {
        height: 150px !important; /* Ajustar el tamaño del logo en la home */
    }

    /* Asegurar que el wrapper de contenido no tenga restricciones de ancho que causen overflow */
    .section .content .wrapper {
        width: 100%;
        padding: 20px 0;
    }
}

@media(max-width: 600px){
    /* Ajustes adicionales para teléfonos */
    .section .content .title h2 {
        font-size: 2rem;
    }
    .section .content .title h3 {
        font-size: 1.2rem;
    }
    
    /* Asegurar que el menú de navegación sea usable */
    .menu-links {
        width: 100%;
    }
}
