/* ========== استایل مشترک برای تمام عنوان‌های بخش (رنگ مشکی مدرن) ========== */
/* ===================
fonts
====================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700&display=swap');
@charset "UTF-8";

@font-face {
    font-family: "irsans-b";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/iranSans/irsans-b.eot?67d2920ac1e0164c957e884da0b1fc2b);
    src: url(../fonts/iranSans/irsans-b.eot?67d2920ac1e0164c957e884da0b1fc2b) format("embedded-opentype"), url(../fonts/iranSans/irsans-b.woff?a6c7f37a03e19d237de343688a10330f) format("woff"), url(../fonts/iranSans/irsans-b.ttf?3c04bd57fa8240b0ec575d8c1ff80dbb) format("truetype");
}

@font-face {
    font-family: "irsans-m";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/iranSans/irsans-m.eot?3953f2446de46ca0a52f371df635a547);
    src: url(../fonts/iranSans/irsans-m.eot?3953f2446de46ca0a52f371df635a547) format("embedded-opentype"), url(../fonts/iranSans/irsans-m.woff?7698268f336a35d87bbf591a0fe5f41d) format("woff"), url(../fonts/iranSans/irsans-m.ttf?2ae855f1c7b7756f2aba76f0915b20b8) format("truetype");
}

@font-face {
    font-family: "irsans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/iranSans/irsans.eot?4f3cd08001a912553842788147e162c2);
    src: url(../fonts/iranSans/irsans.eot?4f3cd08001a912553842788147e162c2) format("embedded-opentype"), url(../fonts/iranSans/irsans.woff?ba2fd9dab30cd8771aa3b53aa6b036e3) format("woff"), url(../fonts/iranSans/irsans.ttf?71617be58eaec728ca3b9d4d5da8b11d) format("truetype");
}

@font-face {
    font-family: "irsans-l";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/iranSans/irsans-l.eot?c3e2315906102c635b02db3a6666299b);
    src: url(../fonts/iranSans/irsans-l.eot?c3e2315906102c635b02db3a6666299b) format("embedded-opentype"), url(../fonts/iranSans/irsans-l.woff?ef7595542cb1d899cefcabddb3a59f7f) format("woff"), url(../fonts/iranSans/irsans-l.ttf?2fd2464904104b41ac006f718c6de468) format("truetype");
}

@font-face {
    font-family: "irsans-u";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/iranSans/irsans-u.eot?c6348f2607ffbf9f301e2a2bd6bfba4c);
    src: url(../fonts/iranSans/irsans-u.eot?c6348f2607ffbf9f301e2a2bd6bfba4c) format("embedded-opentype"), url(../fonts/iranSans/irsans-u.woff?c2cac1dd087e299cd537621798bd50eb) format("woff"), url(../fonts/iranSans/irsans-u.ttf?cbc29f4ae7f67bce75b49ee6f69678ff) format("truetype");
}

body {
    /*font-family: 'Vazirmatn', sans-serif;*/
    background: #EFF2F5 !important;
    margin: 0;
    /* padding: 20px 0; */
    font-family: "irsans", irsans, sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: normal;
    color: #757F95;
    line-height: 1.8;
}


.Color-White {
    color: #FFF !important; /* مشکی/خاکستری تیره مدرن */
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.section-title-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    color: white;
    transition: transform 0.3s ease;
    background: linear-gradient(135deg, #224173, #1b3560);
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
}

.section-title-wrapper:hover .section-title-icon {
    transform: scale(1.05);
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    color: #1e293b;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
    transition: color 0.2s;
}

body.dark-mode .section-title {
    color: #f1f5f9;
}

/* خط تزئینی زیر عنوان (آبی تیره - ملایم) */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, #224173, #1b3560);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.section-title-wrapper:hover .section-title::after {
    width: 100%;
}

/* دکمه مشاهده همه - افکت پر شدن از راست به چپ */
.section-view-all {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #224173;
    border: 2px solid #224173;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.5s ease, border-color 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    overflow: hidden;
    box-shadow: none;
    cursor: pointer;
}

    /* لایه رنگی که از راست به چپ گسترش می‌یابد */
    .section-view-all::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 0%;
        height: 100%;
        background: linear-gradient(135deg, #224173, #1b3560);
        transition: width 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
        z-index: -1;
        border-radius: 40px;
    }

    /* در هاور: لایه رنگی به عرض 100% می‌رسد (از راست پر می‌شود) */
    .section-view-all:hover::before {
        width: 100%;
    }

    /* تغییر رنگ متن و حاشیه هنگام هاور */
    .section-view-all:hover {
        color: #ffffff;
        border-color: transparent;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(34, 65, 115, 0.3);
    }

    .section-view-all i {
        transition: transform 0.3s ease;
    }

    .section-view-all:hover i {
        transform: translateX(-4px);
    }

/* دارک مود */
body.dark-mode .section-view-all {
    color: #9aa8c9;
    border-color: #9aa8c9;
}

    body.dark-mode .section-view-all::before {
        background: linear-gradient(135deg, #3b4870, #4a5a8a);
    }

    body.dark-mode .section-view-all:hover {
        color: #ffffff;
        border-color: transparent;
    }

/* ========== استایل عنوان‌های «درباره ما»، «سوالات متداول»، «درخواست تعمیر فوری» ========== */
.section-heading {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #1e293b;
    display: inline-block;
    position: relative;
}

body.dark-mode .section-heading {
    color: #f1f5f9;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, #224173, #1b3560);
    border-radius: 3px;
}

/* ========== ریسپانسیو موبایل ========== */
@media (max-width: 767px) {
    .section-title {
        font-size: 1.6rem;
    }

    .section-title-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .section-view-all {
        padding: 7px 18px;
        font-size: 0.8rem;
    }

    .section-heading {
        font-size: 1.7rem;
    }

        .section-heading::after {
            width: 50px;
            bottom: -6px;
        }
}

:root {
    --service-accent: #224173;
    --bg-section: #f4f5f7;
    --bg-card: #fff;
    --text-dark: #1e293b;
    --text-muted: #475569;
    --shadow: 0 10px 30px rgba(0,0,0,0.06);
    --shadow-hover: 0 16px 40px rgba(0,0,0,0.12);
    --tag-bg: #e6f2f8;
    --tag-color: #224173;
    --btn-border: #224173;
    --divider: #e2e8f0;
}

body.dark-mode {
    --bg-section: #0f172a;
    --bg-card: #1e293b;
    --text-dark: #f1f5f9;
    --text-muted: #cbd5e1;
    --shadow: 0 10px 30px rgba(0,0,0,0.3);
    --shadow-hover: 0 16px 40px rgba(0,0,0,0.5);
    --tag-bg: #334155;
    --tag-color: #1b3560;
    --btn-border: #1b3560;
    --divider: #334155;
}

body {
    /*font-family: 'Vazirmatn', sans-serif;*/
    background: #f8fafc;
    transition: background 0.3s, color 0.3s;
}

/* ========== منو ========== */
.navbar {
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(4px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.5rem;
}

.nav-link {
    transition: color 0.2s;
}

    .nav-link.highlight {
        background: #f7f7f7;
        color: #224173 !important;
        border-radius: 2rem;
        padding: 0.4rem 1rem;
        font-weight: 700;
    }

body.dark-mode .navbar {
    background: rgba(18, 24, 38, 0.98) !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .nav-link {
    color: #f1f5f9 !important;
}

.offcanvas {
    max-width: 300px;
    background: #ffffff;
}

body.dark-mode .offcanvas {
    background: #1e293b;
    color: #e2e8f0;
}

.offcanvas .nav-link {
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
}

    .offcanvas .nav-link.highlight {
        background: #224173;
        color: white !important;
    }

.mobile-contact-btn {
    background: #224173;
    border-radius: 3rem;
    text-align: center;
    margin-top: 2rem;
    padding: 0.8rem;
}

    .mobile-contact-btn a {
        color: white;
        text-decoration: none;
        font-weight: 600;
        display: block;
    }

/* ========== منوی موبایل اولترا مدرن ========== */
.offcanvas {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    border-right: none;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.15);
    width: 85% !important;
    max-width: 320px;
}

body.dark-mode .offcanvas {
    background: rgba(18, 24, 38, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
}

.offcanvas-header {
    border-bottom: 1px solid rgba(34, 65, 115, 0.129);
    padding: 1.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(34,65,115,0.15), rgba(255,107,53,0.05));
}

.offcanvas-title {
    font-weight: 800;
    font-size: 1.8rem;
    background: linear-gradient(135deg, #224173, #1b3560);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
}

.offcanvas-body {
    padding: 1.5rem 1rem;
}

.offcanvas .nav {
    gap: 0.5rem;
}

.offcanvas .nav-link {
    font-size: 1.1rem;
    padding: 0.9rem 1.2rem;
    border-radius: 1.5rem;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    color: #1e2a3a;
    backdrop-filter: blur(5px);
    background: rgba(255,255,255,0.3);
    margin-bottom: 0.5rem;
}

body.dark-mode .offcanvas .nav-link {
    color: #f1f5f9;
    background: rgba(255,255,255,0.05);
}

.offcanvas .nav-link i {
    width: 28px;
    font-size: 1.2rem;
    color: #224173;
    transition: transform 0.2s ease;
}

.offcanvas .nav-link:hover {
    background: linear-gradient(95deg, #224173, #1b3560);
    color: white !important;
    transform: translateX(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
}

    .offcanvas .nav-link:hover i {
        color: white;
        transform: scale(1.1) translateX(-2px);
    }

.offcanvas .nav-link.active {
    background: linear-gradient(95deg, #224173, #1b3560);
    color: white !important;
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    border-right: none;
}

    .offcanvas .nav-link.active i {
        color: white;
    }

.offcanvas .nav-link.highlight {
    background: rgba(34, 65, 115, 0.15);
    border: 1px solid #224173;
    color: #224173;
}

    .offcanvas .nav-link.highlight.active {
        background: #224173;
        color: white;
    }

.mobile-contact-btn {
    background: linear-gradient(135deg, #224173, #1b3560);
    border-radius: 2rem;
    margin-top: 2rem;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
}

    .mobile-contact-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    }

    .mobile-contact-btn a {
        display: block;
        padding: 1rem;
        font-weight: 800;
        letter-spacing: 1px;
    }
/* انیمیشن ورود */
.offcanvas.show {
    animation: slideInModern 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInModern {
    from {
        transform: translateX(100%);
        opacity: 0;
        filter: blur(10px);
    }

    to {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* دکمه شناور و دارک مود مدرن */
.dark-mode-toggle, .float-btn {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

    .dark-mode-toggle:hover, .float-btn:hover {
        transform: scale(1.08) rotate(5deg);
        box-shadow: 0 0 20px rgba(34, 65, 115, 0.688);
    }

.contact-menu {
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

body.dark-mode .contact-menu {
    background: rgba(30, 41, 59, 0.9);
}

.contact-menu a {
    transition: all 0.2s;
    border-radius: 1rem;
    margin: 0.2rem 0.5rem;
}

    .contact-menu a:hover {
        background: #224173;
        color: white !important;
        transform: translateX(-5px);
    }

/* ========== قهرمان (Hero) مدرن ========== */
.hero {
    background: radial-gradient(circle at 20% 30%, #0a2540 0%, #021526 100%);
    color: #fff;
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 4rem 4rem;
    margin-bottom: 0;
    border: none;
}

    /* بافت مشبک پس‌زمینه */
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
        z-index: 0;
        opacity: 0.5;
    }

    /* حباب تزئینی */
    .hero::after {
        content: '';
        position: absolute;
        width: 350px;
        height: 350px;
        background: rgba(34, 65, 115, 0.06);
        border-radius: 50%;
        bottom: -150px;
        right: -100px;
        z-index: 0;
    }

body.dark-mode .hero {
    background: radial-gradient(circle at 20% 30%, #111d2e 0%, #030b14 100%);
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero .display-5 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.3;
    background: linear-gradient(to left, #ffffff, #224173);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero .lead {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 2rem;
}

/* دکمه‌های قهرمان */
.hero .btn-warning {
    background: #224173;
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    border: none;
    padding: 0.8rem 2.5rem;
    font-weight: 700;
    border-radius: 3rem;
    transition: all 0.3s;
}

    .hero .btn-warning:hover {
        background: #ffffff;
        color: #224173;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    }

.hero .btn-outline-light {
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 3rem;
    font-weight: 600;
    transition: all 0.3s;
}

    .hero .btn-outline-light:hover {
        background: rgba(255,255,255,0.1);
        border-color: #fff;
        transform: translateY(-3px);
    }

.hero .hero-img {
    border-radius: 2rem;
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    transition: transform 0.3s ease;
    max-height: 320px;
    object-fit: cover;
}

    .hero .hero-img:hover {
        transform: scale(1.02);
    }

/* نشان اعتماد */
.hero .trust-badge {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(5px);
    border-radius: 3rem;
    padding: 0.6rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ریسپانسیو قهرمان */
@media (max-width: 767px) {
    .hero {
        padding: 3rem 0 2rem;
        border-radius: 0 0 3rem 3rem;
    }

        .hero .display-5 {
            font-size: 2rem;
        }

        .hero .lead {
            font-size: 1rem;
        }

        .hero .hero-img {
            max-height: 240px;
            margin: 1.5rem auto 0;
        }
}

/* ========== بخش مزایا (Benefits) مدرن ========== */
#benefitsSection {
    padding: 4rem 0;
    background: #EFF2F5;
}

body.dark-mode #benefitsSection {
    background: #0b1120;
}

.benefit-card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    padding: 2.5rem 1.8rem;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.5);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

    .benefit-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #224173, #1b3560);
        opacity: 0;
        transition: opacity 0.4s;
        z-index: 0;
        border-radius: inherit;
    }

    .benefit-card:hover::before {
        opacity: 1;
    }

    .benefit-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
        border-color: transparent;
        color: #fff;
    }

body.dark-mode .benefit-card {
    background: rgba(30,41,59,0.7);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
}

    body.dark-mode .benefit-card:hover {
        background: #224173;
    }

.benefit-icon {
    font-size: 2.8rem;
    color: #224173;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
}

.benefit-card:hover .benefit-icon {
    color: #fff;
}

body.dark-mode .benefit-icon {
    color: #224173;
}

.benefit-title {
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 1;
}

.benefit-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #475569;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
}

.benefit-card:hover .benefit-text {
    color: rgba(255,255,255,0.9);
}

body.dark-mode .benefit-text {
    color: #cbd5e1;
}

/* ریسپانسیو مزایا */
@media (max-width: 767px) {
    #benefitsSection {
        padding: 3rem 0;
    }

    .benefit-card {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* ========== کاروسل مزایا در موبایل ========== */
.benefits-desktop-grid {
    display: block;
}

.benefits-mobile-carousel {
    display: none;
    position: relative;
    z-index: 1;
    animation: benefitsFadeInUp 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}

@keyframes benefitsFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.benefits-carousel-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 8px 0 16px 0;
    scroll-behavior: smooth;
    direction: rtl;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .benefits-carousel-scroll::-webkit-scrollbar {
        display: none;
    }

.benefits-carousel-slide {
    flex: 0 0 85%;
    scroll-snap-align: center;
    padding: 0 8px;
    transition: transform 0.3s ease;
}

    .benefits-carousel-slide .benefit-card {
        height: 100%;
        margin: 0;
        animation: benefitsCardPulse 4s ease-in-out infinite;
    }

@keyframes benefitsCardPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0,0,0,0.14);
    }
}

body.dark-mode .benefits-carousel-slide .benefit-card {
    animation: benefitsCardPulseDark 4s ease-in-out infinite;
}

@keyframes benefitsCardPulseDark {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0,0,0,0.5);
    }
}

.benefits-carousel-scroll::before,
.benefits-carousel-scroll::after {
    content: '';
    position: sticky;
    top: 0;
    bottom: 0;
    width: 8px;
    flex-shrink: 0;
    z-index: 2;
    pointer-events: none;
}

.benefits-carousel-scroll::before {
    right: 0;
    background: linear-gradient(to left, rgba(248,250,252,0.9), transparent);
    margin-left: -8px;
}

.benefits-carousel-scroll::after {
    left: 0;
    background: linear-gradient(to right, rgba(248,250,252,0.9), transparent);
    margin-right: -8px;
}

body.dark-mode .benefits-carousel-scroll::before {
    background: linear-gradient(to left, rgba(11,17,32,0.9), transparent);
}

body.dark-mode .benefits-carousel-scroll::after {
    background: linear-gradient(to right, rgba(11,17,32,0.9), transparent);
}

.benefits-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.benefits-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(108,117,125,0.45);
    transition: all 0.35s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

    .benefits-dot.benefits-dot-active {
        width: 24px;
        border-radius: 10px;
        background: #224173;
        box-shadow: 0 0 8px rgba(34,65,115,0.5);
    }

/* پنهان/نمایش بر اساس اندازه صفحه */
@media (min-width: 768px) {
    .benefits-desktop-grid {
        display: block !important;
    }

    .benefits-mobile-carousel {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .benefits-desktop-grid {
        display: none !important;
    }

    .benefits-mobile-carousel {
        display: block !important;
    }
}

/* ==================== بخش درباره ما (جدید) ==================== */
.about-section {
    background: #E3E8EE;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

body.dark-mode .about-section {
    background: #0f172a;
}

.about-section::before {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(34, 65, 115, 0.06);
    border-radius: 50%;
    top: -120px;
    left: -120px;
    z-index: 0;
}

.about-section::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(34, 65, 115, 0.05);
    border-radius: 50%;
    bottom: -100px;
    right: -100px;
    z-index: 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ستون تصویر */
.about-image-wrapper {
    position: relative;
    border-radius: 3rem;
    overflow: hidden;
    background-color: #e2e8f0; /* رنگ پس‌زمینه در صورت وجود حاشیه */
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .about-image-wrapper {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* کل تصویر بدون برش در کادر قرار می‌گیرد */
    display: block;
    transition: transform 0.4s ease;
}

.about-image-wrapper:hover img {
    transform: scale(1.03);
}

/* نوار آبی روی عکس */
.about-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #224173, #1b3560);
    z-index: 2;
}

/* ستون متن */
.about-text-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 2rem;
    padding: 2rem 1.8rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.dark-mode .about-text-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.about-title {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    background: linear-gradient(135deg, #224173, #1b3560);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.about-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 1.5rem;
    border-right: 4px solid #224173;
    padding-right: 0.8rem;
}

body.dark-mode .about-subtitle {
    color: #cbd5e1;
}

/* ناحیه اسکرول شونده با استایل زیبا */
.about-scroll-box {
    max-height: 260px;
    overflow-y: auto;
    padding-left: 0.8rem;
    margin-bottom: 1.5rem;
    scroll-behavior: smooth;
    flex-grow: 1;
}

    /* طراحی اسکرول‌بار سفارشی */
    .about-scroll-box::-webkit-scrollbar {
        width: 6px;
    }

    .about-scroll-box::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.03);
        border-radius: 10px;
    }

    .about-scroll-box::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #224173, #1b3560);
        border-radius: 10px;
    }

body.dark-mode .about-scroll-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .about-scroll-box::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #224173, #1b3560);
}

.about-text {
    color: #334155;
    line-height: 2;
    font-size: 0.95rem;
    text-align: justify;
}

body.dark-mode .about-text {
    color: #cbd5e1;
}

/* دکمه */
.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #224173;
    color: #fff;
    padding: 0.7rem 2rem;
    border-radius: 3rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    align-self: flex-start;
    margin-top: auto;
}

    .about-btn:hover {
        background: #1b3560;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
        color: #fff;
    }

/* واکنش‌گرایی */
@media (max-width: 767px) {
    .about-section {
        padding: 3rem 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-image-wrapper {
        order: -1;
        aspect-ratio: 16/9;
    }

    .about-text-card {
        padding: 1.5rem 1.2rem;
    }

    .about-title {
        font-size: 1.5rem;
    }

    .about-subtitle {
        font-size: 0.9rem;
    }

    .about-scroll-box {
        max-height: 200px;
    }

    .about-text {
        font-size: 0.85rem;
        line-height: 1.9;
    }
}

/* ========== بخش خدمات ========== */
.services-section {
    background: #E3E8EE;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

body.dark-mode .services-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* دایره‌های تزئینی */
.services-section::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(34, 65, 115, 0.04);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    z-index: 0;
}

.services-section::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(34, 65, 115, 0.03);
    border-radius: 50%;
    bottom: -80px;
    left: -80px;
    z-index: 0;
}

/* ردیف عنوان (کپسول شیشه‌ای) */
.services-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.services-title-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    padding: 0.5rem 1.5rem 0.5rem 2rem;
    border-radius: 3rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(34, 65, 115, 0.15);
}

body.dark-mode .services-title-wrapper {
    background: rgba(30,41,59,0.7);
    border-color: rgba(34, 65, 115, 0.3);
}

.services-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #224173, #1b3560);
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    box-shadow: 0 6px 15px rgba(34, 65, 115, 0.3);
}

.services-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

body.dark-mode .services-title {
    color: #f1f5f9;
}

/* دکمه "همه خدمات" */
.services-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #224173;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid #224173;
    transition: all 0.3s ease;
    white-space: nowrap;
    backdrop-filter: blur(5px);
}

    .services-view-all:hover {
        background: #224173;
        color: white;
        transform: translateY(-2px);
    }

    .services-view-all i {
        font-size: 0.8rem;
        transition: transform 0.3s;
    }

    .services-view-all:hover i {
        transform: translateX(-4px);
    }

