/* ===================== Home Page — Dark Network Theme ===================== */

.home-page{
    --home-primary:#0f3d5c;
    --home-primary-dark:#092c42;
    --home-accent:#e8b923;
    --home-dark:#041420;
    --home-dark-2:#0a2436;
    --home-card:rgba(255,255,255,.04);
    --home-card-hover:rgba(255,255,255,.07);
    --home-border:rgba(255,255,255,.1);
    --home-border-strong:rgba(255,255,255,.22);
    --home-ink:#f2f5f7;
    --home-muted:rgba(242,245,247,.65);
    --home-bg-soft:rgba(255,255,255,.05);
    background:var(--home-dark);
}

.home-page *{
    box-sizing:border-box;
}

/* ---------- هیرو ---------- */
.home-hero{
    position:relative;
    background: url('/img/9.jpg') center center / 120% no-repeat;
    overflow:hidden;
    margin-bottom:0;
    min-height:560px;
    display:flex;
    align-items:flex-start;
}

.home-hero-grid{
    max-width:1180px;
    margin:0 auto;
    padding:60px 24px;
    width:100%;
}
@media(max-width: 767px) {
  main > div.container-fluid {
    margin-top: 5rem;
  }
}

/* استایل برای سایز کمتر از 350px */
@media (max-width: 349px) {
  .container-fluid nav {
    margin-top: 6rem;
  }
}

/* استایل موبایل برای سایز کمتر از 480px */
@media (max-width: 480px) {
    .breadcrumb {
        margin-top: 3rem;
        }
  .home-hero-grid {
    
    margin-bottom: 64px;
    /* اگر می‌خوای همون 64px رو برای بالا و پایین داشته باشی */
    
    /* یا به صورت جداگانه: */
    /* margin-top: 64px; */
    /* margin-bottom: 64px; */
  }
}

.breadcrumb {
    background-color: #e9ecef;
    border-radius: .25rem;
    padding: .75rem 1rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '\203A'; /* کد یونیکد برای فلش راست */
    display: inline-block; /* برای کنترل بهتر موقعیت */
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-size: 1.5rem; /* اندازه بزرگ‌تر */
    line-height: 1; /* تنظیم ارتفاع خط برای تراز بهتر */
    vertical-align: middle; /* تراز عمودی با متن */
    position: relative; /* برای تنظیم دقیق */
    top: -1px; /* جابه‌جایی عمودی برای تراز دقیق */
}

.breadcrumb-item > a {
    text-decoration: none;
}

.breadcrumb-item {
    display: inline-flex; /* اطمینان از تراز آیتم‌ها */
    align-items: center; /* تراز عمودی آیتم‌ها و فلش */
}

/* فقط در سایزهای بزرگتر از 480px */
@media (min-width: 481px) {
    .page-breadcrumb,
    .breadcrumb,
    .breadcrumb-custom.breadcrumb {
        margin-top: 1rem;
    }
}

.home-hero-text{
    max-width:620px;
    background:rgba(4,20,32,.62);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-radius:20px;
    padding:36px 40px;
    border:1px solid rgba(255,255,255,.25);

    opacity:0;
    transform:translateY(35px) scale(.97);

    box-shadow:
            0 0 10px rgba(255,255,255,.20),
            0 0 30px rgba(255,255,255,.12),
            0 0 60px rgba(255,255,255,.06),
            0 20px 50px rgba(0,0,0,.35);

    animation:homeHeroReveal 3.9s cubic-bezier(.2,.7,.3,1) .25s forwards;
}

@keyframes homeHeroReveal{

    0%{
        opacity:0;
        transform:translateY(35px) scale(.97);

        box-shadow:
                0 0 0 rgba(255,255,255,0),
                0 0 0 rgba(255,255,255,0),
                0 0 0 rgba(255,255,255,0),
                0 20px 50px rgba(0,0,0,0);
    }

    60%{
        opacity:.85;
        transform:translateY(5px) scale(.995);

        box-shadow:
                0 0 18px rgba(255,255,255,.45),
                0 0 45px rgba(255,255,255,.25),
                0 0 80px rgba(255,255,255,.12),
                0 20px 50px rgba(0,0,0,.30);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);

        box-shadow:
                0 0 20px rgba(255,255,255,.55),
                0 0 55px rgba(255,255,255,.35),
                0 0 110px rgba(255,255,255,.20),
                0 20px 50px rgba(0,0,0,.35);
    }
}


.home-hero-text h1{
    color:#fff;
    font-size:2.4rem;
    font-weight:800;
    line-height:1.75;
    margin:0 0 20px;
}

.home-hero-text h1 em{
    font-style:normal;
    color:var(--home-accent);
}

.home-hero-text p{
    color:rgba(255,255,255,.9);
    font-size:1.05rem;
    line-height:2.05;
    margin:0 0 32px;
}

.home-hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

