.elementor-5024 .elementor-element.elementor-element-2f46f62{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5024 .elementor-element.elementor-element-1a5aacc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-1a5aacc *//* =========================================================
   HFP | DIGIKALA SELLER BOT CASE STUDY
   Project: woo-seller-bot
========================================================= */

.hfp-dk{
    --navy:#07192f;
    --navy-2:#0c3158;
    --blue:#1677ff;
    --cyan:#20b8e5;
    --green:#16a673;
    --red:#ef4056;
    --bg:#f5f8fc;
    --text:#182235;
    --muted:#69758a;
    --border:#e2e9f1;
    --white:#fff;

    width:100%;
    overflow:hidden;
    direction:rtl;
    color:var(--text);
    font-family:inherit;
}

.hfp-dk *,
.hfp-dk *:before,
.hfp-dk *:after{
    box-sizing:border-box;
}

.hfp-dk h1,
.hfp-dk h2,
.hfp-dk h3,
.hfp-dk h4{
    font-family:inherit !important;
    margin-top:0 !important;
}

.hfp-dk h1{
    color:#fff !important;
}

.hfp-dk h2,
.hfp-dk h3,
.hfp-dk h4{
    color:var(--text) !important;
}

.hfp-dk p{
    font-family:inherit !important;
}

.hfp-wrap{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
}


/* =========================================
   HERO
========================================= */

.hfp-dk-hero{
    position:relative;
    padding:26px 0 90px;
    color:#fff;
    background:
        radial-gradient(circle at 88% 15%,rgba(239,64,86,.20),transparent 27%),
        radial-gradient(circle at 4% 90%,rgba(22,119,255,.24),transparent 32%),
        linear-gradient(135deg,#061427,#0a2a4c 55%,#104a7c);
    border-radius:0 0 46px 46px;
}

.hfp-dk-hero:before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-160px;
    top:35px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
}

.hfp-dk-hero:after{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    left:-100px;
    bottom:-70px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
}

.hfp-dk-breadcrumb{
    position:relative;
    z-index:3;
    margin-bottom:40px;
    color:rgba(255,255,255,.76) !important;
    font-size:14px !important;
}

.hfp-dk-breadcrumb,
.hfp-dk-breadcrumb *{
    color:rgba(255,255,255,.82) !important;
}

.hfp-dk-breadcrumb a{
    color:#fff !important;
    text-decoration:none !important;
}

.hfp-dk-hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:58px;
    align-items:center;
}

.hfp-dk-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 15px;
    margin-bottom:20px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:13px;
}

.hfp-dk-badge:before{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#47e0a5;
    box-shadow:0 0 0 5px rgba(71,224,165,.12);
}

.hfp-dk-hero h1{
    margin-bottom:20px !important;
    font-size:43px !important;
    font-weight:900 !important;
    line-height:1.55 !important;
}

.hfp-dk-lead{
    margin:0 !important;
    max-width:650px;
    color:#d4e1ed !important;
    font-size:17px !important;
    line-height:2.05 !important;
}

.hfp-dk-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:29px;
}

.hfp-dk-btn{
    min-height:51px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    border-radius:12px;
    text-decoration:none !important;
    font-family:inherit !important;
    font-weight:900 !important;
    transition:.25s ease;
}

.hfp-dk-btn:hover{
    transform:translateY(-3px);
}

.hfp-dk-btn-primary{
    color:#0b2a4c !important;
    background:#fff;
    box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.hfp-dk-btn-outline{
    color:#fff !important;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.25);
}

.hfp-dk-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:25px;
}

.hfp-dk-tag{
    padding:7px 11px;
    border-radius:8px;
    background:rgba(255,255,255,.07);
    color:#dae8f4;
    font-size:12px;
}


/* REAL PROJECT IMAGE */

.hfp-dk-project-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:440px;
    padding:20px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:30px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(15px);
    box-shadow:0 30px 70px rgba(0,0,0,.28);
}

.hfp-dk-project-image img{
    display:block;
    width:100%;
    height:auto;
    max-height:490px;
    object-fit:contain;
    object-position:center;
    border-radius:19px;
}

.hfp-dk-floating{
    position:absolute;
    z-index:4;
    padding:12px 15px;
    border-radius:12px;
    background:#fff;
    color:#172438;
    box-shadow:0 15px 38px rgba(0,0,0,.22);
    font-size:12px;
    font-weight:900;
}

.hfp-dk-floating-one{
    right:-25px;
    top:52px;
}

.hfp-dk-floating-two{
    left:-24px;
    bottom:40px;
}


/* =========================================
   GENERAL
========================================= */

.hfp-dk-section{
    padding:88px 0;
}

.hfp-dk-soft{
    background:var(--bg);
}

.hfp-dk-heading{
    max-width:770px;
    margin:0 auto 44px;
    text-align:center;
}

.hfp-dk-kicker{
    display:inline-block;
    margin-bottom:10px;
    color:var(--blue);
    font-size:13px;
    font-weight:900;
}