/* کارت خدمات (شیشه‌ای) */
.service-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(15px);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
    transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(34, 65, 115, 0.1);
    text-align: right;
    position: relative;
}

body.dark-mode .service-card {
    background: rgba(30,41,59,0.7);
    border-color: rgba(34, 65, 115, 0.3);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #224173, #1b3560);
    z-index: 2;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: rgba(34, 65, 115, 0.4);
}

body.dark-mode .service-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.service-card-image {
    background: #f1f5f9;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}

    .service-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

.service-card:hover .service-card-image img {
    transform: scale(1.07);
}

.service-card-body {
    padding: 1.5rem 1.5rem 1.8rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #0f172a, #224173);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

body.dark-mode .service-card-title {
    background: linear-gradient(135deg, #f1f5f9, #6c7a9e);
    -webkit-background-clip: text;
}

/* لیست ویژگی‌ها (پیل‌های رنگی) */
.service-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem 0;
}

    .service-tags li {
        padding: 8px 14px;
        border-radius: 2rem;
        font-size: 0.8rem;
        font-weight: 500;
        background: rgba(34, 65, 115, 0.08);
        color: #224173;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 8px;
        justify-content: flex-start;
        transition: background 0.2s;
    }

        .service-tags li i {
            color: #224173;
            font-size: 0.9rem;
        }

body.dark-mode .service-tags li {
    background: rgba(34, 65, 115, 0.2);
    color: #cbd5e1;
}

    body.dark-mode .service-tags li i {
        color: #93a3c6;
    }

.service-divider {
    margin: 0.8rem 0;
    border-top: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode .service-divider {
    border-color: rgba(255,255,255,0.1);
}

/* دکمه درخواست */
.service-btn {
    background: transparent;
    border: 2px solid #224173;
    color: #224173;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-color: #224173;
    color: #224173;
}

    .service-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #224173, #1b3560);
        z-index: -1;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }

    .service-btn:hover::before {
        transform: scaleX(1);
    }

    .service-btn:hover {
        color: white;
        border-color: transparent;
        box-shadow: 0 6px 20px rgba(34, 65, 115, 0.4);
    }

@media (max-width: 767px) {
    .services-desktop-grid {
        display: none !important;
    }

    .services-mobile-carousel {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .services-desktop-grid {
        display: block !important;
    }

    .services-mobile-carousel {
        display: none !important;
    }
}

/* واکنش‌گرایی */
@media (min-width: 768px) {
    .services-desktop-grid {
        display: block !important;
    }

    .services-mobile-carousel {
        display: none !important;
    }
}

/* ========== اصلاح کاروسل موبایل خدمات ========== */
@media (max-width: 767px) {
    .services-mobile-carousel {
        display: block;
        position: relative;
        z-index: 1;
    }

    .carousel-scroll {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 8px 0 16px;
        scroll-behavior: smooth;
        direction: rtl;
        scrollbar-width: none;
    }

        .carousel-scroll::-webkit-scrollbar {
            display: none;
        }

    .carousel-slide {
        flex: 0 0 85%;
        scroll-snap-align: center;
        padding: 0 8px;
    }

    /* شِید کناری */
    .carousel-scroll::before,
    .carousel-scroll::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 8px;
        flex-shrink: 0;
        z-index: 2;
        pointer-events: none;
    }

    .carousel-scroll::before {
        right: 0;
        background: linear-gradient(to left, rgba(248,250,252,0.9), transparent);
        margin-left: -8px;
    }

    .carousel-scroll::after {
        left: 0;
        background: linear-gradient(to right, rgba(248,250,252,0.9), transparent);
        margin-right: -8px;
    }

    body.dark-mode .carousel-scroll::before {
        background: linear-gradient(to left, rgba(15,23,42,0.9), transparent);
    }

    body.dark-mode .carousel-scroll::after {
        background: linear-gradient(to right, rgba(15,23,42,0.9), transparent);
    }

    /* دات‌ها */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #cbd5e1;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
    }

        .carousel-dot.dot-active {
            width: 22px;
            border-radius: 10px;
            background: #224173;
            box-shadow: 0 0 6px rgba(34, 65, 115, 0.4);
        }

    body.dark-mode .carousel-dot {
        background: #475569;
    }

        body.dark-mode .carousel-dot.dot-active {
            background: #6b7daa;
        }
}

/* بخش نمونه‌کارها */
:root {
    --Portfolio-orange: #224173;
    --Portfolio-bg-start: #f4f5f7;
    --Portfolio-bg-end: #e9ebf0;
    --Portfolio-card-bg: #ffffff;
    --Portfolio-title-bar: #d0d3db;
    --Portfolio-text-dark: #1e2a3a;
    --Portfolio-divider: #e0e3e8;
    --Portfolio-accent: #224173;
    --Portfolio-shadow: 0 10px 30px rgba(0,0,0,0.06);
    --Portfolio-shadow-hover: 0 16px 40px rgba(0,0,0,0.12);
}

.Portfolio-section {
    background: linear-gradient(135deg, var(--Portfolio-bg-start) 0%, var(--Portfolio-bg-end) 100%);
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
}

    .Portfolio-section::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 200px;
        height: 200px;
        background: rgba(34, 65, 115, 0.04);
        border-radius: 50%;
        pointer-events: none;
    }

    .Portfolio-section::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: -40px;
        width: 260px;
        height: 260px;
        background: rgba(34, 65, 115, 0.04);
        border-radius: 50%;
        pointer-events: none;
    }

/* ردیف عنوان */
.Portfolio-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.Portfolio-title-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.Portfolio-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--Portfolio-orange);
    color: white;
    border-radius: 12px;
    margin-left: 12px;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.Portfolio-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--Portfolio-text-dark);
    margin: 0;
    position: relative;
    z-index: 2;
}

.Portfolio-title-bar {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    height: 140%;
    width: calc(100% + 24px);
    background: var(--Portfolio-title-bar);
    border-radius: 0 14px 14px 0;
    z-index: 1;
    opacity: 0.5;
    display: block; /* پیش‌فرض موبایل */
}

/* دسکتاپ: نوار پشت عنوان مخفی شود */
@media (min-width: 768px) {
    .Portfolio-title-bar {
        display: none;
    }
}

.Portfolio-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid var(--Portfolio-orange);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    color: var(--Portfolio-orange);
    border-color: var(--Portfolio-orange);
}

    .Portfolio-view-all:hover {
        background: var(--Portfolio-orange);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    }

    .Portfolio-view-all i {
        transition: transform 0.3s;
        font-size: 0.8rem;
    }

    .Portfolio-view-all:hover i {
        transform: translateX(-4px);
    }

/* دسکتاپ – دو کارت کنار هم */
.Portfolio-desktop-grid {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .Portfolio-desktop-grid {
        display: none !important;
    }
}

/* کارت */
.Portfolio-card {
    background: var(--Portfolio-card-bg);
    border-radius: 1.3rem;
    overflow: hidden;
    box-shadow: var(--Portfolio-shadow);
    transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.04);
}

    .Portfolio-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--Portfolio-shadow-hover);
    }

.Portfolio-card-image {
    background: #f1f5f9;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

    .Portfolio-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s;
        background: #e2e8f0;
    }

.Portfolio-card:hover .Portfolio-card-image img {
    transform: scale(1.04);
}

.Portfolio-card-body {
    padding: 1.2rem 1.4rem 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.Portfolio-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, #1e2a3a, #224173);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* ویژگی‌ها: دسکتاپ دو ستون، موبایل تک ستون */
.Portfolio-services-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .Portfolio-services-list li {
        background: #e6f2f8;
        color: #224173;
        padding: 6px 12px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

/* موبایل: تک ستون */
@media (max-width: 767px) {
    .Portfolio-services-list {
        grid-template-columns: 1fr;
        display: block;
    }

        .Portfolio-services-list li {
            width: 100%;
            margin-bottom: 6px;
            justify-content: flex-start;
        }
}

.Portfolio-divider {
    margin: 0.8rem 0;
    border-top: 1px solid var(--Portfolio-divider);
}

.Portfolio-btn-details {
    background: transparent;
    border: 2px solid var(--Portfolio-orange);
    border-color: #224173;
    color: #224173;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    transition: 0.2s;
}

    .Portfolio-btn-details:hover {
        background: #224173;
        color: white;
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
    }

/* موبایل – اسکرول افقی با نقاط */
.Portfolio-mobile-carousel {
    display: none;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .Portfolio-mobile-carousel {
        display: block;
    }
}

.Portfolio-carousel-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 8px 0 16px;
    scroll-behavior: smooth;
    direction: rtl;
    scrollbar-width: none;
}

    .Portfolio-carousel-scroll::-webkit-scrollbar {
        display: none;
    }

.Portfolio-carousel-slide {
    flex: 0 0 85%;
    scroll-snap-align: start;
    padding: 0 8px;
}

.Portfolio-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.Portfolio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

    .Portfolio-dot.Portfolio-dot-active {
        background: #224173;
        box-shadow: 0 0 6px rgba(34, 65, 115, 0.4);
        width: 22px;
        border-radius: 10px;
    }

/* مودال (بدون تغییر) */
.Portfolio-advanced-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.Portfolio-modal-container {
    background: #fff;
    width: 90%;
    max-width: 950px;
    max-height: 90vh;
    border-radius: 48px;
    overflow-y: auto;
    padding: 30px;
    direction: rtl;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

.Portfolio-close-modal-btn {
    position: sticky;
    top: 0;
    right: 0;
    background: var(--Portfolio-orange);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 30px;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-right: auto;
    z-index: 5;
}

.Portfolio-modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--Portfolio-orange);
    border-right: 5px solid var(--Portfolio-orange);
    padding-right: 20px;
    margin-bottom: 25px;
}

.Portfolio-modal-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.Portfolio-tab-btn {
    background: none;
    border: none;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: #64748b;
    border-radius: 30px 30px 0 0;
}

    .Portfolio-tab-btn.active {
        color: var(--Portfolio-orange);
        border-bottom: 3px solid var(--Portfolio-orange);
        background: #fffaf5;
    }

.Portfolio-tab-content {
    display: none;
    animation: PortfolioFadeIn 0.2s ease;
}

    .Portfolio-tab-content.active {
        display: block;
    }

@keyframes PortfolioFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.Portfolio-modal-slider {
    position: relative;
    background: #f1f5f9;
    border-radius: 28px;
    padding: 10px;
    min-height: 300px;
}

.Portfolio-modal-slider-img {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    cursor: pointer;
}

.Portfolio-modal-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

    .Portfolio-modal-slider-btn:hover {
        background: var(--Portfolio-orange);
    }

.Portfolio-modal-slider-prev {
    right: 12px;
}

.Portfolio-modal-slider-next {
    left: 12px;
}

.Portfolio-modal-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.Portfolio-modal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
}

    .Portfolio-modal-dot.active {
        background: var(--Portfolio-orange);
        width: 20px;
        border-radius: 8px;
    }

.Portfolio-video-sample {
    background: #000;
    border-radius: 28px;
    overflow: hidden;
    margin-top: 10px;
}

    .Portfolio-video-sample video {
        width: 100%;
        max-height: 400px;
    }

.Portfolio-modal-services {
    background: #f7f7f7;
    border-radius: 24px;
    padding: 20px;
    margin: 20px 0;
}

    .Portfolio-modal-services ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 10px;
        padding: 0;
    }

    .Portfolio-modal-services li {
        background: white;
        padding: 8px 18px;
        border-radius: 40px;
        color: var(--Portfolio-orange);
        font-weight: 500;
    }

.Portfolio-modal-description {
    background: #f8fafc;
    border-radius: 24px;
    padding: 20px;
    margin-top: 20px;
    border-right: 4px solid var(--Portfolio-orange);
    line-height: 1.8;
    color: #334155;
}

/* ========== دارک مود ========== */
body.dark-mode .Portfolio-section {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

    body.dark-mode .Portfolio-section::before,
    body.dark-mode .Portfolio-section::after {
        background: rgba(255,255,255,0.03);
    }

body.dark-mode .Portfolio-title {
    color: #e2e8f0;
}

body.dark-mode .Portfolio-title-bar {
    background: #334155;
}

body.dark-mode .Portfolio-view-all {
    background: #1e293b;
    color: var(--Portfolio-orange);
    border-color: var(--Portfolio-orange);
}

    body.dark-mode .Portfolio-view-all:hover {
        background: var(--Portfolio-orange);
        color: white;
    }

body.dark-mode .Portfolio-card {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .Portfolio-card-title {
    background: linear-gradient(135deg, #f1f5f9, #224173);
    background-clip: text;
    -webkit-background-clip: text;
}

body.dark-mode .Portfolio-services-list li {
    background: #2d3748;
    color: var(--Portfolio-orange);
}

body.dark-mode .Portfolio-btn-details {
    color: var(--Portfolio-orange);
    border-color: var(--Portfolio-orange);
}

    body.dark-mode .Portfolio-btn-details:hover {
        background: var(--Portfolio-orange);
        color: white;
    }

body.dark-mode .Portfolio-divider {
    border-color: #334155;
}

body.dark-mode .Portfolio-dot {
    background: #475569;
}

    body.dark-mode .Portfolio-dot.Portfolio-dot-active {
        background: var(--Portfolio-orange);
    }

body.dark-mode .Portfolio-modal-container {
    background: #1e293b;
    color: #e2e8f0;
}

body.dark-mode .Portfolio-modal-services {
    background: #2d3748;
}

    body.dark-mode .Portfolio-modal-services li {
        background: #0f172a;
        color: var(--Portfolio-orange);
    }

body.dark-mode .Portfolio-modal-description {
    background: #1e293b;
    border-right-color: var(--Portfolio-orange);
    color: #cbd5e1;
}

body.dark-mode .Portfolio-tab-btn {
    color: #94a3b8;
}

    body.dark-mode .Portfolio-tab-btn.active {
        color: var(--Portfolio-orange);
        background: #2d3748;
        border-bottom-color: var(--Portfolio-orange);
    }

body.dark-mode .Portfolio-modal-slider {
    background: #0f172a;
}

body.dark-mode .Portfolio-modal-dot {
    background: #475569;
}

    body.dark-mode .Portfolio-modal-dot.active {
        background: var(--Portfolio-orange);
    }

/* ========== آمار ========== */
#stats {
    background: #F8F5F0;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    /* بافت توری ظریف (شبکه نقطه‌ای روشن) */
    #stats::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
        background-size: 25px 25px;
        opacity: 0.6;
        z-index: 1;
        pointer-events: none;
    }

    /* هاله‌های رنگی نرم (حس گرم و مدرن) */
    #stats::after {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(34, 65, 115, 0.12) 0%, transparent 70%);
        border-radius: 50%;
        top: -200px;
        left: -150px;
        z-index: 0;
    }

    /* هاله دوم */
    #stats .stats-bg-blob {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(34, 65, 115, 0.08) 0%, transparent 70%);
        border-radius: 50%;
        bottom: -180px;
        right: -100px;
        z-index: 0;
        pointer-events: none;
    }

body.dark-mode #stats {
    background: #0f172a;
}

    body.dark-mode #stats::before {
        background-image: radial-gradient(#334155 1px, transparent 1px);
        opacity: 0.3;
    }

    body.dark-mode #stats::after {
        background: radial-gradient(circle, rgba(34, 65, 115, 0.1) 0%, transparent 70%);
    }

#stats .container {
    position: relative;
    z-index: 2;
}

/* کارت‌های شیشه‌ای (Glassmorphism) */
.stat-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 2rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 15px 35px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .stat-card:hover {
        transform: translateY(-6px);
        background: rgba(255,255,255,0.9);
        border-color: rgba(34, 65, 115, 0.3);
        box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    }

body.dark-mode .stat-card {
    background: rgba(30,41,59,0.7);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

    body.dark-mode .stat-card:hover {
        background: rgba(30,41,59,0.85);
        border-color: rgba(34, 65, 115, 0.25);
    }

.stat-card i {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #224173, #1b3560);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem;
    transition: transform 0.3s;
}

.stat-card:hover i {
    transform: scale(1.1);
}

.stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -1px;
    margin: 0.3rem 0;
    line-height: 1;
}

body.dark-mode .stat-number {
    color: #f1f5f9;
}

.stat-card p {
    color: #475569;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.5px;
}

body.dark-mode .stat-card p {
    color: #cbd5e1;
}

/* واکنش‌گرایی */
@media (max-width: 767px) {
    #stats {
        padding: 3.5rem 0;
    }

    .stat-card {
        padding: 1.8rem 1rem;
        margin-bottom: 1rem;
    }

    .stat-number {
        font-size: 2.2rem;
    }
}

/* ========== فوتر ========== */
footer {
    background: #0f172a;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

body.dark-mode footer {
    background: #0b0f17;
}

footer h5 {
    color: #ffffff;
    margin-bottom: 1rem;
}

footer a,
footer p,
footer .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.2s;
    text-decoration:none !important;
}

    footer a:hover {
        color: #224173 !important;
    }

.trust-icons {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid #2d3a5e;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.trust-item {
    text-align: center;
    color: #cbd5e1;
    font-size: 0.85rem;
}

    .trust-item i {
        font-size: 1.8rem;
        color: #224173;
        margin-bottom: 0.4rem;
        display: block;
    }

/* ==================== PRODUCT SECTION ==================== */
:root {
    --Product-card-bg: #fff;
    --Product-bg: #6fb3c9cf;
    --Product-bg-dark: #1b3560;
    --Product-accent: #224173;
    --Product-card-bg-dark: #1f3a6b;
    --Product-text-dark: #1e2a3a;
    --Product-text-light: #e2e8f0;
    --Product-price-color: #1a4c6e;
    --Product-title-bar: #8b1e1a;
    --Product-spec-bg: #f8f9fa;
    --Product-spec-bg-dark: #1f2740;
    --Product-shadow: 0 10px 30px rgba(0,0,0,0.08);
    --Product-shadow-hover: 0 18px 40px rgba(0,0,0,0.15);
    --Product-shadow-dark: 0 10px 30px rgba(0,0,0,0.3);
    --Product-divider-color: #e0e0e0;
}

body.dark-mode {
    --Product-divider-color: #3b4870;
}

.Product-section {
    /* background:     linear-gradient(135deg, #EFF7FC 0%, #D4EAF3 100%); */
    background: #C9C0B2;
    color: white;
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
}

    .Product-section::before {
        content: '';
        position: absolute;
        top: -60px;
        left: -60px;
        width: 220px;
        height: 220px;
        background: rgba(255,255,255,0.03);
        border-radius: 50%;
        pointer-events: none;
    }

    .Product-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        right: -40px;
        width: 280px;
        height: 280px;
        background: rgba(255,255,255,0.03);
        border-radius: 50%;
        pointer-events: none;
    }

body.dark-mode .Product-section {
    background: var(--Product-bg-dark);
}

/* Title Row */
.Product-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.Product-title-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.Product-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    margin: 0;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 2;
}

.Product-title-bar {
    display: none;
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    height: 140%;
    width: calc(100% + 36px);
    background: var(--Product-title-bar);
    border-radius: 0 14px 14px 0;
    z-index: 1;
}

.Product-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    margin-left: 10px;
    font-size: 1rem;
    z-index: 2;
    position: relative;
}

.Product-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.95);
    color: var(--Product-bg);
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 2;
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    border: 2px solid transparent;
}

    .Product-view-all:hover {
        background: #fff;
        color: #224173;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0,0,0,0.18);
        border-color: rgba(255,255,255,0.5);
    }

    .Product-view-all i {
        transition: transform 0.3s ease;
        font-size: 0.8rem;
    }

    .Product-view-all:hover i {
        transform: translateX(-4px);
    }

/* Desktop Grid */
.Product-desktop-grid {
    position: relative;
    z-index: 1;
}

    .Product-desktop-grid .row.g-4 {
        --bs-gutter-y: 1.5rem;
        --bs-gutter-x: 1.5rem;
    }

/* Product Card */
.Product-card {
    transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2);
    border-radius: 1.3rem;
    border: none;
    background: var(--Product-card-bg);
    box-shadow: var(--Product-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

    .Product-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #1b3560, #224173, #1b3560);
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 3;
    }

    .Product-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--Product-shadow-hover);
    }

        .Product-card:hover::after {
            opacity: 1;
        }

