/* =====================================================
   3-STEPS SECTION — 320px & Small Mobile Fix
   Add this after your existing CSS
   ===================================================== */

@media (max-width: 480px) {

    .a-3-steps-section {
        padding: 40px 0;
    }

    .fss-frame {
        padding: 0 15px;
    }

        .fss-frame h2 {
            font-size: 1.3rem;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 30px;
            word-break: break-word;
        }

    /* ---- Tabs List ---- */
    #fss-tabs .jq-tabs.services-tabs {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        margin: 0 0 16px 0;
        list-style: none;
        width: 100%;
    }

        #fss-tabs .jq-tabs.services-tabs li {
            width: 100%;
        }

            #fss-tabs .jq-tabs.services-tabs li a {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                width: 100%;
                box-sizing: border-box;
                font-size: 0.85rem;
                line-height: 1.4;
                word-break: break-word;
            }

    .fss-step-number {
        flex-shrink: 0;
        min-width: 28px;
        text-align: center;
    }

    .tab-text {
        flex: 1;
        word-break: break-word;
    }

    /* ---- Progress Bar ---- */
    .progress-filler {
        width: 100%;
        overflow: hidden;
    }

    /* ---- Tab Content ---- */
    .tabs-content {
        width: 100%;
        overflow: hidden;
    }

    .jq-tab-box {
        width: 100%;
        box-sizing: border-box;
    }

    .tabs-column {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 16px;
        box-sizing: border-box;
        word-break: break-word;
    }

        .tabs-column p {
            font-size: 0.88rem;
            line-height: 1.65;
            margin-bottom: 12px;
            word-break: break-word;
            overflow-wrap: break-word;
        }

    /* ---- Try Demo Button ---- */
    .a-try-demo-btn .container {
        padding: 0 15px;
        text-align: center;
    }

    .a-try-demo-btn .default-btn {
        width: 100%;
        max-width: 300px;
        font-size: 0.9rem;
        padding: 12px 20px;
    }
}

/* ---- Extra small: 320px ---- */
@media (max-width: 360px) {

    .fss-frame {
        padding: 0 10px;
    }

        .fss-frame h2 {
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

    #fss-tabs .jq-tabs.services-tabs li a {
        padding: 10px 10px;
        font-size: 0.8rem;
        gap: 8px;
    }

    .fss-step-number strong em {
        font-size: 0.9rem;
    }

    .tabs-column p {
        font-size: 0.82rem;
        line-height: 1.6;
    }

    .a-try-demo-btn .default-btn {
        width: 100%;
        font-size: 0.85rem;
        padding: 10px 16px;
    }
}