.hfp-dk-heading h2{
    margin-bottom:14px !important;
    color:var(--text) !important;
    font-size:34px !important;
    line-height:1.6 !important;
    font-weight:900 !important;
}

.hfp-dk-heading p{
    margin:0 !important;
    color:var(--muted) !important;
    font-size:16px !important;
    line-height:2 !important;
}


/* =========================================
   PROBLEMS
========================================= */

.hfp-dk-grid3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:21px;
}

.hfp-dk-card{
    padding:29px;
    border:1px solid var(--border);
    border-radius:21px;
    background:#fff;
    box-shadow:0 9px 28px rgba(25,47,76,.05);
    transition:.3s ease;
}

.hfp-dk-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(25,47,76,.10);
}

.hfp-dk-icon{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:14px;
    background:#eef4ff;
    font-size:24px;
}

.hfp-dk-card h3{
    margin-bottom:9px !important;
    font-size:19px !important;
    font-weight:900 !important;
    line-height:1.7 !important;
}

.hfp-dk-card p{
    margin:0 !important;
    color:var(--muted) !important;
    line-height:1.95 !important;
}


/* =========================================
   SOLUTION
========================================= */

.hfp-dk-solution{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    padding:48px;
    border:1px solid var(--border);
    border-radius:30px;
    background:#fff;
    box-shadow:0 18px 55px rgba(24,45,75,.07);
}

.hfp-dk-solution h2{
    margin-bottom:15px !important;
    font-size:31px !important;
    font-weight:900 !important;
    line-height:1.65 !important;
}

.hfp-dk-solution p{
    color:var(--muted) !important;
    line-height:2 !important;
}

.hfp-dk-checks{
    display:grid;
    gap:12px;
    margin-top:22px;
}

.hfp-dk-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.hfp-dk-check i{
    width:23px;
    height:23px;
    flex:0 0 23px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e7f8f1;
    color:var(--green);
    font-style:normal;
    font-weight:900;
}

.hfp-dk-solution-panel{
    display:grid;
    gap:12px;
}

.hfp-dk-panel-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border-radius:16px;
    background:#f5f8fc;
}

.hfp-dk-panel-icon{
    width:53px;
    height:53px;
    flex:0 0 53px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    font-size:23px;
}

.hfp-dk-panel-item strong{
    display:block;
    margin-bottom:4px;
    color:var(--text);
}

.hfp-dk-panel-item span{
    color:var(--muted);
    font-size:13px;
}


/* =========================================
   FEATURES
========================================= */

.hfp-dk-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.hfp-dk-feature{
    display:flex;
    gap:18px;
    padding:25px;
    border:1px solid var(--border);
    border-radius:19px;
    background:#fff;
}

.hfp-dk-feature-num{
    width:43px;
    height:43px;
    flex:0 0 43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    font-weight:900;
}

.hfp-dk-feature h3{
    margin-bottom:7px !important;
    font-size:18px !important;
    font-weight:900 !important;
}

.hfp-dk-feature p{
    margin:0 !important;
    color:var(--muted) !important;
    line-height:1.9 !important;
}


/* =========================================
   PROJECT IMAGE DETAIL
========================================= */

.hfp-dk-showcase{
    display:grid;
    grid-template-columns:1fr .85fr;
    gap:42px;
    align-items:center;
}

.hfp-dk-showcase-image{
    padding:18px;
    border:1px solid var(--border);
    border-radius:25px;
    background:#fff;
    box-shadow:0 15px 45px rgba(24,45,75,.08);
}

.hfp-dk-showcase-image img{
    display:block;
    width:100%;
    height:auto;
    max-height:560px;
    object-fit:contain;
    border-radius:16px;
}

.hfp-dk-showcase-copy h2{
    margin-bottom:15px !important;
    font-size:31px !important;
    line-height:1.65 !important;
    font-weight:900 !important;
}

.hfp-dk-showcase-copy p{
    color:var(--muted) !important;
    line-height:2 !important;
}


/* =========================================
   SEO / SEMANTIC
========================================= */

