.elementor-371 .elementor-element.elementor-element-4a5f5b5{--display:flex;--min-height:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-371 .elementor-element.elementor-element-8c5f83e{text-align:center;}.elementor-371 .elementor-element.elementor-element-8c5f83e .elementor-heading-title{color:#12214E;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-371 .elementor-element.elementor-element-309bc96{text-align:center;}.elementor-371 .elementor-element.elementor-element-0907124.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-0907124 *//* =========================================
   ROADMAP (روشن) - پدینگ و مارجین افقی صفر
   ========================================= */
.lw-roadmap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0px 0;
}

/* =========================================
   ROW
   ========================================= */
.lw-row {
    display: flex;
    align-items: center;
    gap: 28px;
    --offset: 0px;
}

/* ----- کلاس‌های کمکی برای جابجایی ردیف به چپ/راست با مقدار دلخواه ----- */
.lw-row.row-right {
    justify-content: flex-start;
    margin-left: var(--offset);
}
.lw-row.row-left {
    justify-content: flex-end;
    margin-right: var(--offset);
}
/* --------------------------------------------------- */

.lw-row.bottom {
    margin-top: 80px;
}

/* =========================================
   کارت شیشه‌ای روشن (بدون هاور)
   ========================================= */
.lw-card {
    width: 145px;
    min-height: 95px;
    padding: 16px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(236, 152, 40, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px rgba(255, 255, 255, 0.6);
}

.lw-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%;
    border-radius: 24px 24px 70px 70px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.step {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #EC9828;
}

.icon {
    width: 48px;
    height: 48px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #EC9828, #FFD76A);
    box-shadow: 0 4px 12px rgba(236, 152, 40, 0.3);
    overflow: hidden;
}

.icon img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}
.lw-card h3 {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 700;
}

.lw-card p {
    font-size: 12px;
    line-height: 1.6;
    color: #444;
}

/* =========================================
   خطوط افقی (در دسکتاپ)
   ========================================= */
.lw-line {
    width: 90px;
    height: 2px;
    position: relative;
    background: linear-gradient(
        90deg,
        rgba(236,152,40,0.18),
        #EC9828,
        rgba(236,152,40,0.18)
    );
}

.lw-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 10px;
    background: #EC9828;
    filter: blur(2.8px);
    box-shadow:
        0 0 10px rgba(236,152,40,0.75),
        0 0 18px rgba(236,152,40,0.45),
        0 0 26px rgba(255,194,92,0.22);
    animation: roadLight 2.5s linear infinite;
}

@keyframes roadLight {
    from { left: calc(100% - 20px); }
    to   { left: 0; }
}

/* خط جداکننده بین دو ردیف – در دسکتاپ مخفی است */
.lw-line-between {
    display: none;
}

/* =========================================
   ریسپانسیو
   ========================================= */
@media (max-width: 1024px) {
    .lw-row { gap: 18px; }
    .lw-card { width: 150px; min-height: 110px; padding: 18px; }
    .lw-line { width: 60px; }
}

@media (max-width: 767px) {
    .lw-roadmap {
        padding: 30px 0;
    }

    .lw-row {
        flex-direction: column;
        gap: 18px;
        margin: 0 !important;
        justify-content: center !important;
    }

    .lw-row.bottom {
        margin-top: 0; /* حذف margin اضافی برای یکنواختی فاصله */
    }

    /* تمام خطوط (افقی و جداکننده) به عمودی تبدیل می‌شوند */
    .lw-line,
    .lw-line-between {
        display: block;
        width: 2px;
        height: 40px;
        position: relative;
        margin: 0 auto;
        background: linear-gradient(
            to bottom,
            rgba(236,152,40,0.18),
            #EC9828,
            rgba(236,152,40,0.18)
        );
    }

    /* فقط خط بین دو ردیف (بین کارت ۳ و ۴) فاصله عمودی می‌گیرد تا با بقیه خطوط هم‌اندازه شود */
    .lw-line-between {
        margin: 18px auto; /* فاصله مساوی با gap درون ردیف */
    }

    .lw-line::after,
    .lw-line-between::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 20px;
        top: 0;
        left: 0;
        border-radius: 10px;
        background: #EC9828;
        filter: blur(2.8px);
        box-shadow:
            0 0 10px rgba(236,152,40,0.75),
            0 0 18px rgba(236,152,40,0.45),
            0 0 26px rgba(255,194,92,0.22);
        animation: verticalLight 2.5s linear infinite;
    }

    @keyframes verticalLight {
        from { top: 0; }
        to   { top: calc(100% - 20px); }
    }

    .lw-card {
        width: 100%;
        max-width: 260px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4a5f5b5 *//*=========================================
        ROADMAP BACKGROUND
=========================================*/

.elementor-371 .elementor-element.elementor-element-4a5f5b5{

    position:relative;
    overflow:hidden;
    isolation:isolate;

    padding:100px 0;

    background:

        /* Blue Bubble */
        radial-gradient(
            circle at 34% 42%,
            rgba(86,167,255,.18) 0%,
            rgba(86,167,255,.08) 18%,
            transparent 34%
        ),

        /* Pink Bubble */
        radial-gradient(
            circle at 68% 36%,
            rgba(255,112,198,.16) 0%,
            rgba(255,112,198,.07) 18%,
            transparent 34%
        ),

        /* Gold Bubble */
        radial-gradient(
            circle at 52% 67%,
            rgba(255,190,70,.14) 0%,
            rgba(255,190,70,.06) 18%,
            transparent 32%
        ),

        /* Fade To White */
        radial-gradient(
            ellipse at center,
            #F5F8FD 0%,
            #F8FAFD 38%,
            #FAFBFE 72%,
            #FAFBFE 100%
        );

}



/*=========================================
            BLUE GLOW
=========================================*/

.elementor-371 .elementor-element.elementor-element-4a5f5b5::before{

    content:"";

    position:absolute;

    width:560px;
    height:560px;

    left:8%;
    top:10%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(64,173,255,.34),
            rgba(64,173,255,.10) 45%,
            transparent 72%
        );

    filter:blur(95px);

    opacity:.75;

    animation:blobOne 18s ease-in-out infinite;

}



