/* ==========================================================
   HOW IT WORKS - MOBILE SLIDER
   (Only Mobile)
========================================================== */

@media (max-width: 991px) {

    .elan-how-it-works{
    background:#ffffff !important;
        padding:40px 0;
        overflow:hidden;
    }

    .elan-container{
        padding:0 16px;
    }

    /* ---------- Header ---------- */

    .works-header{
        margin-bottom:28px;
    }

    .works-title{
        font-size:34px;
        line-height:1.15;
        letter-spacing:-1px;
    }

    .works-subtitle{
        font-size:15px;
        line-height:1.7;
    }

    .works-promo{
        font-size:18px;
    }

    /* ---------- Slider ---------- */

      .steps-slider-mobile{
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .steps-slider-mobile::-webkit-scrollbar{
        display:none;
    }

  .steps-grid{

        display:flex !important;

        flex-direction:row !important;

        flex-wrap:nowrap !important;

        gap:16px;

        width:max-content;

        grid-template-columns:none !important;

    }
    /* ---------- Card ---------- */

    .step-card{

        flex:0 0 320px !important;

        width:320px !important;

        max-width:320px !important;

        min-width:320px !important;

        margin:0;
         background:#f8f7f3 !important;   /* Why ÉLAN section ka color */
         border:1px solid rgba(0,0,0,.05);
         box-shadow:none;

    }



    .steps-slider-mobile{

        scroll-snap-type:x mandatory;

    }

    /* ---------- Image ---------- */

    .step-media-container{

        height:290px;

        border-radius:18px;
        background:#f8f7f3 !important;
        margin-bottom:20px;

    }

    .step-main-img{

        width:100%;
        height:100%;
        object-fit:cover;

    }

    /* ---------- Number ---------- */

    .step-number{

        width:38px;
        height:38px;

        font-size:15px;

        top:16px;
        left:16px;

    }

    /* ---------- Footer ---------- */

    .step-footer{

        display:flex;
        align-items:flex-start;
        gap:14px;

    }

    .step-icon{

        width:42px;
        height:42px;

        display:flex;
        align-items:center;
        justify-content:center;

        border-radius:50%;

        background:#f7f7f7;

        flex-shrink:0;

    }

    .step-text h4{

        font-size:18px;
        line-height:1.35;
        margin-bottom:8px;

    }

    .step-text p{

        font-size:14px;
        line-height:1.7;

    }

    /* ---------- Floating Badges ---------- */

    .curator-floating-badge{

        width:88%;

        left:50%;

        bottom:16px;

        transform:translateX(-50%);

        padding:12px 16px;

        border-radius:14px;

    }

    .curator-floating-badge p{

        font-size:12px;

    }

    .discount-floating-badge{

        left:16px;
        bottom:16px;

        padding:14px 18px;

        border-radius:14px;

    }

    .discount-floating-badge h5{

        font-size:22px;

    }

    .discount-floating-badge p{

        font-size:11px;

    }

    /* ---------- Last Card Spacing ---------- */

    .steps-grid::after{

        content:"";

        flex:0 0 16px;

    }


    .steps-slider-dots{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    margin-top:20px;

}

.steps-slider-dots span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#d1d1d1;

    transition:.35s;

}

.steps-slider-dots span.active{

    width:26px;

    border-radius:30px;

    background:#C7A74A; /* Accent Gold */

}


}