.hfp-dk-dark{
    background:
        radial-gradient(circle at 90% 0,rgba(32,184,229,.12),transparent 30%),
        linear-gradient(135deg,#07192f,#0d365f);
    color:#fff;
}

.hfp-dk-dark .hfp-dk-heading h2{
    color:#fff !important;
}

.hfp-dk-dark .hfp-dk-heading p{
    color:#cad8e6 !important;
}

.hfp-dk-intents{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.hfp-dk-intent{
    padding:25px;
    text-align:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.06);
}

.hfp-dk-intent strong{
    display:block;
    margin-bottom:7px;
    color:#fff;
    font-size:16px;
}

.hfp-dk-intent p{
    margin:0 !important;
    color:#bad0e2 !important;
    font-size:13px !important;
    line-height:1.9 !important;
}


/* =========================================
   RELATED INTERNAL LINKS
========================================= */

.hfp-dk-related{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.hfp-dk-related a{
    display:flex;
    flex-direction:column;
    padding:24px;
    border:1px solid var(--border);
    border-radius:19px;
    background:#fff;
    text-decoration:none !important;
    transition:.3s ease;
}

.hfp-dk-related a:hover{
    transform:translateY(-5px);
    box-shadow:0 17px 40px rgba(24,45,75,.09);
}

.hfp-dk-related small{
    display:block;
    margin-bottom:8px;
    color:var(--blue);
    font-size:12px;
    font-weight:900;
}

.hfp-dk-related strong{
    display:block;
    margin-bottom:8px;
    color:var(--text);
    font-size:16px;
    line-height:1.7;
}

.hfp-dk-related p{
    margin:0 !important;
    color:var(--muted) !important;
    font-size:13px !important;
    line-height:1.85 !important;
}


/* =========================================
   FAQ
========================================= */

.hfp-dk-faq{
    max-width:900px;
    margin:auto;
    display:grid;
    gap:13px;
}

.hfp-dk-faq details{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
}

.hfp-dk-faq summary{
    position:relative;
    cursor:pointer;
    list-style:none;
    padding:20px 55px 20px 22px;
    color:var(--text);
    font-weight:900;
}

.hfp-dk-faq summary::-webkit-details-marker{
    display:none;
}

.hfp-dk-faq summary:before{
    content:"+";
    position:absolute;
    right:21px;
    top:16px;
    width:29px;
    height:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#eef4ff;
    color:var(--blue);
    font-size:20px;
}

.hfp-dk-faq details[open] summary:before{
    content:"−";
}

.hfp-dk-faq p{
    margin:0 !important;
    padding:0 22px 20px;
    color:var(--muted) !important;
    line-height:2 !important;
}


/* =========================================
   CTA
========================================= */

.hfp-dk-cta{
    padding:0 0 90px;
}

.hfp-dk-cta-box{
    padding:52px 35px;
    text-align:center;
    border-radius:29px;
    color:#fff;
    background:
        radial-gradient(circle at 10% 10%,rgba(239,64,86,.25),transparent 28%),
        linear-gradient(135deg,#061528,#10518d);
}

.hfp-dk-cta-box h2{
    margin-bottom:12px !important;
    color:#fff !important;
    font-size:32px !important;
    font-weight:900 !important;
    line-height:1.65 !important;
}

.hfp-dk-cta-box p{
    max-width:700px;
    margin:0 auto !important;
    color:#d7e4f0 !important;
    line-height:2 !important;
}


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

@media(max-width:1050px){

    .hfp-dk-related{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){

    .hfp-dk-hero-grid,
    .hfp-dk-solution,
    .hfp-dk-showcase{
        grid-template-columns:1fr;
    }

    .hfp-dk-grid3,
    .hfp-dk-intents{
        grid-template-columns:1fr 1fr;
    }

    .hfp-dk-project-image{
        min-height:auto;
    }

    .hfp-dk-floating{
        display:none;
    }

}

@media(max-width:680px){

    .hfp-wrap{
        width:min(100% - 26px,1180px);
    }

    .hfp-dk-hero{
        padding:20px 0 60px;
        border-radius:0 0 29px 29px;
    }

    .hfp-dk-breadcrumb{
        margin-bottom:27px;
    }

    .hfp-dk-hero h1{
        font-size:29px !important;
        line-height:1.7 !important;
    }

    .hfp-dk-lead{
        font-size:15px !important;
    }

    .hfp-dk-actions{
        flex-direction:column;
    }

    .hfp-dk-btn{
        width:100%;
    }

    .hfp-dk-section{
        padding:62px 0;
    }

    .hfp-dk-heading h2,
    .hfp-dk-solution h2,
    .hfp-dk-showcase-copy h2,
    .hfp-dk-cta-box h2{
        font-size:25px !important;
        line-height:1.7 !important;
    }

    .hfp-dk-grid3,
    .hfp-dk-feature-grid,
    .hfp-dk-intents,
    .hfp-dk-related{
        grid-template-columns:1fr;
    }

    .hfp-dk-solution{
        padding:25px;
    }

    .hfp-dk-project-image{
        padding:12px;
        border-radius:20px;
    }

    .hfp-dk-cta-box{
        padding:38px 20px;
    }

}

/* =========================================
   SMART PRICING EXTENSIONS
========================================= */
.hfp-dk-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.hfp-dk-pricing-card{
    padding:28px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 30px rgba(24,45,75,.06);
}
.hfp-dk-pricing-card .hfp-dk-icon{
    margin-bottom:16px;
}
.hfp-dk-pricing-card h3{
    margin-bottom:9px !important;
    font-size:19px !important;
    font-weight:900 !important;
    line-height:1.7 !important;
}
.hfp-dk-pricing-card p{
    margin:0 !important;
    color:var(--muted) !important;
    line-height:1.95 !important;
}
.hfp-dk-pricing-note{
    margin-top:20px;
    padding:16px 18px;
    border-radius:14px;
    background:#eef4ff;
    color:#35506f;
    font-size:13px;
    line-height:1.9;
}
@media(max-width:900px){
    .hfp-dk-pricing-grid{grid-template-columns:1fr;}
}/* End custom CSS */