/*=========================================
            PINK GLOW
=========================================*/

.elementor-371 .elementor-element.elementor-element-4a5f5b5::after{

    content:"";

    position:absolute;

    width:540px;
    height:540px;

    right:8%;
    top:18%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,94,194,.30),
            rgba(255,94,194,.08) 45%,
            transparent 72%
        );

    filter:blur(100px);

    opacity:.72;

    animation:blobTwo 22s ease-in-out infinite;

}



/*=========================================
            ROADMAP
=========================================*/

.roadmap-container .lw-roadmap{

    position:relative;
    z-index:2;

}



/*=========================================
            GOLD LIGHT
=========================================*/

.roadmap-container .lw-roadmap::before{

    content:"";

    position:absolute;

    left:50%;
    bottom:-70px;

    transform:translateX(-50%);

    width:460px;
    height:170px;

    border-radius:50%;

    background:

        radial-gradient(

            ellipse,

            rgba(255,188,70,.18),

            transparent 72%

        );

    filter:blur(70px);

}



/*=========================================
            GRID
=========================================*/

.roadmap-container .lw-roadmap::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.03;

    background:

        linear-gradient(

            rgba(255,255,255,.08) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.08) 1px,

            transparent 1px

        );

    background-size:72px 72px;

}



/*=========================================
            NOISE
=========================================*/

.elementor-371 .elementor-element.elementor-element-4a5f5b5 .noise{

    position:absolute;

    inset:0;

    opacity:.02;

    pointer-events:none;

    mix-blend-mode:soft-light;

}



/*=========================================
        FLOATING LIGHT
=========================================*/

.elementor-371 .elementor-element.elementor-element-4a5f5b5 .floating-light{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.16),

            transparent 72%

        );

    filter:blur(80px);

    animation:floatLight 24s linear infinite;

}



/*=========================================
            ANIMATIONS
=========================================*/

@keyframes blobOne{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(35px,25px) scale(1.05);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}



@keyframes blobTwo{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-35px,30px) scale(1.06);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}



@keyframes floatLight{

    0%{

        left:18%;

        top:62%;

    }

    50%{

        left:62%;

        top:28%;

    }

    100%{

        left:18%;

        top:62%;

    }

}



/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:1024px){

    .elementor-371 .elementor-element.elementor-element-4a5f5b5{

        padding:70px 0;

    }

    .elementor-371 .elementor-element.elementor-element-4a5f5b5::before{

        width:420px;

        height:420px;

    }

    .elementor-371 .elementor-element.elementor-element-4a5f5b5::after{

        width:420px;

        height:420px;

    }

}



@media(max-width:767px){

    .elementor-371 .elementor-element.elementor-element-4a5f5b5{

        padding:60px 0;

    }

    .elementor-371 .elementor-element.elementor-element-4a5f5b5::before{

        width:280px;

        height:280px;

        left:5%;

    }

    .elementor-371 .elementor-element.elementor-element-4a5f5b5::after{

        width:280px;

        height:280px;

        right:5%;

    }

}/* End custom CSS */