@media (max-width:900px){
    .home-hero{
        min-height:78vh;
        align-items:flex-start;
        background-position: center 35%;
    }
  
    .home-hero-text{
        max-width:100%;
        padding:22px 20px;
        border-radius:16px;
    }
    .home-hero-text h1{
        font-size:1.5rem;
        margin-bottom:14px;
        line-height:1.7;
    }
    .home-hero-text p{
        font-size:.92rem;
        line-height:1.9;
        margin-bottom:22px;
    }
    .home-hero-actions{
        justify-content:center;
        gap:10px;
    }
    .home-hero-actions .home-btn{
        padding:12px 20px;
        font-size:.88rem;
        flex:1 1 auto;
        justify-content:center;
    }
}

@media (max-width:480px){
    .home-hero{
        min-height:72vh;
    }
    .home-hero-text h1{
        font-size:1.3rem;
    }
}

/* ---------- دکمه‌های عمومی ---------- */
.home-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:15px 30px;
    border-radius:10px;
    font-weight:700;
    font-size:.98rem;
    text-decoration:none;
    transition:.25s;
    border:2px solid transparent;
}

.home-btn-fill{
    background:var(--home-accent);
    color:var(--home-primary-dark);
}
.home-btn-fill:hover{
    background:#f4c948;
    color:var(--home-primary-dark);
    transform:translateY(-2px);
    box-shadow:0 0 25px rgba(232,185,35,.4);
}

.home-btn-line{
    border-color:rgba(255,255,255,.55);
    color:#fff;
    background:rgba(255,255,255,.05);
}
.home-btn-line:hover{
    border-color:#fff;
    background:rgba(255,255,255,.14);
    color:#fff;
    box-shadow:0 0 20px rgba(255,255,255,.25);
}

/* ---------- بدنه‌ی صفحه ---------- */
.home-wrap{
    max-width:1180px;
    margin:0 auto;
    padding:70px 24px 0;
}

.home-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 42px;
}

.home-head span{
    display:inline-block;
    font-size:.85rem;
    font-weight:700;
    color:var(--home-accent);
    background:var(--home-card);
    border:1px solid var(--home-border);
    padding:6px 18px;
    border-radius:20px;
    margin-bottom:14px;
}

.home-head h2{
    font-size:1.75rem;
    font-weight:800;
    color:var(--home-ink);
    margin:0 0 12px;
}

.home-head p{
    color:var(--home-muted);
    line-height:2;
    margin:0;
}

/* ---------- بنر ارزیابی رایگان ---------- */
.home-eval{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    background:var(--home-card);
    border:1px solid var(--home-border);
    border-radius:22px;
    padding:38px 42px;
    margin:70px 0;
    transition:.3s;
}
.home-eval:hover{
    border-color:var(--home-border-strong);
    box-shadow:0 0 40px rgba(255,255,255,.08);
}

.home-eval-text h3{
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
    margin:0 0 8px;
}

.home-eval-text p{
    color:var(--home-muted);
    margin:0;
    line-height:1.9;
}

.home-eval .home-btn-fill{
    white-space:nowrap;
}

@media (max-width:768px){
    .home-eval{ text-align:center; justify-content:center; padding:30px 24px; }
}

/* ---------- فرآیند ---------- */
.home-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    margin:0 0 70px;
    position:relative;
}

.home-step{
    text-align:center;
    padding:0 18px;
    position:relative;
}

.home-step-num{
    width:52px;
    height:52px;
    line-height:48px;
    border-radius:50%;
    background:var(--home-card);
    color:#fff;
    font-weight:800;
    font-size:1.1rem;
    margin:0 auto 18px;
    border:2px solid var(--home-border-strong);
    transition:.3s;
}

.home-step:hover .home-step-num{
    box-shadow:0 0 20px rgba(255,255,255,.35);
    border-color:#fff;
}

.home-step h4{
    font-size:1.02rem;
    font-weight:700;
    color:var(--home-ink);
    margin:0 0 8px;
}

.home-step p{
    font-size:.92rem;
    color:var(--home-muted);
    line-height:1.9;
    margin:0;
}

@media (max-width:900px){
    .home-steps{ grid-template-columns:1fr 1fr; gap:34px 0; }
}
@media (max-width:560px){
    .home-steps{ grid-template-columns:1fr; gap:30px 0; }
}

/* ---------- خدمات ---------- */
.home-services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:70px;
}

.home-service-card{
    display:block;
    position:relative;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    padding:28px;
    text-decoration:none;

    opacity:0;
    transform:translateY(35px) scale(.97);

    /* نور سفید اطراف کارت */
    box-shadow:
            0 0 8px rgba(255,255,255,.16),
            0 0 20px rgba(255,255,255,.10),
            0 0 40px rgba(255,255,255,.05);

    transition:
            opacity 1.2s ease,
            transform 1.2s cubic-bezier(.2,.7,.3,1),
            box-shadow .3s ease,
            border-color .3s ease,
            background .3s ease;
}
.home-service-card.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

.home-service-card:hover{
    transform:translateY(-7px);

    background:rgba(255,255,255,.065);

    border-color:rgba(255,255,255,.75);

    /* نور بیشتر هنگام هاور */
    box-shadow:
            0 0 10px rgba(255,255,255,.55),
            0 0 25px rgba(255,255,255,.40),
            0 0 50px rgba(255,255,255,.25),
            0 0 80px rgba(255,255,255,.12);
}