.Product-section .Product-card {
    background: rgba(255,255,255,0.96);
    color: var(--Product-text-dark);
}

body.dark-mode .Product-section .Product-card {
    background: var(--Product-card-bg-dark);
    color: var(--Product-text-light);
    box-shadow: var(--Product-shadow-dark);
}

.Product-card-img-wrap {
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 0.3rem 1rem;
    flex-shrink: 0;
}

.Product-card-img {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
    transition: transform 0.4s ease;
    object-fit: cover;
    aspect-ratio: 3/2;
    background: #eef1f5;
}

.Product-card:hover .Product-card-img {
    transform: scale(1.04);
}

.Product-card-badge {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    background: #224173;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: 0.3px;
}

.Product-card-body {
    padding: 0.6rem 1.2rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.Product-card-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.65rem;
    line-height: 1.4;
    color: inherit;
}

/* Specs Grid */
.Product-specs-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    flex-grow: 1;
}

.Product-spec-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    background: var(--Product-spec-bg);
    padding: 6px 9px;
    border-radius: 8px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

body.dark-mode .Product-spec-item {
    background: var(--Product-spec-bg-dark);
}

.Product-spec-item:hover {
    background: #fde8df;
}

body.dark-mode .Product-spec-item:hover {
    background: #2f3850;
}

.Product-spec-icon {
    font-size: 0.7rem;
    color: #224173;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.Product-spec-title {
    color: #7a7f8a;
    font-weight: 500;
    flex-shrink: 0;
}

body.dark-mode .Product-spec-title {
    color: #a8afc0;
}

.Product-spec-value {
    font-weight: 700;
    color: #333;
    text-align: left;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark-mode .Product-spec-value {
    color: #e0e4f0;
}

.Product-divider {
    border: none;
    border-top: 1px solid var(--Product-divider-color);
    margin: 0.7rem 0 0.9rem 0;
    opacity: 0.7;
}

.Product-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.Product-price {
    font-weight: 800;
    color: var(--Product-price-color);
    font-size: 1.05rem;
    letter-spacing: -0.2px;
}

body.dark-mode .Product-price {
    color: #64b5f6;
}

.Product-btn {
    background: #224173;
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
}

    .Product-btn:hover {
        background: #1b3560;
        box-shadow: 0 10px 20px rgba(34, 65, 115, 0.25);
        transform: translateY(-1px);
    }

/* Mobile Carousel */
.Product-mobile-carousel {
    display: none;
    position: relative;
    z-index: 1;
    animation: ProductFadeInUp 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}

@keyframes ProductFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.Product-carousel-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 8px 0 16px 0;
    scroll-behavior: smooth;
    direction: rtl;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .Product-carousel-scroll::-webkit-scrollbar {
        display: none;
    }

.Product-carousel-slide {
    flex: 0 0 80%;
    scroll-snap-align: center;
    padding: 0 6px;
    transition: transform 0.3s ease;
}

    .Product-carousel-slide .Product-card {
        height: 100%;
        animation: ProductCardPulse 4s ease-in-out infinite;
    }

@keyframes ProductCardPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0,0,0,0.14);
    }
}

body.dark-mode .Product-carousel-slide .Product-card {
    animation: ProductCardPulseDark 4s ease-in-out infinite;
}

@keyframes ProductCardPulseDark {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0,0,0,0.5);
    }
}

.Product-carousel-scroll::before,
.Product-carousel-scroll::after {
    content: '';
    position: sticky;
    top: 0;
    bottom: 0;
    width: 8px;
    flex-shrink: 0;
    z-index: 2;
    pointer-events: none;
}

.Product-carousel-scroll::before {
    right: 0;
    background: linear-gradient(to left, rgba(34, 65, 115, 0.35), transparent);
    margin-left: -8px;
}

.Product-carousel-scroll::after {
    left: 0;
    background: linear-gradient(to right, rgba(34, 65, 115, 0.35), transparent);
    margin-right: -8px;
}

body.dark-mode .Product-carousel-scroll::before {
    background: linear-gradient(to left, rgba(34, 65, 115, 0.5), transparent);
}

body.dark-mode .Product-carousel-scroll::after {
    background: linear-gradient(to right, rgba(34, 65, 115, 0.5), transparent);
}

.Product-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.Product-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    transition: all 0.35s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

    .Product-dot.Product-dot-active {
        background: #fff;
        width: 24px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(255,255,255,0.5);
    }

/* Responsive */
@media (min-width: 768px) {
    .Product-mobile-carousel {
        display: none !important;
    }

    .Product-desktop-grid {
        display: block !important;
    }

    .Product-title-bar {
        display: none !important;
    }

    .Product-title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .Product-desktop-grid {
        display: none !important;
    }

    .Product-mobile-carousel {
        display: block !important;
    }

    .Product-title-bar {
        display: block;
    }

    .Product-title {
        font-size: 1.35rem;
        padding: 6px 18px;
        position: relative;
        z-index: 2;
    }

    .Product-title-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        margin-left: 6px;
    }

    .Product-title-wrapper {
        padding: 4px 0;
    }

    .Product-view-all {
        font-size: 0.78rem;
        padding: 8px 16px;
        gap: 5px;
    }

    .Product-section {
        padding: 2.5rem 0;
    }

    .Product-specs-grid {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .Product-spec-item {
        font-size: 0.7rem;
        padding: 6px 9px;
        gap: 5px;
    }

    .Product-card-title {
        font-size: 0.9rem;
    }

    .Product-price {
        font-size: 0.95rem;
    }

    .Product-btn {
        font-size: 0.72rem;
        padding: 6px 13px;
    }

    .Product-carousel-slide .Product-card {
        min-height: 370px;
    }

    .Product-card-img {
        aspect-ratio: 3/2;
    }

    .Product-divider {
        margin: 0.5rem 0 0.8rem 0;
    }
}

@media (max-width: 400px) {
    .Product-carousel-slide {
        flex: 0 0 84%;
    }

    .Product-title {
        font-size: 1.15rem;
    }

    .Product-view-all {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .Product-carousel-slide .Product-card {
        min-height: 340px;
    }
}

/* ==================== BLOG SECTION  ==================== */
:root {
    --Blog-bg: #E3E8EE;
    --Blog-bg-dark: #1e2a3a;
    --Blog-card-bg: #ffffff;
    --Blog-card-bg-dark: #1f3a6b;
    --Blog-accent: #224173;
    --Blog-accent-dark: #1b3560;
    --Blog-text-dark: #1e2a3a;
    --Blog-text-light: #e2e8f0;
    --Blog-title-bar: #cdd2dc;
    --Blog-spec-bg: #f8f9fa;
    --Blog-spec-bg-dark: #1f2740;
    --Blog-shadow: 0 10px 30px rgba(0,0,0,0.08);
    --Blog-shadow-hover: 0 18px 40px rgba(0,0,0,0.15);
    --Blog-shadow-dark: 0 10px 30px rgba(0,0,0,0.3);
    --Blog-divider-color: #e0e0e0;
}

body.dark-mode {
    --Blog-divider-color: #3b4870;
}

.Blog-section {
    background: var(--Blog-bg);
    color: var(--Blog-text-dark);
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0;
}

    .Blog-section::before {
        content: '';
        position: absolute;
        top: -60px;
        left: -60px;
        width: 220px;
        height: 220px;
        background: rgba(108,117,125,0.04);
        border-radius: 50%;
        pointer-events: none;
    }

    .Blog-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        right: -40px;
        width: 280px;
        height: 280px;
        background: rgba(108,117,125,0.04);
        border-radius: 50%;
        pointer-events: none;
    }

body.dark-mode .Blog-section {
    background: var(--Blog-bg-dark);
    color: var(--Blog-text-light);
}

/* Title Row */
.Blog-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.Blog-title-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.Blog-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--Blog-text-dark);
    margin: 0;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 2;
}

body.dark-mode .Blog-title {
    color: white;
}

.Blog-title-bar {
    display: none;
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    height: 140%;
    width: calc(100% + 36px);
    background: var(--Blog-title-bar);
    border-radius: 0 14px 14px 0;
    z-index: 1;
}

.Blog-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--Blog-accent);
    border-radius: 50%;
    margin-left: 10px;
    font-size: 1rem;
    z-index: 2;
    position: relative;
    color: white;
}

.Blog-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 22px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 2;
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    border: 2px solid var(--Blog-accent);
    color: #224173;
    border-color: #224173;
}

    .Blog-view-all:hover {
        background: #224173;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(108,117,125,0.25);
        border-color: var(--Blog-accent);
    }

    .Blog-view-all i {
        transition: transform 0.3s ease;
        font-size: 0.8rem;
    }

    .Blog-view-all:hover i {
        transform: translateX(-4px);
    }

/* Desktop Grid */
.Blog-desktop-grid {
    position: relative;
    z-index: 1;
}

    .Blog-desktop-grid .row.g-4 {
        --bs-gutter-y: 1.5rem;
        --bs-gutter-x: 1.5rem;
    }

/* Blog Card */
.Blog-card {
    transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2);
    border-radius: 1.3rem;
    border: none;
    background: var(--Blog-card-bg);
    box-shadow: var(--Blog-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

    .Blog-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #9aa0a8, #6c757d, #9aa0a8);
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 3;
    }

    .Blog-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--Blog-shadow-hover);
    }

        .Blog-card:hover::after {
            opacity: 1;
        }

.Blog-section .Blog-card {
    background: rgba(255,255,255,0.96);
    color: var(--Blog-text-dark);
}

body.dark-mode .Blog-section .Blog-card {
    background: var(--Blog-card-bg-dark);
    color: var(--Blog-text-light);
    box-shadow: var(--Blog-shadow-dark);
}

.Blog-card-img-wrap {
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 0.3rem 1rem;
    flex-shrink: 0;
}

.Blog-card-img {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
    transition: transform 0.4s ease;
    object-fit: cover;
    aspect-ratio: 3/2;
    background: #eef1f5;
}

.Blog-card:hover .Blog-card-img {
    transform: scale(1.04);
}

.Blog-card-badge {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    background: var(--Blog-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: 0.3px;
}

.Blog-card-body {
    padding: 0.6rem 1.2rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.Blog-card-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.65rem;
    line-height: 1.4;
    color: inherit;
}

.Blog-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
    color: #64748b;
}

body.dark-mode .Blog-meta {
    color: #94a3b8;
}

.Blog-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.Blog-excerpt {
    color: #334155;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    margin-top: 0.25rem;
}

body.dark-mode .Blog-excerpt {
    color: #cbd5e1;
}

.Blog-link {
    color: var(--Blog-accent);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
    margin-top: auto;
    font-size: 0.8rem;
}

    .Blog-link:hover {
        gap: 10px;
        color: var(--Blog-accent-dark);
    }

.Blog-divider {
    border: none;
    border-top: 1px solid var(--Blog-divider-color);
    margin: 0.7rem 0 0.9rem 0;
    opacity: 0.7;
}

.Blog-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.Blog-share, .Blog-comment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #5b6e8c;
    cursor: pointer;
    transition: color 0.2s;
}

    .Blog-share:hover, .Blog-comment:hover {
        color: var(--Blog-accent);
    }

body.dark-mode .Blog-share, body.dark-mode .Blog-comment {
    color: #94a3b8;
}

/* Mobile Carousel */
.Blog-mobile-carousel {
    display: none;
    position: relative;
    z-index: 1;
    animation: BlogFadeInUp 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}

@keyframes BlogFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.Blog-carousel-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 8px 0 16px 0;
    scroll-behavior: smooth;
    direction: rtl;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .Blog-carousel-scroll::-webkit-scrollbar {
        display: none;
    }

.Blog-carousel-slide {
    flex: 0 0 80%;
    scroll-snap-align: center;
    padding: 0 6px;
    transition: transform 0.3s ease;
}

    .Blog-carousel-slide .Blog-card {
        height: 100%;
        animation: BlogCardPulse 4s ease-in-out infinite;
    }

@keyframes BlogCardPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0,0,0,0.14);
    }
}

body.dark-mode .Blog-carousel-slide .Blog-card {
    animation: BlogCardPulseDark 4s ease-in-out infinite;
}

@keyframes BlogCardPulseDark {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0,0,0,0.5);
    }
}

.Blog-carousel-scroll::before,
.Blog-carousel-scroll::after {
    content: '';
    position: sticky;
    top: 0;
    bottom: 0;
    width: 8px;
    flex-shrink: 0;
    z-index: 2;
    pointer-events: none;
}

.Blog-carousel-scroll::before {
    right: 0;
    background: linear-gradient(to left, rgba(108,117,125,0.2), transparent);
    margin-left: -8px;
}

.Blog-carousel-scroll::after {
    left: 0;
    background: linear-gradient(to right, rgba(108,117,125,0.2), transparent);
    margin-right: -8px;
}

body.dark-mode .Blog-carousel-scroll::before {
    background: linear-gradient(to left, rgba(34, 65, 115, 0.5), transparent);
}

body.dark-mode .Blog-carousel-scroll::after {
    background: linear-gradient(to right, rgba(34, 65, 115, 0.5), transparent);
}

.Blog-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.Blog-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(108,117,125,0.45);
    transition: all 0.35s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

    .Blog-dot.Blog-dot-active {
        background: var(--Blog-accent);
        width: 24px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(108,117,125,0.5);
    }

@media (min-width: 768px) {
    .Blog-mobile-carousel {
        display: none !important;
    }

    .Blog-desktop-grid {
        display: block !important;
    }

    .Blog-title-bar {
        display: none !important;
    }

    .Blog-title {
        font-size: 2rem;
    }

    .Blog-card-title {
        font-size: 1.1rem;
    }

    .Blog-excerpt {
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {
    .Blog-desktop-grid {
        display: none !important;
    }

    .Blog-mobile-carousel {
        display: block !important;
    }

    .Blog-title-bar {
        display: block;
    }

    .Blog-title {
        font-size: 1.35rem;
        padding: 6px 18px;
        position: relative;
        z-index: 2;
    }

    .Blog-title-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        margin-left: 6px;
    }

    .Blog-title-wrapper {
        padding: 4px 0;
    }

    .Blog-view-all {
        font-size: 0.78rem;
        padding: 8px 16px;
        gap: 5px;
    }

    .Blog-section {
        padding: 2.5rem 0;
    }

    .Blog-card-title {
        font-size: 0.9rem;
    }

    .Blog-excerpt {
        font-size: 0.75rem;
    }

    .Blog-carousel-slide {
        flex: 0 0 85%;
    }

        .Blog-carousel-slide .Blog-card {
            min-height: 420px;
        }

    .Blog-card-img {
        aspect-ratio: 3/2;
    }

    .Blog-divider {
        margin: 0.5rem 0 0.8rem 0;
    }
}

@media (max-width: 400px) {
    .Blog-carousel-slide {
        flex: 0 0 88%;
    }

    .Blog-title {
        font-size: 1.15rem;
    }

    .Blog-view-all {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .Blog-carousel-slide .Blog-card {
        min-height: 400px;
    }
}



.btn-warning {
    background: #1b3560;
    border: none;
    font-weight: 700;
    padding: 0.9rem;
    border-radius: 1rem !important;
    transition: 0.25s;
    font-size: 1.1rem;
    color: #fff;
}

    .btn-warning:hover {
        background: #FFF;
        color: #224173 !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(108, 117, 125, 0.4);
    }


/* ==================== مشتریان ==================== */
:root {
    --client-accent: #224173;
    --client-bg: #F8F5F0;
    --client-card-bg: #ffffff;
    --client-text: #1e293b;
    --client-subtext: #64748b;
    --client-star: #f59e0b;
    --client-shadow: 0 8px 24px rgba(0,0,0,0.05);
    --client-shadow-hover: 0 16px 36px rgba(34, 65, 115, 0.15);
}

.client-section {
    background: var(--client-bg);
    padding: 4rem 0;
    overflow: hidden;
}

.client-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.client-title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(34,65,115,0.05) 0%, rgba(34,65,115,0.15) 100%);
    border-radius: 3rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 15px rgba(34,65,115,0.1);
    transition: all 0.3s ease;
}

    .client-title-wrapper:hover {
        box-shadow: 0 6px 25px rgba(34,65,115,0.25);
        transform: translateY(-2px);
    }

    .client-title-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
        background: var(--client-accent);
        border-radius: 3rem 0 0 3rem;
        opacity: 0.8;
        animation: titleBarPulse 2s ease-in-out infinite alternate;
    }

@keyframes titleBarPulse {
    from {
        opacity: 0.5;
        width: 5px;
    }

    to {
        opacity: 1;
        width: 7px;
    }
}

.client-title-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #224173 0%, #1b3560 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 0 15px rgba(34,65,115,0.5);
    transition: transform 0.3s ease;
}

    .client-title-icon:hover {
        transform: rotate(15deg) scale(1.1);
    }

.client-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--client-text);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.05);
    letter-spacing: -0.5px;
}

.client-view-all {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 2px solid var(--client-accent);
    padding: 0.6rem 1.8rem;
    border-radius: 3rem;
    color: var(--client-accent);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(34,65,115,0.15);
    position: relative;
    overflow: hidden;
}

    .client-view-all i {
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }

    .client-view-all:hover {
        background: var(--client-accent);
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(34,65,115,0.35);
    }

        .client-view-all:hover i {
            transform: translateX(-4px);
        }

/* کارت‌ها - استایل پایه */
.client-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--client-card-bg);
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: var(--client-shadow);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    gap: 0.75rem;
    border: 1px solid transparent;
    height: 100%;
}

    .client-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--client-shadow-hover);
        border-color: var(--client-accent);
    }

.client-img {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--client-accent);
    box-shadow: 0 4px 12px rgba(34,65,115,0.25);
    transition: transform 0.3s, box-shadow 0.3s;
}

.client-card:hover .client-img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(34,65,115,0.4);
}

.client-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.client-info {
    flex: 1;
    text-align: right;
    min-width: 0;
}

.client-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--client-text);
    margin: 0 0 0.2rem;
}

.client-company {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--client-subtext);
    margin: 0 0 0.4rem;
}

.client-stars {
    color: var(--client-star);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* ========== حالت دسکتاپ: اسکرول عمودی دستی ========== */
.client-desktop-scroll {
    direction: ltr;
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-right: 8px;
    /*border-bottom: 2px solid var(--client-accent);*/
    padding-bottom: 5px;
}

.client-desktop-inner {
    direction: rtl;
}

.client-desktop-scroll::-webkit-scrollbar {
    width: 5px;
}

.client-desktop-scroll::-webkit-scrollbar-thumb {
    background: var(--client-accent);
    border-radius: 10px;
}

/* ========== حالت موبایل: ردیف افقی از راست به چپ + نمایان بودن بخشی از کارت سوم ========== */
@media (max-width: 767px) {
    .client-desktop-scroll {
        display: none !important;
    }

    /* کانتینر اسکرول افقی با جهت RTL (شروع از راست) */
    .client-mobile-hscroll {
        display: block !important;
        direction: rtl; /* اسکرول از راست به چپ */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /*border-bottom: 2px solid var(--client-accent);*/
        padding-bottom: 8px;
        background: var(--client-bg);
        cursor: grab;
    }

        .client-mobile-hscroll:active {
            cursor: grabbing;
        }

        .client-mobile-hscroll::-webkit-scrollbar {
            height: 5px;
        }

        .client-mobile-hscroll::-webkit-scrollbar-thumb {
            background: var(--client-accent);
            border-radius: 10px;
        }

    /* ردیف افقی کارت‌ها */
    .mobile-card-row {
        display: flex;
        flex-direction: row;
        gap: 16px;
        padding: 8px 16px;
        width: fit-content;
    }

    /* هر کارت در موبایل: عرض مناسب برای دیدن ۲ کارت کامل + بخشی از سومی */
    .client-card {
        flex: 0 0 auto;
        width: 38vw; /* دو کارت = 76vw + فاصله ≈ 80vw، باقی‌مانده 20vw برای کارت سوم */
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: auto;
        min-height: 230px; /* ارتفاع یکسان و متناسب */
        justify-content: center;
        padding: 0.8rem 0.5rem;
        gap: 0.6rem;
    }

    .client-img {
        width: 65px;
        height: 65px;
        margin-bottom: 0.3rem;
    }

    .client-info {
        text-align: center;
        width: 100%;
    }

    .client-name {
        font-size: 0.85rem;
        white-space: normal;
        word-break: break-word;
    }

    .client-company {
        font-size: 0.7rem;
    }

    .client-stars {
        font-size: 0.7rem;
    }

    /* عنوان و دکمه در موبایل */
    .client-title-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .client-title-wrapper {
        padding: 0.3rem 1rem 0.3rem 0.8rem;
    }

    .client-title-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .client-title {
        font-size: 1.3rem;
    }

    .client-view-all {
        padding: 0.4rem 1.2rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .client-mobile-hscroll {
        display: none !important;
    }
}

/* ========== کارت شناور (آبی تیره) ========== */
.floating-red-card {
    background: #224173;
    border-radius: 1.2rem;
    padding: 0.7rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 50%;
    margin: 0 auto 0.5rem auto;
    box-shadow: 0 12px 30px rgba(34, 65, 115, 1);
    position: relative;
    z-index: 3;
    transform: translateY(55%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-wrap: wrap;
}

    .floating-red-card:hover {
        transform: translateY(calc(55% - 4px));
        box-shadow: 0 18px 38px rgba(34, 65, 115, 1);
    }

    .floating-red-card .social-text {
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.3px;
        line-height: 1.5;
        flex: 1 1 auto;
    }

    .floating-red-card .social-icons {
        display: flex;
        gap: 0.6rem;
        align-items: center;
        flex-shrink: 0;
    }

        .floating-red-card .social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: #fff;
            font-size: 0.95rem;
            transition: all 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

            .floating-red-card .social-icons a:hover {
                background: #fff;
                color: #224173;
                border-color: #fff;
                transform: translateY(-2px);
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
            }

@media (max-width: 767px) {
    .floating-red-card {
        width: 100%;
        padding: 0.6rem 1rem;
        gap: 0.6rem;
        flex-direction: column;
        text-align: center;
        transform: translateY(0);
        margin-bottom: 1.2rem;
        border-radius: 0;
    }

        .floating-red-card:hover {
            transform: translateY(-2px);
        }

        .floating-red-card .social-text {
            font-size: 0.8rem;
        }

        .floating-red-card .social-icons a {
            width: 32px;
            height: 32px;
            font-size: 0.85rem;
        }
}

/* دکمه دارک مود */
.dark-mode-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1070;
    background: #224173;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: 0.2s;
    border: none;
    color: #fff;
    font-size: 1.4rem;
}

    .dark-mode-toggle:hover {
        transform: scale(1.05);
        background: #224173;
        color: #FFF;
    }

body.dark-mode .dark-mode-toggle {
    background: #224173;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* دکمه شناور تماس */
.float-contact {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1060;
}

.float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: none;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    background: #224173;
    color: #F7f7f7;
}

    .float-btn:hover {
        background: #f7f7f7FF;
        color: #224173;
        transform: scale(1.05);
    }

.contact-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    padding: 0.6rem 0;
    min-width: 190px;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease;
    z-index: 1050;
}

    .contact-menu.show {
        opacity: 1;
        visibility: visible;
    }

    .contact-menu a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 20px;
        text-decoration: none;
        color: #1e2a3a;
        font-weight: 500;
        border-bottom: 1px solid #f0f0f0;
    }

        .contact-menu a i {
            width: 24px;
            color: #224173;
        }

