@media (max-width: 1024px) {
    /* This combines all previous responsive changes into one clean file */

    /* --- Visibility Rules for Tabs --- */
    .tab-buttons .desktop-only {
        display: none;
    }
    .tab-buttons .mobile-only {
        display: inline;
    }

    /* --- Remove Sticky Behavior --- */
    .tech-tabs {
        padding-top: 0; 
    }
    .tab-buttons {
        justify-content: center;
        flex-wrap: wrap;
        padding: 15px 20px;
        margin-bottom: 0px;
    }
    
    /* --- "Casos de Exito" Button Styling --- */
    .filter-buttons {
        justify-content: center;
        flex-wrap: wrap;
        padding: 2px 0;
        margin-bottom: 0px;
        gap: 8px;
    }
    .filter-btn, .tab-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px; /* Sizing based on content + padding */
        margin-bottom: 2px;
    }
    .filter-container {
        min-height: auto; /* Let it grow naturally */
    }

    /* --- "Proximos Pasos" Section Styling --- */
    .process-steps {
        padding: 30px 15px;
    }
    .steps-container {
        grid-template-columns: 1fr; /* Stack steps vertically */
        gap: 20px;
    }
    .step-arrow {
        transform: rotate(90deg); /* Point arrows down for vertical flow */
        margin: 10px 0;
    }

    /* --- "About" Section Styling --- */
    .about-content {
        grid-template-columns: 1fr; /* Stack text and image vertically */
        gap: 30px; /* Adjust gap for stacked layout */
    }

    /* --- Modern Mobile Menu Styles --- */
    .hamburger-new {
        display: block;
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        z-index: 1001;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .hamburger-box-new {
        width: 40px;
        height: 24px;
        display: inline-block;
        position: relative;
    }

    .hamburger-inner-new,
    .hamburger-inner-new::before,
    .hamburger-inner-new::after {
        width: 100%;
        height: 3px;
        background-color: var(--primary-color);
        position: absolute;
        border-radius: 4px;
        transition: transform 0.25s ease-in-out;
    }

    .hamburger-inner-new {
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-inner-new::before,
    .hamburger-inner-new::after {
        content: '';
        display: block;
    }

    .hamburger-inner-new::before {
        top: -10px;
    }

    .hamburger-inner-new::after {
        bottom: -10px;
    }

    /* Active State (X) */
    .hamburger-new.is-active .hamburger-inner-new {
        transform: rotate(45deg);
    }
    .hamburger-new.is-active .hamburger-inner-new::before {
        transform: rotate(0) translate(0, 10px);
        opacity: 0;
    }
    .hamburger-new.is-active .hamburger-inner-new::after {
        transform: rotate(-90deg) translate(-10px, 0px);
    }
    
    .nav-new {
        position: fixed;
        top: 50px;
        right: 0; /* Changed from left: 0; */
        width: 180px;
        height: 50vh;
        background: rgba(51, 51, 51, 0.8);
        backdrop-filter: blur(5px);
        box-shadow: 10px 0 30px rgba(221, 220, 220, 0.2); /* Shadow on the right edge */
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .nav-new.is-active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-list-new {
        flex-direction: column;
        text-align: center;
        gap: 1rem; /* Reduced from 2rem */
    }

    .nav-list-new a {
        font-size: 1.1rem; /* Reduced from 1.5rem */
        font-weight: 600;
        color: var(--light-color);
    }

    .btn-primary-new {
        padding: 1rem 2rem;
    }

    .header-new {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    .container-new {
        position: relative;
    }
    body {
        padding-top: 50px; /* Adjust as needed */
    }
}

@media (max-width: 768px) {    
    .protocols-showcase .protocol-badge img {
     max-height: 30px; /* Adjust image size accordingly */
     }
         .protocols-showcase .protocol-badge {
                min-width: 0; /* Allow badges to shrink */
                        width: 70px; /* Give a fixed width for consistency */
                                height: 45px;
                                padding: 5px; /* Reduce padding if needed */
                                }
                                    .integration-info {
                                                padding: 30px 15px; /* Reduced padding for mobile/very small screens */    }
    .footer-content {
        grid-template-columns: 1fr; /* Stack content vertically */
        gap: 30px; /* Reduced gap */
        text-align: center; /* Center footer content */
    }

    .footer-logo {
        margin-bottom: 20px; /* Space between logo and links when stacked */
    }

    .footer-links {
        display: flex;
        flex-direction: column; /* Stack link columns */
        gap: 20px; /* Space between stacked link columns */
        align-items: center; /* Center the link columns */
    }

    .footer-column {
        width: 100%; /* Ensure columns take full width when stacked */
    }
}