.home-service-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:var(--home-accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:16px;
    border:1px solid var(--home-border);
}

.home-service-card h4{
    font-size:1.05rem;
    font-weight:700;
    color:var(--home-ink);
    margin:0 0 8px;
}

.home-service-card p{
    font-size:.9rem;
    color:var(--home-muted);
    line-height:1.85;
    margin:0;
}

@media (max-width:900px){
    .home-services{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
    .home-services{ grid-template-columns:1fr; }
}

/* ---------- پکیج‌ها ---------- */
.home-packages{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-bottom:70px;
}

.home-package{
    background:var(--home-card);
    border:1px solid var(--home-border);
    border-radius:18px;
    padding:30px 26px;
    display:flex;
    flex-direction:column;
    transition:.25s;
}

.home-package:hover{
    border-color:var(--home-border-strong);
    box-shadow:0 0 35px rgba(255,255,255,.1);
    transform:translateY(-4px);
}

.home-package.is-featured{
    border:2px solid var(--home-accent);
    position:relative;
    box-shadow:0 0 40px rgba(232,185,35,.18);
}

.home-package-badge{
    position:absolute;
    top:-13px;
    right:26px;
    background:var(--home-accent);
    color:var(--home-primary-dark);
    font-size:.78rem;
    font-weight:800;
    padding:4px 14px;
    border-radius:20px;
}

.home-package h4{
    font-size:1.15rem;
    font-weight:800;
    color:var(--home-ink);
    margin:0 0 18px;
}

.home-package ul{
    list-style:none;
    padding:0;
    margin:0 0 24px;
    flex-grow:1;
}

.home-package li{
    position:relative;
    padding-right:26px;
    margin-bottom:12px;
    font-size:.92rem;
    color:var(--home-muted);
    line-height:1.8;
}

.home-package li::before{
    content:"";
    position:absolute;
    right:0;
    top:6px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--home-accent);
    box-shadow:0 0 8px rgba(232,185,35,.6);
}

.home-package .home-btn{
    width:100%;
    justify-content:center;
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid var(--home-border);
}

.home-package.is-featured .home-btn{
    background:var(--home-accent);
    color:var(--home-primary-dark);
    border-color:var(--home-accent);
}

@media (max-width:900px){
    .home-packages{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; margin-bottom:70px; }
}

/* ---------- دستاوردها ---------- */
.home-stats{
    background:var(--home-card);
    border:1px solid var(--home-border);
    border-radius:24px;
    padding:50px 40px;
    margin-bottom:0;
}

.home-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:center;
}

.home-stat b{
    display:block;
    font-size:2.1rem;
    font-weight:800;
    color:#fff;
    margin-bottom:6px;
    text-shadow:0 0 20px rgba(255,255,255,.35);
}

.home-stat span{
    font-size:.88rem;
    color:var(--home-muted);
}

@media (max-width:900px){
    .home-stats-grid{ grid-template-columns:1fr 1fr; gap:34px 20px; }
    .home-stats{ padding:40px 24px; }
}
@media (max-width:560px){
    .home-stats-grid{ grid-template-columns:1fr; }
}

/* ---------- فاصله انتهایی صفحه قبل از فوتر ---------- */
.home-page > .home-wrap{
    padding-bottom:70px;
}

/* ---------- انیمیشن مراحل فرآیند ---------- */

.home-step{
    opacity:0;
    transform:translateY(35px) scale(.92);
    transition:
            opacity 1.2s ease,
            transform 1.2s cubic-bezier(.2,.7,.3,1);
}

/* وقتی مرحله وارد صفحه شد */
.home-step.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* دایره شماره مرحله */
.home-step-num{
    position:relative;
    transition:
            box-shadow .5s ease,
            border-color .5s ease,
            transform .5s ease;
}

/* در لحظه ظاهر شدن، کمی نور بگیرد */
.home-step.is-visible .home-step-num{
    border-color:rgba(255,255,255,.8);

    box-shadow:
            0 0 8px rgba(255,255,255,.45),
            0 0 20px rgba(255,255,255,.25),
            0 0 35px rgba(255,255,255,.12);
}

/* یک Pulse خیلی آرام بعد از ظاهر شدن */
.home-step.is-visible .home-step-num{
    animation:homeStepGlow 2.5s ease-in-out 1;
}

@keyframes homeStepGlow{
    0%{
        box-shadow:
                0 0 0 rgba(255,255,255,0);
        transform:scale(.8);
    }

    40%{
        box-shadow:
                0 0 12px rgba(255,255,255,.7),
                0 0 30px rgba(255,255,255,.4),
                0 0 50px rgba(255,255,255,.2);
        transform:scale(1.08);
    }

    100%{
        box-shadow:
                0 0 8px rgba(255,255,255,.45),
                0 0 20px rgba(255,255,255,.25),
                0 0 35px rgba(255,255,255,.12);
        transform:scale(1);
    }
}
/* ثابت کردن هدر بالایی */
.top-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #fff;
}



/* فاصله برای محتوای اصلی */
.main-content-wrapper {
    padding-top: 20px;
}