body.dark-mode .contact-menu {
    background: #1e293b;
    box-shadow: 0 12px 25px rgba(0,0,0,0.4);
}

    body.dark-mode .contact-menu a {
        color: #e2e8f0;
        border-bottom-color: #334155;
    }

        body.dark-mode .contact-menu a i {
            color: #224173;
        }

/* ========== هاور منوی اصلی ========== */
.navbar .nav-link {
    transition: all 0.2s ease;
    border-radius: 2rem;
    padding: 0.4rem 1rem;
}

    .navbar .nav-link:hover {
        background: #f7f7f7;
        color: #224173 !important;
        transform: translateY(-2px);
    }
/* دارک مود */
body.dark-mode .navbar .nav-link:hover {
    background: #2d3a5e;
    color: #ffb347 !important;
}

/* ========== هاور منوی موبایل (آفلاین) ========== */
.offcanvas .nav-link {
    transition: all 0.2s;
    border-radius: 1rem;
}

    .offcanvas .nav-link:hover {
        background: #f7f7f7;
        color: #224173 !important;
        padding-right: 1.5rem;
    }

body.dark-mode .offcanvas .nav-link:hover {
    background: #2d3a5e;
    color: #ffb347 !important;
}

/* ========== هاور منوی شناور تماس ========== */
.contact-menu a {
    transition: all 0.2s ease;
}

    .contact-menu a:hover {
        background: #f7f7f7;
        color: #224173 !important;
        padding-right: 1.8rem;
    }

        .contact-menu a:hover i {
            transform: scale(1.1);
        }

body.dark-mode .contact-menu a:hover {
    background: #2d3a5e;
    color: #ffb347 !important;
}

/* استایل اکتیو در منوی اصلی */
.navbar .nav-link.active {
    color: #224173 !important;
    font-weight: 700;
    background: #f3f3f3;
    border-radius: 2rem;
}

/* ========== هیرو (ساختار جدید) ========== */
.hero {
    position: relative;
    height: 50vh;
    min-height: 350px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0a2540;
}

/* اسلایدر */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    /* background-size: cover;
    background-position: center; */
}

    .hero-slide.active {
        opacity: 1;
    }

/* لایه تیره */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 30, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1;
    pointer-events: none;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* محتوای اصلی */
.hero-content {
    /* position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;     
    padding-right: 50px;             
    box-sizing: border-box; */
    display: none !important;
}

/* ستون عمودی راست */
.hero-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 👈 بچه‌ها را از راست بچین */
    gap: 1.5rem;
    max-width: 650px;
}

/* ----- کادر شیشه‌ای عنوان ----- */
.hero-glass-title {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 0.7rem 2.5rem;
    width: fit-content;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    text-align: right;
}

.hero-title {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
    color: #fff;
    white-space: nowrap;
}

/* ----- دکمه‌ها (بدون کادر) ----- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: flex-start; /* دکمه‌ها نیز از راست */
}

/* ----- کادر شیشه‌ای نشان اعتماد ----- */
.hero-glass-badge {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3rem;
    padding: 0.7rem 2rem;
    color: #fff;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* انیمیشن‌ها */
.animate-glass {
    opacity: 0;
    transform: translateX(60px);
    animation: slideInRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.delay-1 {
    animation-delay: 0.15s;
}

.delay-2 {
    animation-delay: 0.3s;
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* دکمه‌های ناوبری */
.hero-nav {
    position: absolute;
    bottom: 20px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    font-size: 1.2rem;
    transition: 0.3s;
}

    .hero-nav:hover {
        background: rgba(255,255,255,0.35);
        border-color: #224173;
        color: #224173;
        transform: scale(1.05);
    }

.hero-prev {
    left: 20px;
}

.hero-next {
    right: 20px;
}

/* نقاط */
.hero-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    border: none;
    transition: 0.3s;
}

    .hero-dot.active {
        width: 24px;
        border-radius: 10px;
        background: #224173;
        box-shadow: 0 0 8px rgba(34, 65, 115, 0.6);
    }

/* دکمه‌های ناوبری - مخفی اولیه */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    font-size: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease, background 0.3s, border-color 0.3s, color 0.3s;
}

.hero-prev {
    right: 20px;
    left: auto;
}

.hero-next {
    left: 20px;
    right: auto;
}

/* ========== نمایش هنگام hover یا فعال‌سازی ========== */
.hero-nav.hero-nav-visible,
.hero:hover .hero-nav {
    opacity: 1;
    visibility: visible;
}

/* ========== موبایل: تنظیم موقعیت و سایز ========== */
@media (max-width: 767px) {
    .hero-nav {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .hero-prev {
        right: 10px !important; /* حتمی برای حذف تداخل */
        left: auto !important;
    }

    .hero-next {
        left: 10px !important;
        right: auto !important;
    }
}

/* ریسپانسیو */
@media (max-width: 767px) {
    .hero {
        height: 60vh;
    }

    .hero-content {
        padding-right: 16px;
        justify-content: center;
    }

    .hero-right-col {
        align-items: center;
        max-width: 100%;
        gap: 1rem;
    }

    .hero-glass-title {
        text-align: center;
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    .hero-title {
        font-size: 1.2rem !important;
        white-space: normal;
        line-height: 1.3;
    }

    .hero-actions {
        justify-content: center;
    }

        .hero-actions .btn {
            font-size: 0.8rem !important;
            padding: 0.4rem 1rem !important;
        }
    /* مخفی کردن نشان گارانتی در موبایل */
    .hero-glass-badge {
        display: none !important;
    }

    .hero-nav {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        bottom: 15px;
    }

    .hero-prev {
        left: 10px;
    }

    .hero-next {
        right: 10px;
    }
}

/* ==================== هدر جدید بخش‌ها (الگوبرداری از مشتریان) ==================== */
.modern-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.modern-title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(34,65,115,0.05) 0%, rgba(34,65,115,0.15) 100%);
    border-radius: 3rem;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 15px rgba(34,65,115,0.1);
    transition: all 0.3s ease;
}

    .modern-title-wrapper:hover {
        box-shadow: 0 6px 25px rgba(34,65,115,0.25);
        transform: translateY(-2px);
    }

    .modern-title-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 5px;
        border-radius: 3rem 0 0 3rem;
        opacity: 0.8;
        animation: modernTitleBarPulse 2s ease-in-out infinite alternate;
        background: #224173;
        border-radius: 3rem 0 0 3rem;
        opacity: 0.8;
        animation: modernTitleBarPulse 2s ease-in-out infinite alternate;
    }

@keyframes modernTitleBarPulse {
    from {
        opacity: 0.5;
        width: 5px;
    }

    to {
        opacity: 1;
        width: 7px;
    }
}

.modern-title-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #224173, #1b3560);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 0 15px rgba(34,65,115,0.5);
    transition: transform 0.3s ease;
}

    .modern-title-icon:hover {
        transform: rotate(15deg) scale(1.1);
    }

.modern-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.dark-mode .modern-title {
    color: #f1f5f9;
}

.modern-view-all {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 2px solid #224173;
    padding: 0.6rem 1.8rem;
    border-radius: 3rem;
    color: #224173;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(34,65,115,0.15);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

    .modern-view-all i {
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }

    .modern-view-all:hover {
        background: #224173;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(34,65,115,0.35);
    }

        .modern-view-all:hover i {
            transform: translateX(-4px);
        }

    .modern-view-all::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255,255,255,0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.5s, height 0.5s;
    }

    .modern-view-all:active::after {
        width: 200px;
        height: 200px;
    }

    /* استایل مخصوص دکمه محصولات (فونت سفید) */
    .modern-view-all.text-white {
        color: #fff !important;
        border-color: rgba(255,255,255,0.7);
        background: rgba(255,255,255,0.1);
    }

        .modern-view-all.text-white:hover {
            background: #fff;
            color: #224173 !important;
            border-color: #fff;
        }

/* تنظیمات رنگ هر بخش (با متغیر) */
.about-header {
    --modern-accent: #224173;
    --modern-accent-dark: #e67e00;
}

.services-header {
    --modern-accent: #224173;
    --modern-accent-dark: #1e253e;
}

.portfolio-header {
    --modern-accent: #224173;
    --modern-accent-dark: #e67e00;
}

.products-header {
    --modern-accent: #224173;
    --modern-accent-dark: #9e2a20;
}

.blog-header {
    --modern-accent: #224173;
    --modern-accent-dark: #495057;
}


/* کاروسل خدمات در موبایل */
.services-mobile-carousel {
    display: none;
    position: relative;
    z-index: 1;
    animation: servicesFadeInUp 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}

@keyframes servicesFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.services-carousel-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: 8px 0 16px 0;
    scroll-behavior: smooth;
    direction: rtl;
    scrollbar-width: none;
}

    .services-carousel-scroll::-webkit-scrollbar {
        display: none;
    }

.services-carousel-slide {
    flex: 0 0 85%;
    scroll-snap-align: center;
    padding: 0 8px;
}


@media (max-width: 767px) {
    .services-desktop-grid {
        display: none !important;
    }

    .services-mobile-carousel {
        display: block !important;
    }
}


/* ==================== استایل دات‌های کاروسل خدمات ==================== */
/* ==================== یکسان‌سازی دات‌های تمام کاروسل‌ها ==================== */
.carousel-dots,
.Product-carousel-dots,
.Blog-carousel-dots,
.benefits-carousel-dots,
.Portfolio-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* کلاس پایه برای همه دات‌ها */
.services-dot,
.Product-dot,
.Blog-dot,
.benefits-dot,
.Portfolio-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* کلاس active برای همه دات‌ها */
.services-dot-active,
.Product-dot-active,
.Blog-dot-active,
.benefits-dot-active,
.Portfolio-dot-active {
    background-color: #0d78a6;
    width: 12px;
    height: 12px;
    transform: scale(1.1);
}


.Portfolio-dot {
    width: 10px;
    height: 10px;
    background-color: #cbd5e1;
    transition: all 0.2s ease;
}

.Portfolio-dot-active {
    background-color: #0d78a6;
    width: 12px;
    height: 12px;
    transform: scale(1.1);
}

.Portfolio-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
}


.services-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.services-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.services-dot-active {
    background-color: #0d78a6;
    width: 12px;
    height: 12px;
    transform: scale(1.1);
}

/* ثابت ماندن هدر در دسکتاپ با جلوگیری از افتادن روی محتوا */
@media (min-width: 992px) {
    #siteHeader {
        position: sticky;
        top: 0;
        z-index: 1050;
        width: 100%;
        background: #fff;
    }

        #siteHeader .navbar {
            background: #fff;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
        }
}

/* ثابت ماندن منوی بالای موبایل فقط در صفحه اصلی */
@media (max-width: 991px) {
    body.home-index-page #siteHeader {
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        width: 100%;
        background: #fff;
    }

        body.home-index-page #siteHeader .navbar {
            position: relative;
            z-index: 1051;
            background: #fff;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
        }

    body.home-index-page #offcanvasMenu {
        z-index: 1060;
    }
}

/* ثابت ماندن منوی بالای موبایل صفحه اصلی */
@media (max-width: 991px) {
    body:not(.blog-index-page):not(.product-index-page) #siteHeader {
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        width: 100%;
        background: #fff;
    }

        body:not(.blog-index-page):not(.product-index-page) #siteHeader .navbar {
            position: relative;
            z-index: 1051;
            background: #fff;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
        }

    body:not(.blog-index-page):not(.product-index-page) #offcanvasMenu {
        z-index: 1060;
    }
}

@media (max-width: 767px) {
    .client-img {
        width: 90px;
        height: 90px;
        margin-bottom: 0.3rem;
    }
}

/* ========== منوی موبایل پریمیوم - Header Offcanvas ========== */

.mobile-offcanvas {
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 28px 28px 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.97), rgba(239,242,245,0.92)) !important;
    box-shadow: -24px 0 70px rgba(15, 23, 42, 0.22) !important;
    direction: rtl;
}

    .mobile-offcanvas::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(rgba(34,65,115,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(34,65,115,0.035) 1px, transparent 1px);
        background-size: 28px 28px;
        mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
    }

.mobile-menu-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(6px);
    opacity: 0.75;
}

.mobile-menu-glow-1 {
    top: -80px;
    right: -65px;
    background: rgba(34, 65, 115, 0.22);
}

.mobile-menu-glow-2 {
    bottom: 90px;
    left: -100px;
    background: rgba(27, 53, 96, 0.16);
}

.mobile-offcanvas-header {
    position: relative;
    z-index: 1;
    align-items: center;
    padding: 20px 18px 16px !important;
    border-bottom: 1px solid rgba(34, 65, 115, 0.1) !important;
    background: transparent !important;
}

.mobile-brand-box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mobile-brand-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #224173, #1b3560);
    box-shadow: 0 14px 28px rgba(34, 65, 115, 0.28);
}

.mobile-offcanvas .offcanvas-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: #16243a;
    background: none;
    -webkit-text-fill-color: initial;
}

.mobile-brand-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
}

.mobile-menu-close {
    width: 38px;
    height: 38px;
    margin: 0 !important;
    border-radius: 14px;
    background-color: rgba(15, 23, 42, 0.06);
    opacity: 1;
    transition: 0.25s ease;
}

    .mobile-menu-close:hover {
        transform: rotate(90deg) scale(1.04);
        background-color: rgba(34, 65, 115, 0.12);
    }

.mobile-offcanvas-body {
    position: relative;
    z-index: 1;
    padding: 16px 14px 18px !important;
}

.mobile-support-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid rgba(34, 65, 115, 0.12);
    border-radius: 22px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(12px);
}

.mobile-support-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #224173;
    background: rgba(34, 65, 115, 0.1);
}

.mobile-support-card strong,
.mobile-support-card span {
    display: block;
}

.mobile-support-card strong {
    font-size: 0.92rem;
    font-weight: 850;
    color: #1e293b;
}

.mobile-support-card span {
    margin-top: 3px;
    font-size: 0.76rem;
    color: #64748b;
}

.mobile-menu-list {
    gap: 9px;
}

.mobile-menu-item {
    animation: mobileMenuItemIn 0.42s ease both;
}

    .mobile-menu-item:nth-child(1) {
        animation-delay: 0.03s;
    }

    .mobile-menu-item:nth-child(2) {
        animation-delay: 0.06s;
    }

    .mobile-menu-item:nth-child(3) {
        animation-delay: 0.09s;
    }

    .mobile-menu-item:nth-child(4) {
        animation-delay: 0.12s;
    }

    .mobile-menu-item:nth-child(5) {
        animation-delay: 0.15s;
    }

    .mobile-menu-item:nth-child(6) {
        animation-delay: 0.18s;
    }

.mobile-menu-parent {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 8px;
    align-items: stretch;
}

.mobile-offcanvas .mobile-menu-link {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 19px !important;
    color: #1e293b !important;
    background: rgba(255,255,255,0.62) !important;
    border: 1px solid rgba(34, 65, 115, 0.09);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    font-size: 0.98rem !important;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.26s ease, box-shadow 0.26s ease, background 0.26s ease, color 0.26s ease;
}

.mobile-menu-link-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #224173;
    background: rgba(34, 65, 115, 0.1);
    transition: 0.26s ease;
}

.mobile-menu-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-offcanvas .mobile-menu-link:hover,
.mobile-offcanvas .mobile-menu-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, #224173, #1b3560) !important;
    transform: translateX(-4px);
    box-shadow: 0 16px 32px rgba(34, 65, 115, 0.24);
}

    .mobile-offcanvas .mobile-menu-link:hover .mobile-menu-link-icon,
    .mobile-offcanvas .mobile-menu-link.active .mobile-menu-link-icon {
        color: #fff;
        background: rgba(255,255,255,0.17);
        transform: scale(1.06) rotate(-4deg);
    }

.mobile-submenu-toggle {
    width: 44px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 65, 115, 0.1);
    border-radius: 18px;
    color: #224173;
    background: rgba(255,255,255,0.62);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
    transition: 0.26s ease;
}

    .mobile-submenu-toggle:hover,
    .mobile-submenu-toggle[aria-expanded="true"] {
        color: #fff;
        background: linear-gradient(135deg, #224173, #1b3560);
        box-shadow: 0 16px 32px rgba(34, 65, 115, 0.2);
    }

    .mobile-submenu-toggle i {
        transition: transform 0.26s ease;
    }

    .mobile-submenu-toggle[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

.mobile-submenu-list {
    margin: 8px 14px 4px 0;
    padding: 8px 12px 8px 0;
    list-style: none;
    border-right: 2px dashed rgba(34, 65, 115, 0.18);
}

.mobile-submenu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.22s ease;
}

    .mobile-submenu-link i {
        color: #224173;
        font-size: 0.78rem;
    }

    .mobile-submenu-link:hover {
        color: #224173;
        background: rgba(34, 65, 115, 0.08);
        transform: translateX(-3px);
    }

.mobile-contact-btn {
    margin-top: 18px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #224173, #1b3560) !important;
    box-shadow: 0 18px 34px rgba(34, 65, 115, 0.3) !important;
    overflow: hidden;
}

    .mobile-contact-btn a {
        position: relative;
        min-height: 56px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 16px !important;
        color: #fff !important;
        font-weight: 900 !important;
        text-decoration: none;
    }

        .mobile-contact-btn a::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
            transform: translateX(100%);
            transition: transform 0.65s ease;
        }

    .mobile-contact-btn:hover a::before {
        transform: translateX(-100%);
    }

.mobile-menu-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 13px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

    .mobile-menu-footer-note i {
        color: #224173;
    }

@keyframes mobileMenuItemIn {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 380px) {
    .mobile-offcanvas {
        width: 92vw !important;
        border-radius: 0 22px 22px 0;
    }

    .mobile-offcanvas-header {
        padding-inline: 14px !important;
    }

    .mobile-brand-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .mobile-offcanvas .offcanvas-title {
        font-size: 1rem;
    }
}


/* ========== دکمه منوی موبایل پریمیوم ========== */

.premium-menu-toggler {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(34, 65, 115, 0.12), rgba(34, 65, 115, 0.04)) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: 0.28s ease;
}

    .premium-menu-toggler::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(34, 65, 115, 0.45), rgba(255, 255, 255, 0.2), rgba(34, 65, 115, 0.18));
        opacity: 0;
        transition: 0.28s ease;
    }

    .premium-menu-toggler::after {
        content: '';
        position: absolute;
        width: 58px;
        height: 58px;
        top: -35px;
        right: -35px;
        border-radius: 50%;
        background: rgba(34, 65, 115, 0.18);
        transition: 0.35s ease;
    }

    .premium-menu-toggler:hover {
        transform: translateY(-2px) scale(1.03);
        background: linear-gradient(135deg, #224173, #1b3560) !important;
        box-shadow: 0 16px 35px rgba(34, 65, 115, 0.26);
    }

        .premium-menu-toggler:hover::before {
            opacity: 1;
        }

        .premium-menu-toggler:hover::after {
            width: 105px;
            height: 105px;
            top: -28px;
            right: -28px;
        }

    .premium-menu-toggler:focus {
        box-shadow: 0 0 0 4px rgba(34, 65, 115, 0.16) !important;
    }

.premium-toggler-shape {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 18px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

    .premium-toggler-shape span {
        display: block;
        height: 3px;
        border-radius: 999px;
        background: #224173;
        transition: 0.28s ease;
    }

        .premium-toggler-shape span:nth-child(1) {
            width: 24px;
        }

        .premium-toggler-shape span:nth-child(2) {
            width: 17px;
            margin-right: auto;
        }

        .premium-toggler-shape span:nth-child(3) {
            width: 22px;
        }

.premium-menu-toggler:hover .premium-toggler-shape span {
    background: #fff;
}

    .premium-menu-toggler:hover .premium-toggler-shape span:nth-child(1) {
        transform: translateX(-3px);
    }

    .premium-menu-toggler:hover .premium-toggler-shape span:nth-child(2) {
        width: 24px;
    }

    .premium-menu-toggler:hover .premium-toggler-shape span:nth-child(3) {
        transform: translateX(3px);
    }

/* وقتی منو باز است، دکمه حالت ضربدر بگیرد */
.premium-menu-toggler[aria-expanded="true"] {
    background: linear-gradient(135deg, #224173, #1b3560) !important;
    box-shadow: 0 16px 35px rgba(34, 65, 115, 0.28);
}

    .premium-menu-toggler[aria-expanded="true"] .premium-toggler-shape span {
        background: #fff;
    }

        .premium-menu-toggler[aria-expanded="true"] .premium-toggler-shape span:nth-child(1) {
            width: 24px;
            transform: translateY(7.5px) rotate(45deg);
        }

        .premium-menu-toggler[aria-expanded="true"] .premium-toggler-shape span:nth-child(2) {
            opacity: 0;
            transform: translateX(-10px);
        }

        .premium-menu-toggler[aria-expanded="true"] .premium-toggler-shape span:nth-child(3) {
            width: 24px;
            transform: translateY(-7.5px) rotate(-45deg);
        }

@media (max-width: 380px) {
    .premium-menu-toggler {
        width: 44px;
        height: 44px;
        border-radius: 16px;
    }
}


/* ========== انیمیشن ساده‌تر برای باز و بسته شدن منوی موبایل ========== */

.mobile-offcanvas.offcanvas-start {
    transform: translateX(-100%);
    opacity: 1;
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

    .mobile-offcanvas.offcanvas-start.show,
    .mobile-offcanvas.offcanvas-start.showing {
        transform: translateX(0);
        opacity: 1;
    }

.offcanvas-backdrop.show {
    opacity: 1 !important;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
}


/* ========== دکمه عمومی بیشتر / مشاهده جزئیات پریمیوم ========== */

/* ========== دکمه عمومی بیشتر / مشاهده جزئیات پریمیوم ========== */

.btn-premium-more {
    position: relative;
    isolation: isolate;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 52px 11px 18px;
    margin-top: auto;
    border: 1px solid rgba(34, 65, 115, 0.18);
    border-radius: 16px;
    overflow: hidden;
    color: #224173;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, rgba(34, 65, 115, 0.85), rgba(34, 65, 115, 0.12), rgba(27, 53, 96, 0.7)) border-box;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none !important;
    letter-spacing: -0.2px;
    transition: transform 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

    .btn-premium-more span {
        flex: 1;
        text-align: center;
    }

    .btn-premium-more::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(135deg, #224173, #1b3560);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .btn-premium-more::after {
        content: '';
        position: absolute;
        width: 70px;
        height: 70px;
        top: -48px;
        left: -35px;
        z-index: -1;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        transition: 0.38s ease;
    }

    .btn-premium-more i {
        position: absolute;
        left: 14px;
        top: 50%;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #ffffff;
        background: linear-gradient(135deg, #224173, #1b3560);
        font-size: 0.78rem;
        transform: translateY(-50%);
        transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease;
    }

    .btn-premium-more:hover {
        color: #ffffff;
        transform: translateY(-3px);
        border-color: transparent;
        box-shadow: 0 16px 34px rgba(34, 65, 115, 0.28);
    }

        .btn-premium-more:hover::before {
            transform: scaleX(1);
        }

        .btn-premium-more:hover::after {
            top: -18px;
            left: 18px;
            width: 95px;
            height: 95px;
        }

        .btn-premium-more:hover i {
            color: #224173;
            background: #ffffff;
            transform: translateY(-50%) translateX(-4px);
        }

    .btn-premium-more:active {
        transform: translateY(-1px) scale(0.98);
    }

    .btn-premium-more:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(34, 65, 115, 0.18), 0 16px 34px rgba(34, 65, 115, 0.22);
    }

    /* نسخه کوچک برای جاهای فشرده‌تر */
    .btn-premium-more.btn-premium-more-sm {
        width: auto;
        min-height: 40px;
        padding: 8px 44px 8px 14px;
        font-size: 0.82rem;
        border-radius: 14px;
    }

        .btn-premium-more.btn-premium-more-sm i {
            left: 10px;
            width: 24px;
            height: 24px;
            border-radius: 8px;
            font-size: 0.7rem;
        }

    /* نسخه بدون تمام‌عرض */
    .btn-premium-more.btn-premium-more-inline {
        width: auto;
        min-width: 145px;
    }

/* دارک مود */
body.dark-mode .btn-premium-more {
    color: #dbeafe;
    border-color: rgba(147, 163, 198, 0.28);
    background: linear-gradient(#172033, #172033) padding-box, linear-gradient(135deg, rgba(147, 163, 198, 0.72), rgba(255,255,255,0.08), rgba(34, 65, 115, 0.9)) border-box;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

    body.dark-mode .btn-premium-more i {
        color: #172033;
        background: #dbeafe;
    }

    body.dark-mode .btn-premium-more:hover {
        color: #ffffff;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
    }

        body.dark-mode .btn-premium-more:hover i {
            color: #224173;
            background: #ffffff;
        }

@media (max-width: 575px) {
    .btn-premium-more {
        min-height: 44px;
        padding: 10px 48px 10px 15px;
        font-size: 0.86rem;
        border-radius: 15px;
    }
}


/* =========================================================
   Global Mobile Page Topbar Breadcrumb - Safe Ellipsis
========================================================= */

@media (max-width: 991px) {
    .mobile-page-head {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        align-items: center;
        gap: 8px;
        direction: rtl;
    }

    .mobile-page-breadcrumb {
        min-width: 0;
        width: 100%;
        height: 46px;
        background: #fff;
        border: 1px solid rgba(34, 65, 115, 0.09);
        border-radius: 16px;
        padding: 9px 12px;
        display: flex !important;
        align-items: center;
        gap: 7px;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 800;
        overflow: hidden;
        white-space: nowrap;
        box-shadow: 0 10px 24px rgba(34, 65, 115, 0.07);
    }

        .mobile-page-breadcrumb a,
        .mobile-page-breadcrumb span {
            text-decoration: none;
        }

    .mobile-page-breadcrumb-home,
    .mobile-page-breadcrumb-parent,
    .mobile-page-breadcrumb-separator {
        flex: 0 0 auto;
    }

    .mobile-page-breadcrumb-home {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #475569;
    }

    .mobile-page-breadcrumb-parent {
        color: #475569;
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-page-breadcrumb-separator {
        color: #94a3b8 !important;
        font-size: 0.76rem;
    }

    .mobile-page-breadcrumb i.fa-home {
        color: #224173;
        font-size: 0.86rem;
    }

    .mobile-page-breadcrumb-current {
        min-width: 0;
        flex: 1 1 auto;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #224173 !important;
        font-weight: 950;
    }
}

@media (max-width: 420px) {
    .mobile-page-breadcrumb {
        gap: 5px;
        padding-inline: 10px;
        font-size: 0.74rem;
    }

    .mobile-page-breadcrumb-parent {
        max-width: 58px;
    }

    .mobile-page-breadcrumb-home span {
        display: none;
    }
}

@media (max-width: 340px) {
    .mobile-page-breadcrumb-parent {
        display: none;
    }

        .mobile-page-breadcrumb-parent + .mobile-page-breadcrumb-separator {
            display: none;
        }
}


/* =========================================================
   Global Mobile Page Topbar - Final Fix
   Fixed + No Extra Top Space + Offcanvas Safe
========================================================= */

@media (max-width: 991px) {
    .mobile-page-topbar.mobile-only {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        z-index: 1060 !important;
        display: block !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        background: rgba(245, 247, 251, 0.96) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
        direction: rtl;
        transform: none !important;
    }

    .mobile-page-head {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl;
    }

    .mobile-page-breadcrumb {
        min-width: 0 !important;
        width: 100% !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
        border: 1px solid rgba(34, 65, 115, 0.09) !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(34, 65, 115, 0.07) !important;
        color: #64748b !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
    }

    .mobile-page-breadcrumb-home,
    .mobile-page-breadcrumb-parent,
    .mobile-page-breadcrumb-separator {
        flex: 0 0 auto !important;
    }

    .mobile-page-breadcrumb-home {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        color: #475569 !important;
        text-decoration: none !important;
    }

    .mobile-page-breadcrumb-parent {
        max-width: 76px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #475569 !important;
        text-decoration: none !important;
    }

    .mobile-page-breadcrumb-separator {
        color: #94a3b8 !important;
        font-size: 0.75rem !important;
    }

    .mobile-page-breadcrumb-current {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #224173 !important;
        font-weight: 950 !important;
    }

    .mobile-page-breadcrumb i.fa-home {
        color: #224173 !important;
    }

    .mobile-page-menu-btn {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid rgba(34, 65, 115, 0.14) !important;
        border-radius: 16px !important;
        background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, rgba(34, 65, 115, 0.55), rgba(34, 65, 115, 0.08)) border-box !important;
        box-shadow: 0 10px 24px rgba(34, 65, 115, 0.09) !important;
        overflow: hidden !important;
        cursor: pointer;
        transition: 0.25s ease;
    }

        .mobile-page-menu-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #224173, #1b3560);
            opacity: 0;
            transition: 0.25s ease;
        }

        .mobile-page-menu-btn span {
            position: relative;
            z-index: 1;
            display: block;
            height: 3px;
            border-radius: 999px;
            background: #224173;
            transition: 0.25s ease;
        }

            .mobile-page-menu-btn span:nth-child(1) {
                width: 20px;
            }

            .mobile-page-menu-btn span:nth-child(2) {
                width: 15px;
                margin-right: auto;
                margin-left: 9px;
            }

            .mobile-page-menu-btn span:nth-child(3) {
                width: 20px;
            }

        .mobile-page-menu-btn:hover,
        .mobile-page-menu-btn:focus {
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(34, 65, 115, 0.18) !important;
        }

            .mobile-page-menu-btn:hover::before,
            .mobile-page-menu-btn:focus::before {
                opacity: 1;
            }

            .mobile-page-menu-btn:hover span,
            .mobile-page-menu-btn:focus span {
                background: #fff;
            }
}

@media (max-width: 420px) {
    .mobile-page-breadcrumb-home span {
        display: none !important;
    }

    .mobile-page-breadcrumb-parent {
        max-width: 58px !important;
    }
}

/* =========================================================
   Global Mobile Page Topbar + Menu Button - All Views
========================================================= */

@media (max-width: 991px) {
    .mobile-page-topbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1060 !important;
        display: block !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        background: rgba(245, 247, 251, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
        direction: rtl;
        transform: none !important;
    }

    .mobile-page-head {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl;
    }

    .mobile-page-breadcrumb {
        min-width: 0 !important;
        width: 100% !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
        border: 1px solid rgba(34, 65, 115, 0.09) !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(34, 65, 115, 0.07) !important;
        color: #64748b !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
    }

    .mobile-page-breadcrumb-home,
    .mobile-page-breadcrumb-parent,
    .mobile-page-breadcrumb-separator {
        flex: 0 0 auto !important;
    }

    .mobile-page-breadcrumb-home {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        color: #475569 !important;
        text-decoration: none !important;
    }

    .mobile-page-breadcrumb-parent {
        max-width: 76px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #475569 !important;
        text-decoration: none !important;
    }

    .mobile-page-breadcrumb-separator {
        color: #94a3b8 !important;
        font-size: 0.75rem !important;
    }

    .mobile-page-breadcrumb-current {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #224173 !important;
        font-weight: 950 !important;
    }

    .mobile-page-breadcrumb i.fa-home {
        color: #224173 !important;
    }

    .mobile-page-menu-btn {
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid rgba(34, 65, 115, 0.14) !important;
        border-radius: 16px !important;
        background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, rgba(34, 65, 115, 0.55), rgba(34, 65, 115, 0.08)) border-box !important;
        box-shadow: 0 10px 24px rgba(34, 65, 115, 0.09) !important;
        overflow: hidden !important;
        cursor: pointer;
        transition: 0.25s ease;
    }

        .mobile-page-menu-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #224173, #1b3560);
            opacity: 0;
            transition: 0.25s ease;
        }

        .mobile-page-menu-btn span {
            position: relative;
            z-index: 1;
            display: block;
            height: 3px;
            border-radius: 999px;
            background: #224173;
            transition: 0.25s ease;
        }

            .mobile-page-menu-btn span:nth-child(1) {
                width: 20px;
            }

            .mobile-page-menu-btn span:nth-child(2) {
                width: 15px;
                margin-right: auto;
                margin-left: 9px;
            }

            .mobile-page-menu-btn span:nth-child(3) {
                width: 20px;
            }

        .mobile-page-menu-btn:hover,
        .mobile-page-menu-btn:focus {
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(34, 65, 115, 0.18) !important;
        }

            .mobile-page-menu-btn:hover::before,
            .mobile-page-menu-btn:focus::before {
                opacity: 1;
            }

            .mobile-page-menu-btn:hover span,
            .mobile-page-menu-btn:focus span {
                background: #fff;
            }
}

@media (max-width: 420px) {
    .mobile-page-head {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        gap: 7px !important;
    }

    .mobile-page-menu-btn {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        border-radius: 15px !important;
    }

    .mobile-page-breadcrumb {
        height: 42px !important;
        border-radius: 15px !important;
    }

    .mobile-page-breadcrumb-home span {
        display: none !important;
    }

    .mobile-page-breadcrumb-parent {
        max-width: 58px !important;
    }
}


/* =========================================================
   Mobile Offcanvas Always On Top
========================================================= */

@media (max-width: 991px) {
    /* والد منوی موبایل باید بالاتر از تاپ‌بار و فلت‌باتن باشد */
    #siteHeader {
        position: relative !important;
        z-index: 13000 !important;
    }

    /* خود منوی موبایل */
    #offcanvasMenu,
    #offcanvasMenu.offcanvas,
    #offcanvasMenu.mobile-offcanvas {
        position: fixed !important;
        z-index: 13050 !important;
    }

    /* بک‌دراپ منو */
    .offcanvas-backdrop,
    .offcanvas-backdrop.show {
        z-index: 13040 !important;
    }

    /* تاپ‌بار breadcrumb پایین‌تر از منو */
    .mobile-page-topbar {
        z-index: 1060 !important;
    }

    /* فلت باتن پایین‌تر از منو */
    #floatBtn,
    .float-contact,
    #redFloatingCard,
    .redFloatingCard {
        z-index: 1035 !important;
    }
}

/* =========================================================
   Global Offcanvas Layer Fix
   چون offcanvas مستقیم داخل Layout است، همیشه بالاتر می‌آید
========================================================= */

@media (max-width: 991px) {
    #offcanvasMenu,
    #offcanvasMenu.offcanvas,
    #offcanvasMenu.mobile-offcanvas {
        position: fixed !important;
        z-index: 20010 !important;
    }

    .offcanvas-backdrop,
    .offcanvas-backdrop.show {
        z-index: 20000 !important;
    }

    .mobile-page-topbar {
        z-index: 1060 !important;
    }

    #floatBtn,
    .float-contact,
    #redFloatingCard,
    .redFloatingCard {
        z-index: 1035 !important;
    }
}

@media (max-width: 991px) {
    .mobile-page-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 2000 !important;
        background: rgba(245,247,251,0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 6px 10px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }

    .mobile-page-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .mobile-page-breadcrumb {
        min-width: 0 !important;
        width: 100% !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 6px 12px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(34,65,115,0.1) !important;
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(15,23,42,0.04);
        font-size: 0.78rem;
        font-weight: 800;
        color: #475569;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .mobile-page-breadcrumb a {
            color: #475569;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

    .mobile-page-breadcrumb-current {
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: #224173 !important;
    }

    .mobile-page-menu-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid rgba(34,65,115,0.14);
        cursor: pointer;
        position: relative;
    }

        .mobile-page-menu-btn span {
            width: 20px;
            height: 3px;
            background: #224173;
            border-radius: 999px;
            display: block;
        }

    .container-custom {
        padding-top: 56px !important; /* فاصله محتوا از breadcrumb */
    }
}



/* ======================================================
   Mobile Bottom Bar - یکسان برای تمام صفحات (تم آبی)
======================================================= */
.mobile-bottom-bar {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 12px;
    height: 66px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 251, 0.94));
    border: 1px solid rgba(34, 65, 115, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    z-index: 1040;
    padding: 8px;
    display: grid;
    gap: 8px;
    direction: rtl;
    box-sizing: border-box;
}

.mobile-bottom-bar {
    grid-template-columns: repeat(2, 1fr);
}

    .mobile-bottom-bar.has-three-items {
        grid-template-columns: 0.9fr 1.4fr 1.6fr;
    }

    .mobile-bottom-bar.has-four-items {
        grid-template-columns: repeat(4, 1fr);
    }

.mobile-bottom-item {
    position: relative;
    height: 50px;
    min-height: 50px;
    padding: 0 14px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #475569 !important;
    background: rgba(34, 65, 115, 0.045);
    border: 1px solid rgba(34, 65, 115, 0.07);
    border-radius: 18px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.25s ease;
    z-index: 1;
    cursor: pointer;
}

    .mobile-bottom-item::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #224173, #1b3560);        
        opacity: 0;
        transition: 0.25s ease;
        z-index: -1;
    }

    .mobile-bottom-item:hover,
    .mobile-bottom-item:focus {
        color: #fff !important;
        transform: translateY(-1px);
        text-decoration: none;
    }

        .mobile-bottom-item:hover::before,
        .mobile-bottom-item:focus::before {
            opacity: 1;
        }

.mobile-bottom-icon,
.mobile-call-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(34, 65, 115, 0.11);
    color: #224173;
    font-size: 0.88rem;
    transition: 0.25s ease;
}

.mobile-bottom-title {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.mobile-bottom-item:hover .mobile-bottom-icon,
.mobile-bottom-item:focus .mobile-bottom-icon,
.mobile-bottom-item:hover .mobile-call-icon,
.mobile-bottom-item:focus .mobile-call-icon {
    color: #224173 !important;
    background: #fff !important;
}

/* دکمه تماس ویژه */
.mobile-call-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #224173, #1b3560) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(34, 65, 115, 0.28) !important;
}

    .mobile-call-btn .mobile-call-icon {
        color: #224173 !important;
        background: #fff !important;
    }

    .mobile-call-btn:hover,
    .mobile-call-btn:focus {
        background: linear-gradient(135deg, #1b3560, #142844) !important;
        box-shadow: 0 14px 30px rgba(34, 65, 115, 0.34) !important;
    }

/* نمایش فقط در موبایل */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .mobile-bottom-bar {
        right: 10px;
        left: 10px;
        bottom: 10px;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-bar {
        right: 8px;
        left: 8px;
        bottom: 8px;
        height: 62px;
        padding: 7px;
        gap: 6px;
        border-radius: 21px;
    }

    .mobile-bottom-item {
        height: 46px;
        min-height: 46px;
        padding: 0 10px;
        gap: 5px;
        border-radius: 16px;
        font-size: 0.72rem;
    }

    .mobile-bottom-icon,
    .mobile-call-icon {
        width: 25px;
        height: 25px;
        min-width: 25px;
        flex-basis: 25px;
        font-size: 0.78rem;
    }

    .mobile-bottom-title {
        font-size: 0.72rem;
    }
}


/* ======================================================
   Mobile Bottom Bar - چینش سه دکمه مساوی با فاصله 1px
======================================================= */
.mobile-bottom-bar {
    position: fixed;
    right: 8px;
    left: 8px;
    bottom: 8px;
    height: 70px; /* ارتفاع مناسب */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 251, 0.94));
    border: 1px solid rgba(34, 65, 115, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    z-index: 1040;
    padding: 4px; /* فاصله داخلی کم */
    display: grid;
    gap: 1px; /* فاصله بین دکمه‌ها فقط 1px */
    direction: rtl;
    box-sizing: border-box;
}

    /* حالت سه آیتم (خانه، خدمات، تماس) */
    .mobile-bottom-bar.has-three-items {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* سه ستون مساوی */
    }

/* دکمه‌ها */
.mobile-bottom-item {
    position: relative;
    height: 62px; /* ارتفاع دکمه */
    min-height: 62px;
    padding: 0 6px; /* padding افقی کم */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* فاصله آیکون و متن */
    color: #475569 !important;
    background: rgba(34, 65, 115, 0.045);
    border: 1px solid rgba(34, 65, 115, 0.07);
    border-radius: 18px;
    font-size: 0.85rem; /* فونت کمی بزرگتر */
    font-weight: 900;
    line-height: 1;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 0.25s ease;
    z-index: 1;
    cursor: pointer;
}

/* آیکون‌ها */
.mobile-bottom-icon,
.mobile-call-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(34, 65, 115, 0.11);
    color: #224173;
    font-size: 0.9rem;
    transition: 0.25s ease;
}

/* متن دکمه */
.mobile-bottom-title {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

/* دکمه تماس ویژه (همان استایل ولی با رنگ آبی سایت) */
.mobile-call-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #224173, #1b3560) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(34, 65, 115, 0.28) !important;
}

    .mobile-call-btn .mobile-call-icon {
        color: #224173 !important;
        background: #fff !important;
    }

/* هاور اثر */
.mobile-bottom-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #224173, #1b3560);
    /*background: linear-gradient(135deg, #22733b, #2AAA8A) !important;*/
    opacity: 0;
    transition: 0.25s ease;
    z-index: -1;
}

.mobile-bottom-item:hover::before,
.mobile-bottom-item:focus::before {
    opacity: 1;
}

.mobile-bottom-item:hover,
.mobile-bottom-item:focus {
    color: #fff !important;
    transform: translateY(-1px);
    text-decoration: none;
}

    .mobile-bottom-item:hover .mobile-bottom-icon,
    .mobile-bottom-item:focus .mobile-bottom-icon,
    .mobile-bottom-item:hover .mobile-call-icon,
    .mobile-bottom-item:focus .mobile-call-icon {
        color: #224173 !important;
        background: #fff !important;
    }

/* نمایش فقط در موبایل */
@media (min-width: 992px) {
    .mobile-bottom-bar {
        display: none !important;
    }
}

/* تنظیمات برای صفحه‌های بسیار باریک (عرض کمتر از 380px) */
@media (max-width: 380px) {
    .mobile-bottom-bar {
        height: 62px;
        padding: 3px;
        gap: 1px;
        border-radius: 20px;
    }

    .mobile-bottom-item {
        height: 56px;
        min-height: 56px;
        padding: 0 4px;
        font-size: 0.75rem;
        gap: 5px !important;
    }

    .mobile-bottom-icon,
    .mobile-call-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.8rem;
    }

    .mobile-bottom-title {
        font-size: 0.75rem;
    }
}





/* =========================================================
   Global Mobile Bottom Bar
   برای تمام صفحات دارای Partial: _MobileBottomBar
========================================================= */

@media (min-width: 992px) {
    .mobile-bottom-bar {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 10px !important;
        left: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        height: 56px !important;
        padding: 6px !important;
        z-index: 1040 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        direction: rtl !important;
        background: rgba(255, 255, 255, 0.94) !important;
        border: 1px solid rgba(34, 65, 115, 0.10) !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.13) !important;
        backdrop-filter: blur(12px);
        box-sizing: border-box !important;
    }

        .mobile-bottom-bar.has-two-items {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .mobile-bottom-bar.has-three-items {
            grid-template-columns: repeat(3, 1fr) !important;
        }

        .mobile-bottom-bar.has-four-items {
            grid-template-columns: repeat(4, 1fr) !important;
        }

    .mobile-bottom-item {
        position: relative !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        color: #224173 !important;
        background: rgba(34, 65, 115, 0.055) !important;
        border: 1px solid rgba(34, 65, 115, 0.06) !important;
        border-radius: 14px !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        overflow: hidden !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

        .mobile-bottom-item:hover,
        .mobile-bottom-item:focus,
        .mobile-bottom-item.active {
            color: #ffffff !important;
            background: #224173 !important;
            border-color: #224173 !important;
            text-decoration: none !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 14px rgba(34, 65, 115, 0.18) !important;
        }

    .mobile-bottom-icon,
    .mobile-call-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        flex: 0 0 25px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: rgba(34, 65, 115, 0.10) !important;
        color: #224173 !important;
        font-size: 0.78rem !important;
        transition: all 0.2s ease !important;
    }

    .mobile-bottom-title {
        display: inline-block !important;
        font-size: 0.73rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-item:hover .mobile-bottom-icon,
    .mobile-bottom-item:focus .mobile-bottom-icon,
    .mobile-bottom-item.active .mobile-bottom-icon,
    .mobile-bottom-item:hover .mobile-call-icon,
    .mobile-bottom-item:focus .mobile-call-icon,
    .mobile-bottom-item.active .mobile-call-icon {
        color: #224173 !important;
        background: #ffffff !important;
    }

    .mobile-call-btn {
        color: #ffffff !important;
        background: #224173 !important;
        border-color: #224173 !important;
        box-shadow: 0 6px 16px rgba(34, 65, 115, 0.20) !important;
    }

        .mobile-call-btn .mobile-call-icon {
            color: #224173 !important;
            background: #ffffff !important;
        }

        .mobile-call-btn:hover,
        .mobile-call-btn:focus {
            color: #ffffff !important;
            background: #1b3560 !important;
            border-color: #1b3560 !important;
        }

    body {
        padding-bottom: 76px;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-bar {
        right: 8px !important;
        left: 8px !important;
        bottom: 8px !important;
        height: 52px !important;
        padding: 5px !important;
        gap: 5px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-item {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 6px !important;
        gap: 4px !important;
        border-radius: 12px !important;
    }

    .mobile-bottom-icon,
    .mobile-call-icon {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        flex-basis: 23px !important;
        font-size: 0.72rem !important;
    }

    .mobile-bottom-title {
        font-size: 0.68rem !important;
    }
}



/* =========================================================
   Global Mobile Bottom Bar - Fixed Minimal Version
   حالت 2 دکمه‌ای: خانه - تماس
========================================================= */

@media (min-width: 992px) {
    .mobile-bottom-bar {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .mobile-bottom-bar {
        position: fixed !important;
        right: 12px !important;
        left: 12px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: 56px !important;
        padding: 6px !important;
        z-index: 99999 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        direction: rtl !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border: 1px solid rgba(34, 65, 115, 0.10) !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-sizing: border-box !important;
        transform: translateZ(0);
    }

        .mobile-bottom-bar.has-two-items {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .mobile-bottom-bar.has-three-items {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }

        .mobile-bottom-bar.has-four-items {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }

    .mobile-bottom-item {
        position: relative !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        color: #224173 !important;
        background: rgba(34, 65, 115, 0.055) !important;
        border: 1px solid rgba(34, 65, 115, 0.06) !important;
        border-radius: 14px !important;
        font-family: inherit !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        overflow: hidden !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

        .mobile-bottom-item:hover,
        .mobile-bottom-item:focus,
        .mobile-bottom-item.active {
            color: #ffffff !important;
            background: #224173 !important;
            border-color: #224173 !important;
            text-decoration: none !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 14px rgba(34, 65, 115, 0.18) !important;
        }

    .mobile-bottom-icon,
    .mobile-call-icon {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        flex: 0 0 25px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        background: rgba(34, 65, 115, 0.10) !important;
        color: #224173 !important;
        font-size: 0.78rem !important;
        transition: all 0.2s ease !important;
    }

    .mobile-bottom-title {
        display: inline-block !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .mobile-bottom-item:hover .mobile-bottom-icon,
    .mobile-bottom-item:focus .mobile-bottom-icon,
    .mobile-bottom-item.active .mobile-bottom-icon,
    .mobile-bottom-item:hover .mobile-call-icon,
    .mobile-bottom-item:focus .mobile-call-icon,
    .mobile-bottom-item.active .mobile-call-icon {
        color: #224173 !important;
        background: #ffffff !important;
    }

    .mobile-call-btn {
        color: #ffffff !important;
        background: #224173 !important;
        border-color: #224173 !important;
        /*box-shadow: 0 6px 16px rgba(34, 65, 115, 0.20) !important;*/
        background: linear-gradient(135deg, #22733b, #2AAA8A) !important;
    }

        .mobile-call-btn .mobile-call-icon {
            color: #224173 !important;
            background: #ffffff !important;
        }

        .mobile-call-btn:hover,
        .mobile-call-btn:focus {
            color: #ffffff !important;
            background: #1b3560 !important;
            border-color: #1b3560 !important;
        }

        .mobile-call-btn,
        .mobile-call-btn:before,
        .mobile-call-btn:hover,
        .mobile-call-btn:focus,
        .mobile-call-btn:active,
        .mobile-call-btn:focus-visible {
            color: #ffffff !important;
            background: linear-gradient(135deg, #22733b, #2AAA8A) !important;
            border-color: #22733b !important;
            box-shadow: 0 6px 16px rgba(34, 115, 59, 0.25) !important;
            outline: none !important; /* حذف حاشیه پیش فرض مرورگر */
        }

    .mobile-call-btn {
        -webkit-tap-highlight-color: transparent; /* حذف رنگ پیش فرض روی موبایل */
    }
    body {
        padding-bottom: 78px !important;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-bar {
        right: 8px !important;
        left: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 52px !important;
        padding: 5px !important;
        gap: 6px !important;
        border-radius: 16px !important;
    }

    .mobile-bottom-item {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        border-radius: 12px !important;
    }

    .mobile-bottom-icon,
    .mobile-call-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        flex-basis: 22px !important;
        font-size: 0.7rem !important;
    }

    .mobile-bottom-title {
        font-size: 0.68rem !important;
    }
}
/*جدید*/
/* Home / About section fixes */
.about-section .about-text-card {
    display: flex;
    flex-direction: column;
}

.about-section .about-btn {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* About section scrollbar on right */
.about-section .about-scroll-box {
    direction: ltr !important;
    text-align: right !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
    padding-left: 0 !important;
}

    /* Keep Persian content RTL */
    .about-section .about-scroll-box > * {
        direction: rtl !important;
        text-align: right !important;
    }

.about-section .about-text-card .about-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 18px !important;
    margin: 20px 0 0 0 !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

@media (max-width: 991px) {
    .about-section .about-image-wrapper {
        width: 100% !important;
        height: 260px !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

        .about-section .about-image-wrapper img {
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            display: block !important;
            object-fit: cover !important;
            object-position: center center !important;
        }

   

}


/* =========================================================
   Home Page - Blog Section Title + Text Fix
   بخش مقالات صفحه اصلی
========================================================= */

/* تیتر اصلی بخش مقالات */
.Blog-section .modern-title,
.Blog-section .section-title,
.Blog-section .blog-section-title,
.Blog-section > .container > h2,
.Blog-section h2 {
    color: #0f2f5f !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

    /* حذف خط زیر تیتر اصلی اگر با ::after ساخته شده */
    .Blog-section .modern-title::after,
    .Blog-section .section-title::after,
    .Blog-section .blog-section-title::after,
    .Blog-section > .container > h2::after,
    .Blog-section h2::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

/* تیتر کارت‌های مقاله */
.Blog-section .blog-card h2,
.Blog-section .blog-card h3,
.Blog-section .blog-card h2 a,
.Blog-section .blog-card h3 a,
.Blog-section .blog-title,
.Blog-section .blog-title a,
.Blog-section .Blog-title,
.Blog-section .Blog-title a {
    color: #0f2f5f !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

    /* حذف خط زیر لینک‌ها و تیتر کارت‌ها */
    .Blog-section .blog-card h2::after,
    .Blog-section .blog-card h3::after,
    .Blog-section .blog-card h2 a::after,
    .Blog-section .blog-card h3 a::after,
    .Blog-section .blog-title::after,
    .Blog-section .blog-title a::after,
    .Blog-section .Blog-title::after,
    .Blog-section .Blog-title a::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
    }

    /* رنگ هاور تیتر مقاله */
    .Blog-section .blog-card h2 a:hover,
    .Blog-section .blog-card h3 a:hover,
    .Blog-section .blog-title a:hover,
    .Blog-section .Blog-title a:hover {
        color: #071f44 !important;
        text-decoration: none !important;
    }

/* متن خلاصه مقالات justify شود */
.Blog-section .blog-card p,
.Blog-section .blog-summary,
.Blog-section .blog-description,
.Blog-section .blog-excerpt,
.Blog-section .Blog-summary,
.Blog-section .Blog-description,
.Blog-section .Blog-excerpt {
    text-align: justify !important;
    line-height: 2 !important;
    color: #444b5a !important;
}

/* لینک‌های داخل بخش مقالات زیرخط نداشته باشند */
.Blog-section a {
    text-decoration: none !important;
}

/* اگر خط قرمز یا رنگ قرمز از قبل روی تیتر مانده باشد */
.Blog-section .modern-title span,
.Blog-section .section-title span,
.Blog-section h2 span,
.Blog-section h3 span {
    color: #0f2f5f !important;
}

/* Home Blog Section - Dark Blue Titles */
.Blog-section .modern-title,
.Blog-section .section-title,
.Blog-section .blog-section-title,
.Blog-section h2,
.Blog-section h2 span,
.Blog-section h3,
.Blog-section h3 span,
.Blog-section .blog-card h2,
.Blog-section .blog-card h3,
.Blog-section .blog-card h2 a,
.Blog-section .blog-card h3 a,
.Blog-section .blog-title,
.Blog-section .blog-title a {
    color: #0f2f5f !important;
}






@media (max-width: 767px) {
    #clientsSection {
        display: none !important;
    }
    .client-mobile-hscroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE / Edge قدیمی */
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

        .client-mobile-hscroll::-webkit-scrollbar {
            display: none !important; /* Chrome / Safari / Edge */
            width: 0 !important;
            height: 0 !important;
        }

        .client-mobile-hscroll::-webkit-scrollbar-thumb {
            display: none !important;
        }

    .mobile-card-row {
        padding-bottom: 8px !important;
    }
}




/* دکمه‌های مشاهده همه - مینیمال بدون بوردر */
.modern-view-all,
.section-view-all,
.client-view-all {
    border: none !important;
    background: transparent !important;
    color: #173760 !important;
    font-weight: 800;
    padding: 0.45rem 0.25rem;
    border-radius: 0;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color 0.2s ease, gap 0.2s ease, transform 0.2s ease;
}

    /* فلش ساده */
    .modern-view-all::after,
    .section-view-all::after,
    .client-view-all::after {
        content: "←";
        font-size: 13px;
        line-height: 1;
        opacity: 0.75;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* هاور خیلی ساده */
    .modern-view-all:hover,
    .section-view-all:hover,
    .client-view-all:hover {
        color: #0f2442 !important;
        background: transparent !important;
        transform: translateY(-1px);
        gap: 10px;
    }

        /* حرکت فلش */
        .modern-view-all:hover::after,
        .section-view-all:hover::after,
        .client-view-all:hover::after {
            transform: translateX(-3px);
            opacity: 1;
        }


/*Set Font*/

/* =====================================================
   Font & Typography Sync From Old Style
   قرار بده در انتهای style.css جدید
===================================================== */

/* فونت اصلی سایت مثل استایل قدیمی */
html,
body {
    font-family: "irsans", irsans, sans-serif !important;
    font-style: normal;
    font-size: 16px;
    font-weight: normal;
    color: #757F95;
    line-height: 1.8;
}

    /* همه اجزا فونت بدنه را بگیرند */
    body *,
    button,
    input,
    textarea,
    select {
        font-family: "irsans", irsans, sans-serif !important;
    }

/* تیترهای اصلی طبق استایل قدیمی */
h1, h2, h3, h4, h5, h6 {
    color: #204066;
    margin: 0;
    font-weight: 600;
    font-family: "irsans", irsans, sans-serif !important;
    line-height: 1.2;
}

h1 {
    font-size: 30px !important;
}

h2 {
    font-size: 25px !important;
}

h3 {
    font-size: 23px !important;
}

h4 {
    font-size: 22px !important;
}

h5 {
    font-size: 18px !important;
}

h6 {
    font-size: 16px !important;
}

p {
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* عنوان‌های عمومی بخش‌ها */
.section-title,
.section-heading,
.modern-title,
.client-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

/* عنوان‌های بخش‌های جدید */
.services-title,
.Portfolio-title,
.Product-title,
.Blog-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

/* هدر و منو */
.navbar-brand {
    font-size: 24px !important;
    font-weight: 700 !important;
}

.nav-link,
.offcanvas .nav-link,
.mobile-offcanvas .mobile-menu-link {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* هیرو */
.hero .display-5 {
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.3;
}

.hero-title {
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.hero .lead,
.hero-glass-badge,
.hero .trust-badge {
    font-size: 17px !important;
    line-height: 1.8;
}

/* دکمه‌ها */
.theme-btn,
.section-view-all,
.services-view-all,
.Portfolio-view-all,
.Product-view-all,
.Blog-view-all,
.modern-view-all,
.client-view-all,
.about-btn,
.service-btn,
.Product-btn,
.Blog-link,
.Portfolio-btn-details,
.btn-premium-more,
.btn-warning {
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* کارت مزایا */
.benefit-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.benefit-text {
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* درباره ما */
.about-title {
    font-size: 28px !important;
    font-weight: 700 !important;
}

.about-subtitle {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.about-text {
    font-size: 16px !important;
    line-height: 2.2 !important;
}

/* خدمات */
.service-card-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.service-tags li {
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* نمونه‌کارها */
.Portfolio-card-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.Portfolio-services-list li {
    font-size: 15px !important;
    font-weight: 500 !important;
}

.Portfolio-modal-title {
    font-size: 28px !important;
    font-weight: 700 !important;
}

.Portfolio-tab-btn {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.Portfolio-modal-description {
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* محصولات */
.Product-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

.Product-spec-item {
    font-size: 14px !important;
}

.Product-price {
    font-size: 20px !important;
    font-weight: 800 !important;
}

.Product-card-badge {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* بلاگ */
.Blog-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

.Blog-excerpt {
    font-size: 15px !important;
    line-height: 1.8 !important;
}

.Blog-meta,
.Blog-share,
.Blog-comment {
    font-size: 13px !important;
}

/* آمار */
.stat-number {
    font-size: 50px !important;
    font-weight: 600 !important;
    line-height: 1;
}

.stat-card p {
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* مشتریان */
.client-name {
    font-size: 18px !important;
    font-weight: 700 !important;
}

.client-company,
.client-stars {
    font-size: 15px !important;
}

/* دکمه‌های شناور و موبایل */
.float-btn {
    font-size: 22px !important;
}

.dark-mode-toggle {
    font-size: 22px !important;
}

.mobile-bottom-item,
.mobile-bottom-title {
    font-size: 13px !important;
    font-weight: 800 !important;
}

.mobile-page-breadcrumb {
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Placeholder طبق استایل قدیمی */
*::placeholder {
    font-size: 16px;
    opacity: 1;
}

/* =========================
   Responsive Like Old Style
========================= */

@media all and (max-width: 1199px) {
    .hero .display-5,
    .hero-title {
        font-size: 37px !important;
    }
}

@media all and (max-width: 991px) {
    .hero .display-5,
    .hero-title {
        font-size: 35px !important;
    }
}

@media all and (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 16px;
    }

    .section-title,
    .section-heading,
    .modern-title,
    .client-title,
    .services-title,
    .Portfolio-title,
    .Product-title,
    .Blog-title {
        font-size: 24px !important;
    }

    .hero .display-5,
    .hero-title {
        font-size: 30px !important;
        line-height: 1.35 !important;
    }

    .hero .lead,
    .hero-glass-badge,
    .hero .trust-badge {
        font-size: 16px !important;
    }

    .about-title {
        font-size: 24px !important;
    }

    .about-subtitle {
        font-size: 16px !important;
    }

    .about-text {
        font-size: 15px !important;
        line-height: 2 !important;
    }

    .service-card-title,
    .Portfolio-card-title {
        font-size: 20px !important;
    }

    .Product-card-title,
    .Blog-card-title {
        font-size: 17px !important;
    }

    .stat-number {
        font-size: 38px !important;
    }

    .stat-card p {
        font-size: 16px !important;
    }
}
/*Set Font*/

/* =====================================================
   FontAwesome Fix
   چون font-family عمومی با !important روی همه عناصر اعمال شده
===================================================== */

.fa,
.fas,
.fa-solid {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
}

.far,
.fa-regular {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 400 !important;
}

.fal,
.fa-light {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 300 !important;
}

.fad,
.fa-duotone {
    font-family: "Font Awesome 5 Duotone" !important;
    font-weight: 900 !important;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}
/* وقتی آکاردئون باز است، + تبدیل به × شود */
.faq-accordion .accordion-button .faq-plus {
    transition: transform 0.25s ease;
}

/* حالت باز: تبدیل + به × */
.faq-accordion .accordion-button:not(.collapsed) .faq-plus {
    font-family: "Font Awesome 5 Pro";
    content: "\f00d"; /* کد Unicode ضربدر FontAwesome */
}

    .faq-accordion .accordion-button:not(.collapsed) .faq-plus::before {
        font-family: "Font Awesome 5 Pro";
        content: "\f00d"; /* ضربدر */
        display: inline-block;
    }

/* وقتی بسته است، نشان + باشد */
.faq-accordion .accordion-button.collapsed .faq-plus::before {
    content: "\f067"; /* کد Unicode + */
    font-family: "Font Awesome 5 Pro";
}

/* ==================== موبایل: عنوان بخش‌ها و دکمه مشاهده همه در یک سطر ==================== */
@media (max-width: 767px) {
    .modern-section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-bottom: 1.5rem !important;
    }

    .modern-title-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0.35rem 0.75rem 0.35rem 0.55rem !important;
        white-space: nowrap !important;
    }

    .modern-title-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
    }

    .modern-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    .modern-view-all {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1 !important;
        padding: 0.35rem 0.25rem !important;
        gap: 5px !important;
        min-width: max-content !important;
    }

        .modern-view-all i {
            font-size: 0.75rem !important;
        }
}

@media (max-width: 360px) {
    .modern-title {
        font-size: 18px !important;
    }

    .modern-title-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 0.85rem !important;
    }

    .modern-view-all {
        font-size: 12px !important;
    }
}

/* Benefits Section Hover Text Color */
#benefitsSection .benefit-card:hover .benefit-title,
#benefitsSection .benefit-card:hover .benefit-desc,
#benefitsSection .benefit-card:hover p,
#benefitsSection .benefit-card:hover span,
#benefitsSection .benefit-card:hover i {
    color: #ffffff !important;
}

#benefitsSection .benefit-card:hover {
    color: #ffffff !important;
}

    #benefitsSection .benefit-card:hover a {
        color: #ffffff !important;
    }

    #benefitsSection .benefit-card:hover .benefit-title {
        color: #ffffff !important;
    }





/* Product Button - Home Index */
.Product-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 42px;
    padding: 0 22px;
    background: linear-gradient(135deg, #224173, #1b3560);
    color: #ffffff !important;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
}

    /* Hover */
    .Product-btn:hover {
        color: #ffffff !important;
        text-decoration: none !important;
        background: linear-gradient(135deg, #1b3560, #224173);
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(34, 65, 115, 0.25);
    }

    /* Focus / Active / Visited */
    .Product-btn:focus,
    .Product-btn:active,
    .Product-btn:visited {
        color: #ffffff !important;
        text-decoration: none !important;
        outline: none;
    }


/* Home Blog Section - Force Article Title Size */
h5.Blog-card-title,
h5.Blog-card-title a.Portfolio-card-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

/* FAQ Accordion Body Scroll - Mobile Only */
/* FAQ Accordion Body Scroll + Mobile Minimal Style */
@media (max-width: 767.98px) {

    /* متن جواب آکاردئون با ارتفاع محدود */
    .faq-section-wrapper .accordion-body {
        max-height: 180px;
        overflow-y: auto;
        overflow-x: hidden;
        /* برای اینکه اسکرول سمت راست بیاد */
        direction: ltr;
        text-align: right;
        padding: 14px 14px 14px 10px;
        line-height: 1.8;
        font-size: 13px !important;
        font-weight: 400;
        color: #4b5563;
        -webkit-overflow-scrolling: touch;
        unicode-bidi: plaintext;
    }

        /* محتوای فارسی داخل جواب همچنان راست‌چین و درست بماند */
        .faq-section-wrapper .accordion-body * {
            direction: rtl;
            text-align: right;
        }

        /* ظاهر بهتر اسکرول */
        .faq-section-wrapper .accordion-body::-webkit-scrollbar {
            width: 5px;
        }

        .faq-section-wrapper .accordion-body::-webkit-scrollbar-track {
            background: rgba(34, 65, 115, 0.08);
            border-radius: 10px;
        }

        .faq-section-wrapper .accordion-body::-webkit-scrollbar-thumb {
            background: rgba(34, 65, 115, 0.42);
            border-radius: 10px;
        }

            .faq-section-wrapper .accordion-body::-webkit-scrollbar-thumb:hover {
                background: rgba(34, 65, 115, 0.62);
            }

    /* تیترهای سوالات آکاردئون در موبایل */
    .faq-section-wrapper .accordion-button {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.8 !important;
        padding: 13px 14px !important;
        border-radius: 14px !important;
        color: #1f2937 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        text-align: right;
        gap: 8px;
    }

        /* حالت باز شده سوال */
        .faq-section-wrapper .accordion-button:not(.collapsed) {
            color: #224173 !important;
            background: rgba(34, 65, 115, 0.06) !important;
            box-shadow: none !important;
        }

        /* حذف حالت آبی پیش‌فرض بوت‌استرپ هنگام کلیک */
        .faq-section-wrapper .accordion-button:focus,
        .faq-section-wrapper .accordion-button:active {
            box-shadow: none !important;
            outline: none !important;
            border-color: transparent !important;
        }

        /* متن داخل دکمه سوال */
        .faq-section-wrapper .accordion-button span {
            font-size: 14px !important;
            font-weight: 600 !important;
        }

    /* آیکون سوال */
    .faq-section-wrapper .faq-question-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(34, 65, 115, 0.08);
        color: #224173;
        font-size: 13px;
    }

    /* آیکون مثبت */
    .faq-section-wrapper .faq-plus {
        font-size: 12px;
        color: #224173;
        margin-right: auto;
        opacity: 0.75;
    }

    /* کارت هر آیتم آکاردئون */
    .faq-section-wrapper .accordion-item {
        border-radius: 14px !important;
        overflow: hidden;
        border: 1px solid rgba(34, 65, 115, 0.08) !important;
        margin-bottom: 10px;
        background: #ffffff;
    }

    /* متن جواب داخل FAQ یک سایز کوچک‌تر از تیتر */
    .faq-section-wrapper .accordion-body p,
    .faq-section-wrapper .accordion-body div,
    .faq-section-wrapper .accordion-body span,
    .faq-section-wrapper .accordion-body li,
    .faq-section-wrapper .accordion-body a {
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.8 !important;
        color: #4b5563;
    }
}




/* Hero Slider Fix - Show Full Image Under Menu */
/* Hero Slider - Standard Height + Full Stretch Image */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0 !important;
}

/* Desktop */
@media (min-width: 768px) {
    .hero,
    .hero-slider,
    .hero-slide {
        height: 520px !important;
        min-height: 520px !important;
        max-height: 520px !important;
    }

    .hero-slide {
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .hero,
    .hero-slider,
    .hero-slide {
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }

    .hero-slide {
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero,
    .hero-slider,
    .hero-slide {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
}

/* لینک روی کل اسلاید */
.slide-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Overlay */
.hero-overlay {
    pointer-events: none;
}


/* Mobile typography override for product detail bottom sheet */
@media (max-width: 991px) {

    #expertBottomSheet .sheet-pane.active-pane h1,
    #expertBottomSheet .sheet-pane.active-pane h2,
    #expertBottomSheet .sheet-pane.active-pane h3,
    #expertBottomSheet .sheet-pane.active-pane h4,
    #expertBottomSheet .sheet-pane.active-pane h5,
    #expertBottomSheet .sheet-pane.active-pane h6 {
        font-family: "irsans", irsans, sans-serif !important;
        color: #204066 !important;
        font-weight: 600 !important;
        line-height: 1.7 !important;
        margin: 10px 0 8px !important;
        text-align: right !important;
    }

    #expertBottomSheet .sheet-pane.active-pane h1 {
        font-size: 18px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane h2 {
        font-size: 17px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane h3 {
        font-size: 16px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane h4 {
        font-size: 15px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane h5 {
        font-size: 15px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane h6 {
        font-size: 15px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane p,
    #expertBottomSheet .sheet-pane.active-pane div,
    #expertBottomSheet .sheet-pane.active-pane span,
    #expertBottomSheet .sheet-pane.active-pane li {
        font-size: 15px !important;
        line-height: 1.9 !important;
    }

    #expertBottomSheet .sheet-pane.active-pane p {
        margin-bottom: 10px !important;
        text-align: justify !important;
    }

    #expertBottomSheet .sheet-pane.active-pane ul,
    #expertBottomSheet .sheet-pane.active-pane ol {
        padding-right: 20px !important;
        padding-left: 0 !important;
        margin: 8px 0 12px !important;
    }

    #expertBottomSheet .sheet-pane.active-pane li {
        margin-bottom: 6px !important;
        text-align: justify !important;
    }
}
@media (max-width: 991px) {

    #expertBottomSheet .sheet-pane.active-pane h1 *,
    #expertBottomSheet .sheet-pane.active-pane h2 *,
    #expertBottomSheet .sheet-pane.active-pane h3 *,
    #expertBottomSheet .sheet-pane.active-pane h4 *,
    #expertBottomSheet .sheet-pane.active-pane h5 *,
    #expertBottomSheet .sheet-pane.active-pane h6 * {
        font-size: inherit !important;
        line-height: inherit !important;
    }
}
@media (max-width: 991px) {
    #expertBottomSheet .sheet-pane.active-pane {
        padding-bottom: 90px !important;
        box-sizing: border-box !important;
    }

        #expertBottomSheet .sheet-pane.active-pane > *:last-child {
            margin-bottom: 50px !important;
        }
}




/* =========================================================
   Home Page Mobile Font Scale
   هماهنگ با فونت‌های مودال محصولات
   فقط برای صفحه اصلی سایت
========================================================= */

@media (max-width: 991px) {

    body.home-index-page {
        font-size: 14px !important;
    }

        /* Header / Navbar / Offcanvas */
        body.home-index-page .navbar-brand {
            font-size: 1rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .nav-link {
            font-size: 0.82rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .offcanvas-title {
            font-size: 1rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .offcanvas .nav-link {
            font-size: 0.82rem !important;
            font-weight: 800 !important;
        }

            body.home-index-page .offcanvas .nav-link i {
                font-size: 0.88rem !important;
            }

        body.home-index-page .mobile-contact-btn a {
            font-size: 0.82rem !important;
            font-weight: 900 !important;
        }

        /* Hero / Slider */
        body.home-index-page .hero .display-5,
        body.home-index-page .hero-title {
            font-size: 1rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .hero .lead,
        body.home-index-page .hero-subtitle,
        body.home-index-page .hero-description {
            font-size: 0.88rem !important;
            line-height: 2 !important;
        }

        body.home-index-page .hero .trust-badge,
        body.home-index-page .hero-glass-badge {
            font-size: 0.78rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .hero .btn,
        body.home-index-page .hero .btn-warning,
        body.home-index-page .hero .btn-outline-light,
        body.home-index-page .hero-btn {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        /* General Section Titles */
        body.home-index-page .section-title,
        body.home-index-page .section-heading,
        body.home-index-page .modern-title,
        body.home-index-page .client-title,
        body.home-index-page .services-title,
        body.home-index-page .Portfolio-title,
        body.home-index-page .Product-title,
        body.home-index-page .Blog-title {
            font-size: 1rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .section-title-icon,
        body.home-index-page .modern-title-icon,
        body.home-index-page .client-title-icon,
        body.home-index-page .services-title-icon,
        body.home-index-page .Portfolio-title-icon,
        body.home-index-page .Product-title-icon,
        body.home-index-page .Blog-title-icon {
            font-size: 0.88rem !important;
        }

        body.home-index-page .section-view-all,
        body.home-index-page .modern-view-all,
        body.home-index-page .client-view-all,
        body.home-index-page .services-view-all,
        body.home-index-page .Portfolio-view-all,
        body.home-index-page .Product-view-all,
        body.home-index-page .Blog-view-all,
        body.home-index-page .btn-premium-more,
        body.home-index-page .btn-premium-more-sm {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        /* Benefits */
        body.home-index-page .benefit-icon {
            font-size: 1.5rem !important;
        }

        body.home-index-page .benefit-title {
            font-size: 0.88rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .benefit-text {
            font-size: 0.78rem !important;
            line-height: 1.9 !important;
        }

        /* About */
        body.home-index-page .about-title {
            font-size: 1rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .about-subtitle {
            font-size: 0.82rem !important;
            line-height: 1.9 !important;
            font-weight: 800 !important;
        }

        body.home-index-page .about-text {
            font-size: 0.88rem !important;
            line-height: 2.1 !important;
        }

        body.home-index-page .about-btn {
            font-size: 0.82rem !important;
            font-weight: 900 !important;
        }

        /* Services */
        body.home-index-page .service-card-title {
            font-size: 0.88rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .service-tags li {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

            body.home-index-page .service-tags li i {
                font-size: 0.78rem !important;
            }

        body.home-index-page .service-btn {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        /* Portfolio */
        body.home-index-page .Portfolio-card-title {
            font-size: 0.88rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Portfolio-services-list li {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .Portfolio-btn-details {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Portfolio-modal-title {
            font-size: 1rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Portfolio-tab-btn {
            font-size: 0.82rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Portfolio-modal-services li,
        body.home-index-page .Portfolio-modal-description {
            font-size: 0.82rem !important;
            line-height: 1.9 !important;
        }

        /* Products */
        body.home-index-page .Product-card-badge {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .Product-card-title {
            font-size: 0.88rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Product-spec-title,
        body.home-index-page .Product-spec-value,
        body.home-index-page .Product-spec-item {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .Product-price {
            font-size: 0.88rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Product-btn {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        /* Blog */
        body.home-index-page .Blog-card-badge {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .Blog-card-title {
            font-size: 0.88rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .Blog-meta,
        body.home-index-page .Blog-meta-item,
        body.home-index-page .Blog-share,
        body.home-index-page .Blog-comment {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .Blog-excerpt {
            font-size: 0.78rem !important;
            line-height: 1.9 !important;
        }

        body.home-index-page .Blog-link {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        /* Clients */
        body.home-index-page .client-name {
            font-size: 0.82rem !important;
            line-height: 1.7 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .client-company {
            font-size: 0.72rem !important;
            line-height: 1.7 !important;
            font-weight: 800 !important;
        }

        body.home-index-page .client-stars {
            font-size: 0.72rem !important;
        }

        /* Stats */
        body.home-index-page .stat-card i {
            font-size: 1.5rem !important;
        }

        body.home-index-page .stat-number {
            font-size: 1.6rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .stat-card p {
            font-size: 0.82rem !important;
            line-height: 1.9 !important;
            font-weight: 800 !important;
        }

        /* Quick Request */
        body.home-index-page .quick-request-badge {
            font-size: 0.72rem !important;
            font-weight: 800 !important;
        }

        body.home-index-page .quick-request-title {
            font-size: 1rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .quick-request-desc {
            font-size: 0.88rem !important;
            line-height: 2 !important;
        }

        body.home-index-page .quick-request-point {
            font-size: 0.82rem !important;
            line-height: 1.9 !important;
            font-weight: 800 !important;
        }

        body.home-index-page .quick-form label,
        body.home-index-page .quick-form .form-label {
            font-size: 0.78rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .quick-form input,
        body.home-index-page .quick-form textarea,
        body.home-index-page .quick-form select,
        body.home-index-page .quick-form .form-control {
            font-size: 0.82rem !important;
            line-height: 1.8 !important;
        }

        body.home-index-page .quick-form .btn,
        body.home-index-page .quick-form button {
            font-size: 0.82rem !important;
            font-weight: 900 !important;
        }

        /* FAQ */
        body.home-index-page .faq-intro-card h2,
        body.home-index-page .faq-intro-card h3,
        body.home-index-page .faq-box h2,
        body.home-index-page .faq-box h3 {
            font-size: 1rem !important;
            line-height: 1.75 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .faq-intro-card p,
        body.home-index-page .faq-box p {
            font-size: 0.88rem !important;
            line-height: 2 !important;
        }

        body.home-index-page .faq-mobile-toggle {
            font-size: 0.82rem !important;
            font-weight: 900 !important;
        }

        body.home-index-page .faq-accordion .accordion-button {
            font-size: 0.82rem !important;
            line-height: 1.8 !important;
            font-weight: 900 !important;
        }

        body.home-index-page .faq-accordion .accordion-body {
            font-size: 0.88rem !important;
            line-height: 2 !important;
        }

        body.home-index-page .faq-question-icon,
        body.home-index-page .faq-plus {
            font-size: 0.82rem !important;
        }

        /* Carousel Dots */
        body.home-index-page .services-dot,
        body.home-index-page .Product-dot,
        body.home-index-page .Blog-dot,
        body.home-index-page .benefits-dot,
        body.home-index-page .Portfolio-dot,
        body.home-index-page .carousel-dot {
            font-size: 0 !important;
        }
}


/* =========================================================
   Medium Mobile
========================================================= */

@media (max-width: 767px) {

    body.home-index-page .section-title,
    body.home-index-page .section-heading,
    body.home-index-page .modern-title,
    body.home-index-page .client-title,
    body.home-index-page .services-title,
    body.home-index-page .Portfolio-title,
    body.home-index-page .Product-title,
    body.home-index-page .Blog-title,
    body.home-index-page .about-title,
    body.home-index-page .quick-request-title {
        font-size: 1rem !important;
    }

    body.home-index-page .hero .display-5,
    body.home-index-page .hero-title {
        font-size: 1rem !important;
    }

    body.home-index-page .hero .lead,
    body.home-index-page .hero-subtitle,
    body.home-index-page .hero-description,
    body.home-index-page .about-text,
    body.home-index-page .quick-request-desc,
    body.home-index-page .faq-accordion .accordion-body {
        font-size: 0.86rem !important;
    }

    body.home-index-page .benefit-title,
    body.home-index-page .service-card-title,
    body.home-index-page .Portfolio-card-title,
    body.home-index-page .Product-card-title,
    body.home-index-page .Blog-card-title {
        font-size: 0.86rem !important;
    }

    body.home-index-page .benefit-text,
    body.home-index-page .Blog-excerpt,
    body.home-index-page .Product-spec-title,
    body.home-index-page .Product-spec-value,
    body.home-index-page .Product-spec-item {
        font-size: 0.76rem !important;
    }

    body.home-index-page .service-tags li,
    body.home-index-page .Portfolio-services-list li,
    body.home-index-page .Blog-meta,
    body.home-index-page .Blog-meta-item {
        font-size: 0.72rem !important;
    }

    body.home-index-page .section-view-all,
    body.home-index-page .modern-view-all,
    body.home-index-page .client-view-all,
    body.home-index-page .services-view-all,
    body.home-index-page .Portfolio-view-all,
    body.home-index-page .Product-view-all,
    body.home-index-page .Blog-view-all,
    body.home-index-page .service-btn,
    body.home-index-page .Portfolio-btn-details,
    body.home-index-page .Product-btn,
    body.home-index-page .Blog-link,
    body.home-index-page .btn-premium-more {
        font-size: 0.76rem !important;
    }

    body.home-index-page .stat-number {
        font-size: 1.45rem !important;
    }

    body.home-index-page .stat-card p,
    body.home-index-page .client-name,
    body.home-index-page .quick-request-point,
    body.home-index-page .faq-accordion .accordion-button {
        font-size: 0.8rem !important;
    }
}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 390px) {

    body.home-index-page .navbar-brand,
    body.home-index-page .offcanvas-title {
        font-size: 0.95rem !important;
    }

    body.home-index-page .offcanvas .nav-link,
    body.home-index-page .nav-link {
        font-size: 0.76rem !important;
    }

    body.home-index-page .section-title,
    body.home-index-page .section-heading,
    body.home-index-page .modern-title,
    body.home-index-page .client-title,
    body.home-index-page .services-title,
    body.home-index-page .Portfolio-title,
    body.home-index-page .Product-title,
    body.home-index-page .Blog-title,
    body.home-index-page .about-title,
    body.home-index-page .quick-request-title,
    body.home-index-page .faq-intro-card h2,
    body.home-index-page .faq-intro-card h3,
    body.home-index-page .faq-box h2,
    body.home-index-page .faq-box h3 {
        font-size: 0.95rem !important;
    }

    body.home-index-page .hero .display-5,
    body.home-index-page .hero-title {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    body.home-index-page .hero .lead,
    body.home-index-page .hero-subtitle,
    body.home-index-page .hero-description,
    body.home-index-page .about-text,
    body.home-index-page .quick-request-desc,
    body.home-index-page .faq-accordion .accordion-body {
        font-size: 0.82rem !important;
        line-height: 1.9 !important;
    }

    body.home-index-page .benefit-title,
    body.home-index-page .service-card-title,
    body.home-index-page .Portfolio-card-title,
    body.home-index-page .Product-card-title,
    body.home-index-page .Blog-card-title {
        font-size: 0.8rem !important;
        line-height: 1.7 !important;
    }

    body.home-index-page .benefit-text,
    body.home-index-page .Blog-excerpt {
        font-size: 0.72rem !important;
        line-height: 1.75 !important;
    }

    body.home-index-page .service-tags li,
    body.home-index-page .Portfolio-services-list li,
    body.home-index-page .Product-spec-title,
    body.home-index-page .Product-spec-value,
    body.home-index-page .Product-spec-item,
    body.home-index-page .Blog-meta,
    body.home-index-page .Blog-meta-item,
    body.home-index-page .Blog-share,
    body.home-index-page .Blog-comment,
    body.home-index-page .client-company {
        font-size: 0.68rem !important;
    }

    body.home-index-page .section-view-all,
    body.home-index-page .modern-view-all,
    body.home-index-page .client-view-all,
    body.home-index-page .services-view-all,
    body.home-index-page .Portfolio-view-all,
    body.home-index-page .Product-view-all,
    body.home-index-page .Blog-view-all,
    body.home-index-page .service-btn,
    body.home-index-page .Portfolio-btn-details,
    body.home-index-page .Product-btn,
    body.home-index-page .Blog-link,
    body.home-index-page .btn-premium-more,
    body.home-index-page .btn-premium-more-sm {
        font-size: 0.72rem !important;
    }

    body.home-index-page .Product-card-badge,
    body.home-index-page .Blog-card-badge,
    body.home-index-page .quick-request-badge {
        font-size: 0.68rem !important;
    }

    body.home-index-page .Product-price {
        font-size: 0.82rem !important;
    }

    body.home-index-page .client-name,
    body.home-index-page .stat-card p,
    body.home-index-page .quick-request-point,
    body.home-index-page .faq-mobile-toggle,
    body.home-index-page .faq-accordion .accordion-button {
        font-size: 0.76rem !important;
    }

    body.home-index-page .stat-number {
        font-size: 1.35rem !important;
    }

    body.home-index-page .quick-form label,
    body.home-index-page .quick-form .form-label {
        font-size: 0.72rem !important;
    }

    body.home-index-page .quick-form input,
    body.home-index-page .quick-form textarea,
    body.home-index-page .quick-form select,
    body.home-index-page .quick-form .form-control {
        font-size: 0.76rem !important;
    }
}



/* ========== لوگوی سایت در کنار نام برند ========== */

.navbar-brand.brand-logo {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    direction: rtl;
    gap: 10px;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.brand-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
}

.brand-logo-text {
    font-family: "irsans-b", "irsans", sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    background: transparent !important;
    text-shadow: none !important;
}

.navbar-brand.brand-logo:hover,
.navbar-brand.brand-logo:focus,
.navbar-brand.brand-logo:active {
    text-decoration: none;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

    .navbar-brand.brand-logo:hover .brand-logo-img,
    .navbar-brand.brand-logo:focus .brand-logo-img,
    .navbar-brand.brand-logo:active .brand-logo-img {
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        transform: none !important;
    }

body.dark-mode .brand-logo-text {
    color: #f1f5f9;
}

body.dark-mode .brand-logo-img {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* ========== حالت موبایل ========== */

@media (max-width: 767px) {
    .navbar-brand.brand-logo {
        gap: 8px;
    }

    .brand-logo-img {
        width: 36px;
        height: 36px;
    }

    .brand-logo-text {
        font-size: 1.05rem;
    }
}

/* =========================================================
   Mobile Offcanvas Brand Logo
   نمایش لوگو در منوی موبایل بدون هاله و بک‌گراند
========================================================= */

.mobile-brand-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    direction: rtl !important;
}

.mobile-brand-logo-img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    flex: 0 0 44px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
}

.mobile-brand-box .offcanvas-title {
    margin: 0 !important;
    line-height: 1.4 !important;
}

.mobile-brand-subtitle {
    display: block !important;
    margin-top: 2px !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
}

/* حذف اثرات احتمالی آیکون قبلی اگر جایی هنوز اعمال شود */
.mobile-brand-icon {
    display: none !important;
}

@media (max-width: 380px) {
    .mobile-brand-logo-img {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .mobile-brand-box {
        gap: 8px !important;
    }
}




/* آیکون لینک وسط‌چین در منوی موبایل */

.mobile-menu-link-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    background: rgba(34, 65, 115, 0.10) !important;
    color: #224173 !important;
    font-size: 0.78rem !important;
    text-align: center !important;
}

    /* خود آیکون FontAwesome هم دقیق وسط بنشیند */
    .mobile-menu-link-icon::before {
        display: block !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

/* لینک منو */
.mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

    /* هاور */
    .mobile-menu-link:hover .mobile-menu-link-icon,
    .mobile-menu-link.active .mobile-menu-link-icon {
        background: #ffffff !important;
        color: #224173 !important;
    }

#offcanvasMenu,
#offcanvasMenu.offcanvas,
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
    border-radius: 28px !important;
    overflow: hidden !important;
}

    #offcanvasMenu.offcanvas.show {
        border-radius: 28px !important;
    }




/* منوی چندسطحی دسکتاپ */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        right: 100%;
        left: auto;
        margin-top: 0;
        display: none;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > .dropdown-toggle::after {
        float: left;
        margin-top: 8px;
        transform: rotate(90deg);
    }

/* منوی موبایلی چندسطحی */
.mobile-submenu-parent {
    display: grid;
    grid-template-columns: 1fr 38px;
    gap: 8px;
    align-items: stretch;
}

.mobile-submenu-item {
    list-style: none;
}

.mobile-submenu-toggle-sm {
    width: 38px;
    min-height: 42px;
    border-radius: 14px;
    font-size: 0.78rem;
    box-shadow: none;
}

.mobile-submenu-list .mobile-submenu-list {
    margin-top: 6px;
    margin-right: 14px;
    padding-right: 10px;
    border-right: 1px dashed rgba(34, 65, 115, 0.16);
}

.mobile-submenu-link-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #224173;
    font-size: 0.75rem;
}

.mobile-submenu-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fix: keep dropdown arrow and menu title on one line */
.navbar .dropdown-toggle,
.navbar-nav .dropdown-toggle,
.dropdown-menu .dropdown-toggle,
.site-menu-nav .menu-link-has-children {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    line-height: 1.8 !important;
}

    .navbar .dropdown-toggle::after,
    .navbar-nav .dropdown-toggle::after,
    .dropdown-menu .dropdown-toggle::after,
    .site-menu-nav .menu-link-has-children::after {
        float: none !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: .35rem !important;
        margin-left: 0 !important;
        vertical-align: middle !important;
    }

.dropdown-submenu > .dropdown-toggle,
.dropdown-submenu > .menu-link-has-children {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: .75rem !important;
}

    .dropdown-submenu > .dropdown-toggle::after,
    .dropdown-submenu > .menu-link-has-children::after {
        float: none !important;
        margin-top: 0 !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        transform: rotate(90deg) !important;
    }


/* =========================================
   Multi Level Mobile Breadcrumb
========================================= */

@media (max-width: 991px) {

    .mobile-page-breadcrumb.has-multi-level {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

        .mobile-page-breadcrumb.has-multi-level::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-home,
        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-parent,
        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-separator,
        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-current {
            flex: 0 0 auto !important;
        }

        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-parent {
            display: inline-flex !important;
            align-items: center !important;
            max-width: none !important;
            overflow: visible !important;
            text-overflow: clip !important;
            white-space: nowrap !important;
        }

        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-current {
            display: inline-flex !important;
            align-items: center !important;
            min-width: auto !important;
            max-width: none !important;
            overflow: visible !important;
            text-overflow: clip !important;
            white-space: nowrap !important;
        }

        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-home span {
            display: inline !important;
        }

        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-separator {
            display: inline-block !important;
        }
}


/* =========================================
   SEO Breadcrumb
   Products, Landings and Blog
========================================= */

.seo-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 18px;
    font-size: 13px;
    line-height: 1.9;
}

    .seo-breadcrumb a {
        color: #667085;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .seo-breadcrumb a:hover {
            color: #224173;
        }

.seo-breadcrumb-separator {
    color: #98a2b3;
    font-size: 10px;
}

.seo-breadcrumb-current {
    color: #224173;
    font-weight: 700;
}

/*
 * Breadcrumb روی تصویر Hero مقاله
 */
.blog-detail-seo-breadcrumb a,
.blog-detail-seo-breadcrumb
.seo-breadcrumb-separator {
    color: rgba(255, 255, 255, 0.72);
}

.blog-detail-seo-breadcrumb
.seo-breadcrumb-current {
    color: #ffffff;
}

/*
 * Breadcrumbهای طولانی در موبایل
 */
@media (max-width: 991px) {

    .mobile-page-breadcrumb.has-multi-level {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

        .mobile-page-breadcrumb.has-multi-level::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

        .mobile-page-breadcrumb.has-multi-level > * {
            flex: 0 0 auto !important;
        }

        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-parent,
        .mobile-page-breadcrumb.has-multi-level
        .mobile-page-breadcrumb-current {
            max-width: none !important;
            overflow: visible !important;
            text-overflow: clip !important;
            white-space: nowrap !important;
        }
}

/*لینکهای خط چین دار*/
.custom-text-link {
    color: #1f5f9f;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed #0f2f5f;
}

    .custom-text-link:hover,
    .custom-text-link:focus {
        color: #0f2f5f;
        border-bottom-color: transparent;
    }


/* ==================================================
   جدول ترنسپوزشده با ستون عنوان ثابت
   فقط دارای خطوط افقی داخلی
================================================== */

.responsive-data-table {
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    position: relative;
    direction: rtl;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #ffffff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #aeb6c1 #f1f3f5;
}

    /* خود جدول */
    .responsive-data-table table {
        width: max-content;
        min-width: 100%;
        direction: rtl;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
        background-color: #ffffff;
        /* حذف کادر بیرونی جدول */
        border: none !important;
    }

    /* تمام سلول‌ها */
    .responsive-data-table th,
    .responsive-data-table td {
        width: 220px;
        min-width: 220px;
        padding: 14px 16px;
        color: #333333;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.8;
        text-align: right;
        vertical-align: middle;
        background-color: #ffffff;
        /* حذف تمام خطوط عمودی و کادرهای پیش‌فرض */
        border-top: none !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: none;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* فقط خطوط افقی بین ردیف‌ها */
    .responsive-data-table tr:not(:last-child) > th,
    .responsive-data-table tr:not(:last-child) > td {
        border-bottom: 1px solid #e1e5e9;
    }

    /* ستون اول؛ عنوان‌های جدول */
    .responsive-data-table tr > :first-child {
        width: 180px;
        min-width: 180px;
        max-width: 180px;
        color: #222222;
        font-weight: 700;
        background-color: #eeeeee;
    }

/* هاور فقط روی سلول‌های داده */
@media (hover: hover) {
    .responsive-data-table tr:hover > :not(:first-child) {
        background-color: #f8fafc;
    }
}

/* ستون عنوان در هاور خاکستری باقی بماند */
.responsive-data-table tr:hover > :first-child {
    background-color: #eeeeee;
}

/* اسکرول‌بار */
.responsive-data-table::-webkit-scrollbar {
    height: 7px;
}

.responsive-data-table::-webkit-scrollbar-track {
    background-color: #f1f3f5;
    border-radius: 10px;
}

.responsive-data-table::-webkit-scrollbar-thumb {
    background-color: #aeb6c1;
    border-radius: 10px;
}

    .responsive-data-table::-webkit-scrollbar-thumb:hover {
        background-color: #8f99a6;
    }

/* ==================================================
   نسخه موبایل
================================================== */
@media (max-width: 768px) {
    .responsive-data-table {
        margin: 18px 0;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
    }

        .responsive-data-table table {
            width: max-content;
            min-width: max-content;
        }

        .responsive-data-table th,
        .responsive-data-table td {
            width: 190px;
            min-width: 190px;
            padding: 12px 14px;
            font-size: 14px;
            line-height: 1.7;
            border-top: none !important;
            border-right: none !important;
            border-left: none !important;
        }

        /* خطوط افقی داخلی در موبایل */
        .responsive-data-table tr:not(:last-child) > th,
        .responsive-data-table tr:not(:last-child) > td {
            border-bottom: 1px solid #e1e5e9;
        }

        /* ستون اول ثابت در سمت راست */
        .responsive-data-table tr > :first-child {
            position: sticky;
            right: 0;
            z-index: 10;
            width: 130px;
            min-width: 130px;
            max-width: 130px;
            color: #222222;
            font-size: 14px;
            font-weight: 700;
            background-color: #eeeeee;
            background-clip: padding-box;
        }
}

/* ==================================================
   فهرست مطالب باز و بسته‌شونده
================================================== */

.BlogTableofContents {
    width: 100%;
    margin: 28px 0;
    padding: 0;
    direction: rtl;
    background-color: #ffffff;
    border: 1px solid #d3e3ec;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(34, 65, 115, 0.06);
    box-sizing: border-box;
}

    /* ==================================================
   نوار عنوان
================================================== */

    .BlogTableofContents .BlogContentToggle {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 64px;
        margin: 0;
        /* فاصله راست کمتر و فضای کافی در چپ برای فلش */
        padding: 13px 16px 13px 52px;
        direction: rtl;
        color: #224173;
        background-color: #e6f2f8;
        border: 0;
        outline: 0;
        appearance: none;
        -webkit-appearance: none;
        font-family: inherit;
        text-align: right;
        cursor: pointer;
        box-sizing: border-box;
        transition: background-color 0.2s ease;
    }

        .BlogTableofContents .BlogContentToggle:hover {
            background-color: #dcecf5;
        }

        .BlogTableofContents .BlogContentToggle:focus-visible {
            outline: 2px solid #224173;
            outline-offset: -3px;
        }

    /* ==================================================
   عنوان اصلی
================================================== */

    .BlogTableofContents .BlogContentTitle {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        min-width: 0;
        margin: 0;
        padding: 0;
        direction: rtl;
        color: #224173;
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.8;
        text-align: right;
    }

        /* ==================================================
   آیکون فهرست قبل از عنوان
================================================== */

        .BlogTableofContents .BlogContentTitle::before {
            content: "☷";
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            margin: 0;
            color: #224173;
            font-family: Arial, Tahoma, sans-serif;
            font-size: 21px;
            font-weight: 400;
            line-height: 1;
        }

    /* ==================================================
   فلش باز و بسته‌شدن در سمت چپ
================================================== */

    .BlogTableofContents .BlogContentToggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 20px;
        display: block;
        width: 10px;
        height: 10px;
        border-right: 2px solid #224173;
        border-bottom: 2px solid #224173;
        box-sizing: border-box;
        transform-origin: center;
        transition: transform 0.3s ease;
    }

    /* حالت بسته: فلش رو به بالا */
    .BlogTableofContents.is-closed .BlogContentToggle::after {
    
        transform: translateY(-70%) rotate(45deg);
    }

    /* حالت باز: فلش رو به پایین */
    .BlogTableofContents:not(.is-closed) .BlogContentToggle::after {
        transform: translateY(-30%) rotate(-135deg);
    }

    /* مخفی‌کردن تگ آیکون قدیمی */
    .BlogTableofContents .BlogContentIcon {
        display: none !important;
    }

    /* ==================================================
   بدنه فهرست
================================================== */

    .BlogTableofContents .BlogContentBody {
        display: grid;
        grid-template-rows: 1fr;
        width: 100%;
        margin: 0;
        padding: 0;
        visibility: visible;
        opacity: 1;
        background-color: #ffffff;
        box-sizing: border-box;
        transition: grid-template-rows 0.35s ease, opacity 0.25s ease, visibility 0s linear 0s;
    }

    /* حالت بسته */
    .BlogTableofContents.is-closed .BlogContentBody {
        grid-template-rows: 0fr;
        visibility: hidden;
        opacity: 0;
        transition: grid-template-rows 0.35s ease, opacity 0.2s ease, visibility 0s linear 0.35s;
    }

    /* ==================================================
   لیست اصلی
================================================== */

    .BlogTableofContents .BlogContentBody > ul {
        min-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 14px;
        list-style: none;
        background-color: #ffffff;
        box-sizing: border-box;
        transition: padding-top 0.35s ease, padding-bottom 0.35s ease;
    }

    /* حذف فضای سفید در حالت بسته */
    .BlogTableofContents.is-closed .BlogContentBody > ul {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ==================================================
   آیتم‌های فهرست
================================================== */

    .BlogTableofContents .BlogContentItem {
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #ffffff;
        border: 1px solid #e1e9ee;
        border-bottom: 0;
        box-sizing: border-box;
        transition: background-color 0.2s ease;
    }

        /* آیتم‌های فرد */
        .BlogTableofContents .BlogContentItem:nth-child(odd) {
            background-color: #ffffff;
        }

        /* آیتم‌های زوج */
        .BlogTableofContents .BlogContentItem:nth-child(even) {
            background-color: #f4f8fb;
        }

        /* اولین آیتم */
        .BlogTableofContents .BlogContentItem:first-child {
            border-radius: 8px 8px 0 0;
        }

        /* آخرین آیتم */
        .BlogTableofContents .BlogContentItem:last-child {
            border-bottom: 1px solid #e1e9ee;
            border-radius: 0 0 8px 8px;
        }

    /* ==================================================
   لینک آیتم‌ها
================================================== */

    .BlogTableofContents .BlogTitle {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 11px;
        width: 100%;
        margin: 0;
        padding: 11px 15px;
        direction: rtl;
        color: #26384f;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.8;
        text-align: right;
        text-decoration: none;
        box-sizing: border-box;
        transition: color 0.2s ease, padding-right 0.2s ease;
    }

        /* ==================================================
   آیکون دایره‌ای قبل از آیتم‌ها
================================================== */

        .BlogTableofContents .BlogTitle::before {
            content: "";
            flex: 0 0 auto;
            display: block;
            width: 7px;
            height: 7px;
            margin-top: 10px;
            background-color: #224173;
            border: 0;
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(34, 65, 115, 0.12);
            box-sizing: border-box;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

    /* ==================================================
   هاور آیتم‌ها
================================================== */

    .BlogTableofContents .BlogContentItem:hover {
        background-color: #e6f2f8;
    }

        .BlogTableofContents .BlogContentItem:hover .BlogTitle {
            color: #224173;
            padding-right: 19px;
        }

            .BlogTableofContents .BlogContentItem:hover .BlogTitle::before {
                transform: scale(1.15);
                box-shadow: 0 0 0 4px rgba(34, 65, 115, 0.14);
            }

    /* فوکوس لینک */
    .BlogTableofContents .BlogTitle:focus-visible {
        outline: 2px solid #224173;
        outline-offset: -3px;
    }

/* ==================================================
   نسخه موبایل
================================================== */

@media (max-width: 768px) {
    .BlogTableofContents {
        margin: 20px 0;
        border-radius: 10px;
    }

        .BlogTableofContents .BlogContentToggle {
            min-height: 56px;
            /* عنوان نزدیک‌تر به سمت راست */
            padding: 11px 12px 11px 44px;
        }

            .BlogTableofContents .BlogContentToggle::after {
                left: 16px;
                width: 8px;
                height: 8px;
            }

        .BlogTableofContents .BlogContentTitle {
            gap: 6px;
            font-size: 14px;
            line-height: 1.8;
        }

            .BlogTableofContents .BlogContentTitle::before {
                width: 20px;
                height: 20px;
                font-size: 19px;
            }

        .BlogTableofContents .BlogContentBody > ul {
            padding: 10px;
        }

        .BlogTableofContents.is-closed .BlogContentBody > ul {
            padding-top: 0;
            padding-bottom: 0;
        }

        .BlogTableofContents .BlogTitle {
            gap: 9px;
            padding: 10px 12px;
            font-size: 14px;
            line-height: 1.8;
        }

            .BlogTableofContents .BlogTitle::before {
                width: 6px;
                height: 6px;
                margin-top: 9px;
                box-shadow: 0 0 0 3px rgba(34, 65, 115, 0.12);
            }

        .BlogTableofContents .BlogContentItem:hover .BlogTitle {
            padding-right: 15px;
        }
}

/* ==================================================
   کاهش انیمیشن برای تنظیمات دسترسی
================================================== */

@media (prefers-reduced-motion: reduce) {
    .BlogTableofContents .BlogContentBody,
    .BlogTableofContents .BlogContentBody > ul,
    .BlogTableofContents .BlogContentToggle,
    .BlogTableofContents .BlogContentToggle::after,
    .BlogTableofContents .BlogContentItem,
    .BlogTableofContents .BlogTitle,
    .BlogTableofContents .BlogTitle::before {
        transition: none;
    }
}