.elementor-511 .elementor-element.elementor-element-134b2fe{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-511 .elementor-element.elementor-element-4c0175f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-511 .elementor-element.elementor-element-8077f2b{--display:flex;}.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-511 .elementor-element.elementor-element-850ea88{text-align:center;}.elementor-511 .elementor-element.elementor-element-850ea88 .elementor-heading-title{font-family:"vazir", Sans-serif;font-size:34px;font-weight:800;color:#061389;}.elementor-511 .elementor-element.elementor-element-fc4bfad{--display:flex;--min-height:123px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-511 .elementor-element.elementor-element-1f651d6 > .jet-listing-grid > .jet-listing-grid__items{--columns:4;}.elementor-511 .elementor-element.elementor-element-08ee648{--display:flex;}.elementor-511 .elementor-element.elementor-element-6c8cbb4{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-885dc88 *//* =========================================================
   BRAND PUMP — 3 STEP GUIDE
   Clean / Industrial / Elegant
   Navy + White
   Fully Responsive
   ========================================================= */

.bp-pump-guide{
    --navy:#0B2E59;
    --navy-dark:#082544;
    --text:#536577;
    --border:#DCE5EE;
    --soft:#F6F8FA;

    width:100%;
    padding:60px 20px;
    background:#fff;
    box-sizing:border-box;

    font-family:inherit;
    direction:rtl;
}

.bp-guide-wrap{
    width:100%;
    max-width:1300px;
    margin:0 auto;
}


/* =========================================================
   TITLE
   ========================================================= */

.bp-guide-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:45px;
}

.bp-guide-title h2{
    margin:0 !important;
    color:var(--navy) !important;

    font-family:inherit !important;
    font-size:27px !important;
    font-weight:700 !important;

    line-height:1.5 !important;
    white-space:nowrap;
}

.bp-guide-title h2 strong{
    color:var(--navy) !important;
    font-weight:700 !important;
}

.bp-title-line{
    width:48px;
    height:1px;
    background:var(--navy);
    opacity:.22;
}


/* =========================================================
   DESKTOP FLOW
   ========================================================= */

.bp-guide-flow{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        95px
        minmax(0,1fr)
        95px
        minmax(0,1fr);

    align-items:center;
    width:100%;
}


/* =========================================================
   CARDS
   ========================================================= */

.bp-guide-item{
    position:relative;

    background:#fff;

    border:1px solid var(--border);
    border-radius:14px;

    padding:22px;

    box-sizing:border-box;

    box-shadow:
        0 8px 25px rgba(11,46,89,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.bp-guide-item:hover{
    transform:translateY(-3px);

    border-color:#C3D2E0;

    box-shadow:
        0 14px 32px rgba(11,46,89,.10);
}


/* نوار ظریف بالای کارت */

.bp-guide-item::before{
    content:"";

    position:absolute;

    top:-1px;
    right:22px;

    width:42px;
    height:3px;

    background:var(--navy);

    border-radius:0 0 3px 3px;
}


/* =========================================================
   HEADER
   ========================================================= */

.bp-item-head{
    display:flex;
    align-items:center;

    gap:13px;

    margin-bottom:16px;
}

.bp-step-badge{
    flex:0 0 48px;

    width:48px;
    height:48px;

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

    background:var(--navy);

    border-radius:10px;

    box-shadow:
        0 5px 12px rgba(11,46,89,.13);
}

.bp-step-badge span{
    color:#fff;

    font-family:inherit !important;

    font-size:13px;
    font-weight:700;
}

.bp-step-head-text{
    min-width:0;
}

.bp-step-head-text > span{
    display:block;

    margin-bottom:2px;

    color:#8997A5;

    font-family:inherit !important;

    font-size:11px;
    font-weight:500;
}

.bp-step-head-text h3{
    margin:0 !important;

    color:var(--navy) !important;

    font-family:inherit !important;

    font-size:17px !important;
    font-weight:700 !important;

    line-height:1.5 !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.bp-item-description{
    min-height:55px;

    margin-bottom:17px;

    color:var(--text);

    font-family:inherit !important;

    font-size:12.5px;
    font-weight:400;

    line-height:2;

    text-align:right;
}

.bp-item-description b{
    color:var(--navy);
    font-weight:700;
}


/* =========================================================
   SCREEN
   ========================================================= */

.bp-screen{
    width:100%;

    overflow:hidden;

    background:var(--soft);

    border:1px solid #DFE7EE;

    border-radius:10px;

    box-sizing:border-box;
}


/* نوار بالای تصویر */

.bp-screen-top{
    height:22px;

    display:flex;
    align-items:center;

    gap:5px;

    padding:0 9px;

    background:#F0F3F6;

    border-bottom:1px solid #DFE7EE;

    box-sizing:border-box;
}

.bp-screen-top span{
    width:5px;
    height:5px;

    background:#A4B1BE;

    border-radius:50%;

    flex:0 0 auto;
}


/* =========================================================
   IMAGE AREA
   مهم‌ترین بخش اصلاح شده
   ========================================================= */

.bp-screen-image{

    /* عرض همیشه برابر با عرض کارت */
    width:100%;

    /* ارتفاع ثابت و یکسان برای تمام کارت‌ها */
    height:235px;

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

    overflow:hidden;

    background:#F8FAFC;

    box-sizing:border-box;
}


/* خود تصویر */

.bp-screen-image img{

    display:block;

    width:100%;
    height:100%;

    /*
     * contain باعث می‌شود کل تصویر دیده شود
     * و چیزی از پمپ بریده نشود
     */
    object-fit:contain;

    /*
     * کمی فاصله داخلی برای اینکه پمپ
     * به لبه‌های قاب نچسبد
     */
    padding:12px;

    box-sizing:border-box;

    transition:
        transform .35s ease;
}


/* هاور خیلی ظریف */

.bp-guide-item:hover .bp-screen-image img{
    transform:scale(1.025);
}


/* =========================================================
   FOOTER
   ========================================================= */

.bp-item-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:14px;
    padding-top:12px;

    border-top:1px solid #E7ECF1;
}

.bp-item-footer span{
    color:var(--navy);

    font-family:inherit !important;

    font-size:11px;
    font-weight:600;
}

.bp-item-footer i{
    position:relative;

    width:20px;
    height:2px;

    display:block;

    background:var(--navy);

    border-radius:2px;
}

.bp-item-footer i::after{
    content:"";

    position:absolute;

    left:0;
    top:-2px;

    width:6px;
    height:6px;

    border-left:2px solid var(--navy);
    border-bottom:2px solid var(--navy);

    transform:rotate(45deg);
}


/* =========================================================
   DESKTOP ARROW
   ========================================================= */

.bp-flow-arrow{
    position:relative;

    width:95px;
    height:70px;

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

    z-index:2;
}

.bp-arrow-line{
    position:absolute;

    left:8px;
    right:8px;

    top:50%;

    height:2px;

    background:var(--navy);

    transform:translateY(-50%);

    opacity:.9;

    border-radius:3px;
}

.bp-arrow-line::before{
    content:"";

    position:absolute;

    right:0;
    top:50%;

    width:7px;
    height:7px;

    background:#fff;

    border:2px solid var(--navy);

    border-radius:50%;

    transform:translate(50%,-50%);
}

.bp-arrow-head{
    position:absolute;

    left:4px;
    top:50%;

    width:14px;
    height:14px;

    border-left:3px solid var(--navy);
    border-bottom:3px solid var(--navy);

    transform:
        translateY(-50%)
        rotate(45deg);

    filter:
        drop-shadow(0 1px 1px rgba(11,46,89,.12));
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1050px){

    .bp-guide-flow{
        grid-template-columns:
            minmax(0,1fr)
            65px
            minmax(0,1fr)
            65px
            minmax(0,1fr);
    }

    .bp-flow-arrow{
        width:65px;
    }

    .bp-guide-item{
        padding:18px;
    }

    .bp-step-head-text h3{
        font-size:15px !important;
    }

    .bp-item-description{
        font-size:12px;
    }

    .bp-screen-image{
        height:200px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .bp-pump-guide{
        padding:45px 14px;
    }

    .bp-guide-title{
        margin-bottom:30px;
    }

    .bp-guide-title h2{
        font-size:22px !important;
    }

    .bp-title-line{
        width:30px;
    }


    /* سه کارت زیر هم */

    .bp-guide-flow{
        display:flex;
        flex-direction:column;
        align-items:stretch;

        width:100%;
    }

    .bp-guide-item{
        width:100%;
        padding:19px;
        border-radius:13px;
    }


    /* =====================================================
       IMAGE — MOBILE
       ===================================================== */

    .bp-screen-image{

        width:100%;

        /*
         * ارتفاع همه تصاویر یکسان
         */
        height:210px;

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

        overflow:hidden;
    }

    .bp-screen-image img{

        width:100%;
        height:100%;

        object-fit:contain;

        padding:10px;
    }


    /* =====================================================
       MOBILE ARROW
       ===================================================== */

    .bp-flow-arrow{
        position:relative;

        width:60px;
        height:62px;

        align-self:center;

        display:flex;

        transform:none !important;
    }

    .bp-flow-arrow:hover{
        transform:none !important;
    }

    .bp-arrow-line{

        left:50%;
        right:auto;

        top:5px;
        bottom:5px;

        width:2px;
        height:auto;

        transform:translateX(-50%);

        background:var(--navy);

        opacity:.9;
    }

    .bp-arrow-line::before{

        right:auto;
        left:50%;

        top:0;

        width:7px;
        height:7px;

        transform:translate(-50%,-50%);
    }

    /* فلش رو به پایین */

    .bp-arrow-head{

        left:50%;
        top:auto;
        bottom:2px;

        width:14px;
        height:14px;

        border-left:0;
        border-bottom:3px solid var(--navy);
        border-right:3px solid var(--navy);
        border-top:0;

        transform:
            translateX(-50%)
            rotate(45deg);

        background:transparent;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .bp-pump-guide{
        padding:38px 11px;
    }

    .bp-guide-title{
        margin-bottom:25px;
    }

    .bp-guide-title h2{
        font-size:20px !important;
    }

    .bp-title-line{
        display:none;
    }

    .bp-guide-item{
        padding:16px;
        border-radius:12px;
    }

    .bp-item-head{
        gap:11px;
        margin-bottom:14px;
    }

    .bp-step-badge{
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    .bp-step-head-text h3{
        font-size:15px !important;
    }

    .bp-step-head-text > span{
        font-size:10px;
    }

    .bp-item-description{
        font-size:12px;
        line-height:1.9;
    }


    /* تصویر موبایل */

    .bp-screen-image{
        height:190px;
    }

    .bp-screen-image img{
        padding:8px;
    }

    .bp-flow-arrow{
        width:55px;
        height:58px;
    }

}/* End custom CSS */
/* Start custom CSS */<style>
/* =========================================================
   تقویت دید نوار مقایسه روی فوتر
========================================================= */

#compare-floating-bar {
    /* سرمه‌ای نفتی روشن‌تر؛ در فوتر گم نمی‌شود */
    background: linear-gradient(135deg, #123a52 0%, #1d536d 100%) !important;

    /* حاشیه طلایی واضح */
    border: 1px solid #e0b65d !important;

    /* سایه قوی برای جدا شدن از پس‌زمینه و فوتر */
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.42),
        0 5px 14px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(224, 182, 93, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* لینک اصلی مقایسه */
#compare-floating-bar #compare-page-link {
    background: transparent !important;
    color: #ffffff !important;
}

/* هاور مقایسه */
#compare-floating-bar #compare-page-link:hover,
#compare-floating-bar #compare-page-link:focus {
    background: rgba(255, 255, 255, 0.13) !important;
    color: #ffffff !important;
}

/* آیکن دو فلش */
#compare-floating-bar #compare-page-link::before {
    border-color: #ffd77f !important;
    color: #ffe0a0 !important;
}

#compare-floating-bar #compare-page-link:hover::before,
#compare-floating-bar #compare-page-link:focus::before {
    background: #f0c66c !important;
    border-color: #f0c66c !important;
    color: #153b50 !important;
}

/* عدد تعداد پمپ‌های مقایسه */
#compare-floating-bar #compare-count {
    background: linear-gradient(145deg, #ffe09a 0%, #d69b32 100%) !important;
    border-color: #fff0c8 !important;
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.32),
        inset 0 1px 1px rgba(255, 255, 255, 0.62) !important;
    color: #173d52 !important;
}

/* دکمه پاک کردن */
#compare-floating-bar #compare-clear-selection {
    background: rgba(6, 30, 43, 0.50) !important;
    border-right-color: rgba(255, 224, 151, 0.45) !important;
    color: #ffe0a0 !important;
}

#compare-floating-bar #compare-clear-selection:hover,
#compare-floating-bar #compare-clear-selection:focus {
    background: #d8a63d !important;
    color: #183e52 !important;
}

