/* Mobile slider: one card per viewport, horizontal snap */
@media (max-width: 768px) {

    /* Wrapper: prevents page horizontal growth while clipping overflow */
    .section-how-works {
        position: relative;              
        width: 100%;
        overflow: hidden;                
        box-sizing: border-box;
    }

    /* Horizontal scroller (mobile behavior applied globally) */
    .slide-frame {
        display: flex;                   
        overflow-x: auto;                
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;   
        gap: 16px;                       
        padding: 0 16px;                 
        scroll-padding-left: 16px;       
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Slides: one card per viewport width (inside padded track) */
    .slide-frame > .slider {
        flex: 0 0 calc(100% - 32px);     
        min-width: calc(100% - 32px);
        max-width: 100%;
        scroll-snap-align: start;        
        scroll-snap-stop: always;        
    }

    /* Cosmetic scrollbar hiding (optional) */
    .slide-frame::-webkit-scrollbar {
        display: none;
    }

    .rectangle-1237 {
        display: none;                    
    }

    .slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
    }

    .slider-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #DDF9AC;      
        opacity: 1;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .slider-dot[aria-current="true"] {
        background: #0B2239;      
        transform: scale(1.1);
    }

    /* Dots generated by JS */
    .slider-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
    }

    .slider-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #cfd5dc;              
        opacity: 0.7;
        cursor: pointer;                  
        transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    }

    .slider-dot[aria-current="true"] {
        background: #0b2239;              
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Desktop: keep your current layout; no override needed */