#compare-floating-bar #compare-clear-selection:hover::before,
#compare-floating-bar #compare-clear-selection:focus::before {
    border-color: #183e52 !important;
}


/* =========================================================
   دکمه «+ مقایسه» در کارت‌های پمپ
   کلاس مورد استفاده در JavaScript: .add-to-compare
========================================================= */

/* خود دکمه */
.add-to-compare {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px !important;

    border: 1px solid #1c607f !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #eaf4f8 0%, #d7eaf1 100%) !important;
    box-shadow:
        0 3px 8px rgba(20, 69, 91, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    color: #174d67 !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

/* علامت + پیش از متن دکمه */
.add-to-compare .elementor-button-text::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;

    border-radius: 50%;
    background: #1e6c8d;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 18px;
}

/* حالت رفتن موس روی دکمه */
.add-to-compare:hover,
.add-to-compare:focus {
    transform: translateY(-2px);
    border-color: #c99736 !important;
    background: linear-gradient(135deg, #fef8e8 0%, #f7e5b5 100%) !important;
    box-shadow:
        0 7px 14px rgba(22, 68, 89, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    color: #744b0c !important;
    text-decoration: none !important;
}

/* علامت + هنگام هاور */
.add-to-compare:hover .elementor-button-text::before,
.add-to-compare:focus .elementor-button-text::before {
    background: #c99736;
    color: #ffffff;
}

/* حالت انتخاب‌شده: «✓ در لیست مقایسه» */
.add-to-compare.is-added {
    border-color: #4f805d !important;
    background: linear-gradient(135deg, #3d7550 0%, #5d956a 100%) !important;
    box-shadow:
        0 4px 10px rgba(27, 89, 47, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    color: #ffffff !important;
}

/* تبدیل علامت + به تیک وقتی پمپ انتخاب شده است */
.add-to-compare.is-added .elementor-button-text::before {
    content: "✓";
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

/* هاور دکمه انتخاب‌شده */
.add-to-compare.is-added:hover,
.add-to-compare.is-added:focus {
    transform: translateY(-2px);
    border-color: #85c391 !important;
    background: linear-gradient(135deg, #487f58 0%, #6ca87a 100%) !important;
    color: #ffffff !important;
}

/* موبایل */
@media (max-width: 767px) {
    .add-to-compare {
        width: 100%;
        min-height: 44px;
        padding: 11px 14px !important;
    }
}
</style>/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'vazir';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://sg-pumps.com/wp-content/uploads/2026/06/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'vazir';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://sg-pumps.com/wp-content/uploads/2026/06/Vazirmatn-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */