/*hero start*/

/* =========================================
   Hero Section Base & Background
========================================= */
.dm-hero-section {
    position: relative;
    width: 100%;
    min-height: 96vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 100px;
    margin-top: 65px;
    z-index: 10;
}

/* لایه پس‌زمینه SVG شما */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-bg-layer svg {
    opacity: 0.85;
}

.hero-bg-animated {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* کمی شفافیت برای خوانایی بیشتر متن‌ها */
    transform: scale(1.1);
    /* انیمیشن تنفسی نرم برای SVG */
    animation: svgBreathe 15s ease-in-out infinite alternate;
}

@keyframes svgBreathe {
    0% {
        transform: scale(1.1) translate(0, 0);
    }
    100% {
        transform: scale(1.15) translate(-1%, 2%);
    }
}

.dm-hero-container {
    position: relative;
    z-index: 5;
    width: 100%;
}

.hero-grid-layout {
    display: grid;
    grid-template-columns: 5fr 6fr; /* سمت چپ فضای بیشتری برای مانور کارت‌ها دارد */
    gap: 40px;
    align-items: center;
}

/* =========================================
   Right Side: Typography & CTAs
========================================= */
.hero-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
}

.dm-hero-section .hero-tag.primary-focus {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    font-size: 29px;
    font-weight: bold;
    color: var(--accent-secondary);
    /*background: rgba(255, 255, 255, 0.05);*/
    /*border: 1px solid rgba(245, 214, 143, 0.3);*/
    border-radius: 50px;
    margin-bottom: 24px;
    /*backdrop-filter: blur(8px);*/
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-secondary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-secondary);
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 0 0 rgba(245, 214, 143, 0.7);
    }
    70% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(245, 214, 143, 0);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.7;
        box-shadow: 0 0 0 0 rgba(245, 214, 143, 0);
    }
}

.hero-title {
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: 1.2;
    margin-bottom: 8px;
    font-weight: 900;
    color: var(--text-primary);
}

.text-copper {
    color: var(--accent-secondary);
    background: linear-gradient(to left, var(--accent-secondary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.luxury-text {
    font-size: clamp(24px, 2.5vw, 32px);
    margin-bottom: 24px;
    font-weight: 500;
    color: var(--text-primary);
}

.hero-desc {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 35px;
    color: var(--text-primary);
    max-width: 90%;
}

.hero-desc strong {
    color: var(--text-primary);
}

.cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dm-hero-section .btn-secondary {
    padding: 15px;
    border-radius: var(--pill-radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: bold;
    background-color: transparent;
    transition: all var(--transition-fast);
}

.dm-hero-section .btn-secondary:hover {
    border-color: var(--accent-secondary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* =========================================
   Left Side: Creative Floating Magnet Layout
========================================= */
.hero-floating-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* چسبیدن کل گروه به سمت چپ کانتینر (راست‌چین) */
    gap: 16px;
    position: relative;
    perspective: 1000px;
}

/* استایل مشترک کارت‌های مجزا */
.dm-magnet-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    width: 100%;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    /* حذف ترنزیشن از هاور در CSS تا JS بتونه به صورت زنده مختصات رو اعمال کنه */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

/* چیدمان پله‌ای (Staggered) برای زیبایی بیشتر */
.m-card-1 {
    margin-left: 0;
    z-index: 3;
}

.m-card-2 {
    margin-left: 10%;
    margin-right: -10%;
    z-index: 2;
}

.m-card-3 {
    margin-left: -3%;
    z-index: 1;
}

/* آیکون و محتوا */
.c-b-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    color: var(--accent-primary);
    font-size: 18px;
    flex-shrink: 0;
}

.c-b-icon.market-icon {
    border-color: #2b6cb0;
    color: #2b6cb0;
}

.c-b-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.c-b-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-b-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--color-navy);
}

.c-b-badge {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: bold;
}

.badge-orange {
    background: rgba(184, 115, 51, 0.15);
    color: var(--accent-secondary);
}

.badge-blue {
    background: rgba(43, 108, 176, 0.15);
    color: #2b6cb0;
}

.badge-gray {
    background: #f1f1f1;
    color: #718096;
}

.c-b-desc {
    font-size: 12px;
    color: #4a5568;
}

.disabled-row {
    opacity: 0.6;
    cursor: default;
}

.disabled-row .c-b-icon {
    border-color: #cbd5e0;
    color: #cbd5e0;
}

/* استاتس‌های شناور (Stats) */
.floating-stats-wrapper {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 380px;
    margin-top: 10px;
    margin-left: 5%;
}

.dm-magnet-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 10px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    color: var(--text-primary);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.dm-magnet-stat strong {
    font-size: 20px;
    color: var(--accent-secondary);
    font-family: 'gofteh', sans-serif;
}

.dm-magnet-stat span {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
}


/* =========================================
   Responsive Logic
========================================= */
@media (max-width: 992px) {
    .pulse-dot {
        display: none;
    }

    .dm-hero-section {
        padding-top: 130px;
        padding-bottom: 75px;
        margin-top: 63px;
    }

    .hero-grid-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hero-text-col {
        align-items: center;
        text-align: center;
    }

    .hero-desc {
        max-width: 100%;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .dm-btn-wrapper, .cta-actions .btn-secondary {
        /*width: 100%;*/
        display: block;
    }

    .hero-floating-col {
        align-items: center;
    }

    .m-card-1, .m-card-2, .m-card-3 {
        margin: 0;
        max-width: 100%;
    }

    .floating-stats-wrapper {
        margin-left: 0;
        max-width: 100%;
    }
}

/* =========================================
   Hero Circular Gallery Background
========================================= */
.dm-hero-section .hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* این دستور باعث می‌شود نیمه پایینی دایره که از هیرو بیرون می‌زند کاملاً قیچی شود */
    overflow: hidden;
}

.dm-hero-section .hero-gallery-wrapper {
    position: absolute;
    bottom: -330px; /* مرکز دایره کمی پایین‌تر از لبه قرار می‌گیرد */
    left: 50%;
    width: 0;
    height: 0;
    z-index: 1;

    /* متغیرهای شعاع و ابعاد کارت برای کنترل راحت هندسه دایره */
    --hero-radius: 650px;
    --item-w: 220px;
    --item-h: 300px;
}

.dm-hero-section .hero-circular-gallery {
    position: absolute;
    top: calc(-1 * var(--hero-radius));
    left: calc(-1 * var(--hero-radius));
    width: calc(2 * var(--hero-radius));
    height: calc(2 * var(--hero-radius));
    animation: spinHeroGallery 50s linear infinite;
}

.dm-hero-section .c-gallery-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--item-w);
    height: var(--item-h);
    margin-top: calc(-0.5 * var(--item-h));
    margin-left: calc(-0.5 * var(--item-w));

    /* فرمول چیدمان دایره‌ای بر اساس زاویه --i */
    transform: rotate(calc(var(--i) * 36deg)) translateY(calc(-1 * var(--hero-radius)));

    border-radius: 24px;
    overflow: hidden;
    opacity: 0.3; /* شفافیت برای اینکه در پس‌زمینه بماند */
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.dm-hero-section.theme-dark .c-gallery-item {
    opacity: 0.15;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.dm-hero-section .c-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes spinHeroGallery {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dm-hero-section .hero-bg-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* عکس‌ها در پایین واضح‌تر و در بالا در پس‌زمینه کاملاً ذوب می‌شوند */
    background: linear-gradient(to top, transparent 0%, #0a192f61 70%);
    z-index: 2;
}

/* =========================================
   Sequential Card Highlight & Hint
========================================= */
/* استایل متن و فلش "سر بزنید" */
.card-visit-hint {
    position: absolute;
    right: -95px; /* قرارگیری در سمت راست بیرونِ کارت */
    top: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    visibility: hidden;
    /* شروع انیمیشن با کمی فاصله به سمت راست */
    transform: translateY(-50%) translateX(15px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none; /* تا مزاحم کلیک روی خود کارت نشود */
}

/* رنگ اختصاصی هر راهنما */
.hint-orange { color: var(--accent-primary); }
.hint-blue { color: #2b6cb0; }

/* حرکت ریزِ فلش به سمت چپ */
.card-visit-hint i {
    animation: pointLeft 1.5s infinite ease-in-out;
}

@keyframes pointLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* -------------------------------------
   (Highlighted State)
------------------------------------- */
.dm-magnet-box {
    transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dm-magnet-box.is-highlighted .card-visit-hint {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.m-card-1.is-highlighted {
    background-color: #fff4e7 !important;
    border-color: rgba(184, 115, 51, 0.4) !important;
    box-shadow: 0 15px 35px rgba(184, 115, 51, 0.15) !important;
}

.m-card-2.is-highlighted {
    background-color: #dfecff !important;
    border-color: rgba(43, 108, 176, 0.4) !important;
    box-shadow: 0 15px 35px rgba(43, 108, 176, 0.15) !important;
}

@media (max-width: 992px) {
    .card-visit-hint {
        display: none !important;
    }
}

/* =========================================
   Responsive Logic for Circular Gallery
========================================= */
@media (max-width: 992px) {
    .dm-hero-section .hero-gallery-wrapper {
        bottom: 150px;
        /* دایره و عکس‌ها در موبایل کوچکتر می‌شوند تا کادر به هم نریزد */
        --hero-radius: 400px;
        --item-w: 140px;
        --item-h: 200px;
    }
}

/*hero end*/

/*brands start*/

/* =========================================
   Brands Section Base & Header
========================================= */
.dm-brands-section {
    position: relative;
    padding: 150px 0;
    background-color: var(--bg-primary);
    overflow: hidden;
}

.dm-brands-section .brands-header {
    text-align: center;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dm-brands-section .brands-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.dm-brands-section .brands-title {
    font-size: 36px;
    color: var(--text-primary);
    margin: 0;
}

/* =========================================
   3D Carousel Container
========================================= */
.brands-3d-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* پرسپکتیو برای ایجاد عمق سه‌بعدی */
    perspective: 1200px;

    /* خطوط عمودی محو در پس‌زمینه (مشابه عکسی که دادید) */
    background:
            linear-gradient(90deg, transparent calc(20% - 1px), rgba(128,128,128,0.1) 20%, transparent calc(20% + 1px)),
            linear-gradient(90deg, transparent calc(50% - 1px), rgba(128,128,128,0.1) 50%, transparent calc(50% + 1px)),
            linear-gradient(90deg, transparent calc(80% - 1px), rgba(128,128,128,0.1) 80%, transparent calc(80% + 1px));

    /* متغیرهای کنترل ابعاد و شعاع دایره */
    --card-w: 310px;
    --card-h: 210px;
    --tz: 420px; /* شعاع دایره سه‌بعدی (translateZ) */
}

/* خطوط عمودی در تم تاریک */
.dm-brands-section.theme-dark .brands-3d-wrapper {
    background:
            linear-gradient(90deg, transparent calc(20% - 1px), rgba(255,255,255,0.05) 20%, transparent calc(20% + 1px)),
            linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,0.05) 50%, transparent calc(50% + 1px)),
            linear-gradient(90deg, transparent calc(80% - 1px), rgba(255,255,255,0.05) 80%, transparent calc(80% + 1px));
}

.brands-3d-carousel {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    transform-style: preserve-3d;
    animation: spinBrands 45s linear infinite;
}

@keyframes spinBrands {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-360deg); }
}

.dm-brands-section .brands-3d-carousel .brand-cell {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;

    transform: rotateY(calc((var(--i) - 1) * 45deg)) translateZ(var(--tz));

    /* اضافه شدن این خط برای انتقال عمق 3D به عکس‌های داخل کارت */
    transform-style: preserve-3d;

    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;

    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dm-brands-section .brands-3d-carousel .brand-cell:hover {
    border-color: var(--accent-secondary);
    box-shadow: 0 15px 35px rgba(184, 115, 51, 0.15);
}

/* تم تاریک */
.dm-brands-section.theme-dark .brands-3d-carousel .brand-cell {
    background-color: rgba(10, 25, 47, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.dm-brands-section.theme-dark .brands-3d-carousel .brand-cell:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    border-color: var(--accent-secondary);
}

/* =========================================
   Floating 3D Logos (عکس‌ها)
========================================= */
.dm-brands-section .brands-3d-carousel .brand-cell img {
    max-width: 100%;
    max-height: 55px;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);

    /* تغییر اصلی: هل دادن لوگو به 40 پیکسل جلوتر از کارت */
    transform: translateZ(40px);

    will-change: transform, opacity, filter;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}

.dm-brands-section .brands-3d-carousel .brand-cell:hover img {
    opacity: 1;
    filter: grayscale(0%);
    /* بیرون پریدنِ بیشتر لوگو به سمت کاربر (60 پیکسل) هنگام هاور */
    transform: scale(1.1) translateZ(60px);
}

/* هماهنگی با تم دارک */
.dm-brands-section.theme-dark .brands-3d-carousel .brand-cell img {
    filter: grayscale(100%) brightness(200%) contrast(100%);
    opacity: 0.4;
}

.dm-brands-section.theme-dark .brands-3d-carousel .brand-cell:hover img {
    opacity: 1;
    filter: grayscale(0%) brightness(200%);
}

/* افکت تعویض عکس اتوماتیک (کمی عقب رفتن حین محو شدن) */
.dm-brands-section .brands-3d-carousel .brand-cell.is-fading img {
    opacity: 0 !important;
    transform: scale(0.8) translateZ(10px) !important;
    filter: grayscale(100%) !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* =========================================
   Brands Grid Structure & Borders
========================================= */
.dm-brands-section .brands-grid-wrapper {
    /*background-color: var(--bg-secondary);*/
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 1px; /* جلوگیری از تداخل حاشیه داخلی */
}

.dm-brands-section .brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 23px;
    overflow: hidden;
}

.dm-brands-section .brands-grid .brand-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    padding: 24px;
    /* ایجاد خط‌چین‌های داخلی (با توجه به راست‌چین بودن، بوردر سمت چپ میدهیم) */
    border-left: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
}

/* حذف خطوط اضافی در دسکتاپ (۴ ستون) */
.dm-brands-section .brands-grid .brand-cell:nth-child(4n) {
    border-left: none;
}

.dm-brands-section .brands-grid .brand-cell:nth-child(n+5) {
    border-bottom: none;
}

.dm-brands-section .brands-grid .brand-cell img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    opacity: 0.6;
    filter: grayscale(100%);

    /* استفاده از Hardware Acceleration برای جلوگیری از لگ */
    transform: translateZ(0);
    will-change: transform, opacity, filter;

    /* هاور نرم و لاکچری (حذف steps از هاور عادی) */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
}

.dm-brands-section .brands-grid .brand-cell:hover img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.08) translateZ(0);
}

/* کلاسی که توسط JS برای افکت تغییر تصویر اضافه می‌شود */
.dm-brands-section .brands-grid .brand-cell.is-fading img {
    opacity: 0;
    transform: scale(0.9) translateZ(0);
    /* حذف blur به دلیل مصرف شدید منابع سیستم که باعث لگ می‌شد */
    filter: grayscale(100%);
    transition: opacity 0.3s steps(4, end), transform 0.3s steps(4, end);
}

.dm-brands-section.theme-dark .brands-grid .brand-cell img {
    filter: grayscale(100%) brightness(200%) contrast(100%);
    opacity: 0.5;
}

.dm-brands-section.theme-dark .brands-grid .brand-cell:hover img {
    opacity: 1;
    filter: grayscale(0%) brightness(200%);
}

/* =========================================
   Responsive Logic (Brands Section)
========================================= */
@media (min-width: 992px) {
    .mobile-brands {
        display: none;
    }
}
@media (max-width: 992px) {
    .desktop-brands {
        display: none;
    }
    .dm-brands-section {
        padding: 60px 0;
    }

    .dm-brands-section .brands-title {
        font-size: 26px;
    }

    /* تغییر به ۲ ستون در موبایل */
    .dm-brands-section .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dm-brands-section .brands-grid .brand-cell {
        height: 110px;
        /* ریست کردن بوردرهای دسکتاپ */
        border-left: 1px dashed var(--border-color);
        border-bottom: 1px dashed var(--border-color);
    }

    /* حذف خطوط اضافی در موبایل (۲ ستون) */
    .dm-brands-section .brands-grid .brand-cell:nth-child(2n) {
        border-left: none;
    }

    .dm-brands-section .brands-grid .brand-cell:nth-child(n+7) {
        border-bottom: none;
    }
}

/*brands end*/

/* =========================================
   Responsive Logic
========================================= */
@media (max-width: 992px) {
    .dm-brands-section {
        padding: 80px 0;
    }

    .dm-brands-section .brands-title {
        font-size: 28px;
    }

    .brands-3d-wrapper {
        height: 300px;
        --card-w: 160px;
        --card-h: 110px;
        --tz: 220px;
    }

    .dm-brands-section .brands-3d-carousel .brand-cell {
        padding: 15px;
        border-radius: 16px;
    }

    .dm-brands-section .brands-3d-carousel .brand-cell img {
        max-height: 60px;
    }
}

@media (max-width: 576px) {
    /* کوچکتر کردن شعاع برای موبایل‌های کوچک */
    .brands-3d-wrapper {
        height: 250px;
        --card-w: 130px;
        --card-h: 90px;
        --tz: 180px;
    }
}

/*brands end*/

/*services start*/

/* =========================================
   Services Section Base
========================================= */
.dm-services-section {
    position: relative;
    height: 400vh; /* فضای لازم برای اسکرول طولانی و نرم */
    background-color: var(--bg-primary);
    z-index: 10;
}

.dm-services-section .services-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* =========================================
   Services Header (Fixed on Right)
========================================= */
.dm-services-section .services-header-box {
    position: absolute;
    right: 10vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;

    padding: 22px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(15px);
}

.dm-services-section.theme-dark .services-header-box {
    background: rgba(10, 25, 47, 0.3);
}

.dm-services-section .s-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.dm-services-section .s-title {
    font-size: 56px;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.dm-services-section .s-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* =========================================
   Services Track & Cards (Layout & Animation)
========================================= */
.dm-services-section .services-track-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.dm-services-section .services-track {
    display: flex;
    align-items: center;
    gap: 80px; /* فاصله بیشتر بین کارت‌ها برای حس لاکچری */

    /* نکته کلیدی: 100vw باعث میشه در ابتدا کل صفحه خالی باشه و کارت‌ها سمت چپ بیرون کادر باشن */
    padding-right: 100vw;
    padding-left: 15vw; /* فضای خالی در انتهای اسکرول */

    width: max-content;
    will-change: transform;
    transform: translateZ(0);
}

.dm-services-section .s-card {
    width: 420px; /* کارت‌های عریض‌تر مطابق دیزاین */
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0.85;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-services-section .s-card:hover {
    opacity: 1;
}

/* اختلاف ارتفاع شدید (Staggering) مطابق عکس دوم
   odd: کارت‌های فرد (1, 3, 5) | even: کارت‌های زوج (2, 4, 6)
*/
.dm-services-section .s-card:nth-child(odd) {
    transform: translateY(-140px);
}

.dm-services-section .s-card:nth-child(even) {
    transform: translateY(140px);
}

/* افکت هاور نرم */
.dm-services-section .s-card:hover:nth-child(odd) {
    transform: translateY(-155px) scale(1.02);
}

.dm-services-section .s-card:hover:nth-child(even) {
    transform: translateY(125px) scale(1.02);
}

/* =========================================
   Card Internal Styles
========================================= */
.dm-services-section .s-img-wrapper {
    position: relative;
    width: 100%;
    height: 300px; /* نسبت تصویر افقی‌تر و سینمایی‌تر */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    background-color: var(--bg-secondary);
}

.dm-services-section.theme-dark .s-img-wrapper {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.dm-services-section .s-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-services-section .s-card:hover .s-img-wrapper img {
    transform: scale(1.05);
}

.dm-services-section .s-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent-primary);
    padding: 6px 14px;
    border-radius: var(--pill-radius);
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
}

.dm-services-section.theme-dark .s-badge {
    background: rgba(10, 25, 47, 0.85);
}

.dm-services-section .s-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
}

.dm-services-section .s-num {
    font-family: 'gofteh', sans-serif;
    font-size: 18px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.dm-services-section .s-name {
    font-size: 24px;
    color: var(--text-primary);
    margin: 0;
}

.dm-services-section .s-detail {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* =========================================
   Responsive Logic (Vertical Stack for Mobile)
========================================= */
@media (max-width: 992px) {
    .dm-services-section {
        height: auto;
        padding: 80px 0;
    }

    .dm-services-section .services-sticky-wrapper {
        position: relative;
        height: auto;
        display: block;
        overflow: visible;
    }

    .dm-services-section .services-header-box {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        padding: 0 24px;
        margin-bottom: 60px;
        text-align: right;
        max-width: 100%;
        align-items: flex-start;

        border-radius: 0;
        background: none; /* اپاسیتی بسیار پایین */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
    }

    .dm-services-section .s-title {
        font-size: 38px;
    }

    .dm-services-section .services-track {
        flex-direction: column;
        padding: 0 24px;
        width: 100%;
        gap: 40px;
        transform: none !important;
    }

    .dm-services-section .s-card {
        width: 100%;
        opacity: 1;
    }

    /* ریست کردن انیمیشن‌ها و اختلاف ارتفاع دسکتاپ در موبایل */
    .dm-services-section .s-card:nth-child(odd),
    .dm-services-section .s-card:nth-child(even),
    .dm-services-section .s-card:hover:nth-child(odd),
    .dm-services-section .s-card:hover:nth-child(even) {
        transform: none;
    }

    .dm-services-section .s-img-wrapper {
        height: 240px;
    }
}

/* =========================================
   Services Section Base
========================================= */
.dm-services-section {
    position: relative;
    height: 400vh; /* فضای لازم برای اسکرول طولانی و نرم */
    background-color: var(--bg-primary);
    z-index: 10;
}

.dm-services-section .services-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* =========================================
   Services Header (Fixed on Right)
========================================= */
.dm-services-section .services-header-box {
    position: absolute;
    right: 10vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* تا مزاحم هاور شدن کارت‌هایی که از رویش رد میشن نشه */
}

.dm-services-section .s-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.dm-services-section .s-title {
    font-size: 56px;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.dm-services-section .s-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* =========================================
   Services Track & Cards (Layout & Animation)
========================================= */
.dm-services-section .services-track-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.dm-services-section .services-track {
    display: flex;
    align-items: center;
    gap: 80px; /* فاصله بیشتر بین کارت‌ها برای حس لاکچری */

    /* نکته کلیدی: 100vw باعث میشه در ابتدا کل صفحه خالی باشه و کارت‌ها سمت چپ بیرون کادر باشن */
    padding-right: 100vw;
    padding-left: 15vw; /* فضای خالی در انتهای اسکرول */

    width: max-content;
    will-change: transform;
    transform: translateZ(0);
}

.dm-services-section .s-card {
    width: 420px; /* کارت‌های عریض‌تر مطابق دیزاین */
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0.85;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-services-section .s-card:hover {
    opacity: 1;
}

/* اختلاف ارتفاع شدید (Staggering) مطابق عکس دوم
   odd: کارت‌های فرد (1, 3, 5) | even: کارت‌های زوج (2, 4, 6)
*/
.dm-services-section .s-card:nth-child(odd) {
    transform: translateY(-140px);
}

.dm-services-section .s-card:nth-child(even) {
    transform: translateY(140px);
}

/* افکت هاور نرم */
.dm-services-section .s-card:hover:nth-child(odd) {
    transform: translateY(-155px) scale(1.02);
}

.dm-services-section .s-card:hover:nth-child(even) {
    transform: translateY(125px) scale(1.02);
}

/* =========================================
   Card Internal Styles
========================================= */
.dm-services-section .s-img-wrapper {
    position: relative;
    width: 100%;
    height: 300px; /* نسبت تصویر افقی‌تر و سینمایی‌تر */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    background-color: var(--bg-secondary);
}

.dm-services-section.theme-dark .s-img-wrapper {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.dm-services-section .s-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-services-section .s-card:hover .s-img-wrapper img {
    transform: scale(1.08);
}

.dm-services-section .s-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent-primary);
    padding: 6px 14px;
    border-radius: var(--pill-radius);
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
}

.dm-services-section.theme-dark .s-badge {
    background: rgba(10, 25, 47, 0.85);
}

.dm-services-section .s-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
}

.dm-services-section .s-num {
    font-family: 'gofteh', sans-serif;
    font-size: 18px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.dm-services-section .s-name {
    font-size: 24px;
    color: var(--text-primary);
    margin: 0;
}

.dm-services-section .s-detail {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* =========================================
   Responsive Logic (Vertical Stack for Mobile)
========================================= */
@media (max-width: 992px) {
    .dm-services-section {
        height: auto;
        padding: 80px 0;
    }

    .dm-services-section .services-sticky-wrapper {
        position: relative;
        height: auto;
        display: block;
        overflow: visible;
    }

    .dm-services-section .services-header-box {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        padding: 0 24px;
        margin-bottom: 60px;
        text-align: right;
        max-width: 100%;
        align-items: flex-start;
    }

    .dm-services-section .s-title {
        font-size: 38px;
    }

    .dm-services-section .services-track {
        flex-direction: column;
        padding: 0 24px;
        width: 100%;
        gap: 40px;
        transform: none !important;
    }

    .dm-services-section .s-card {
        width: 100%;
        opacity: 1;
    }

    /* ریست کردن انیمیشن‌ها و اختلاف ارتفاع دسکتاپ در موبایل */
    .dm-services-section .s-card:nth-child(odd),
    .dm-services-section .s-card:nth-child(even),
    .dm-services-section .s-card:hover:nth-child(odd),
    .dm-services-section .s-card:hover:nth-child(even) {
        transform: none;
    }

    .dm-services-section .s-img-wrapper {
        height: 240px;
    }
}

/* =========================================
   Services Section Base
========================================= */
.dm-services-section {
    position: relative;
    height: 400vh; /* فضای لازم برای اسکرول طولانی و نرم */
    background-color: var(--bg-primary);
    z-index: 10;
}

.dm-services-section .services-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* =========================================
   Services Header (Fixed on Right)
========================================= */
.dm-services-section .services-header-box {
    position: absolute;
    right: 10vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* تا مزاحم هاور شدن کارت‌هایی که از رویش رد میشن نشه */
}

.dm-services-section .s-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.dm-services-section .s-title {
    font-size: 56px;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.dm-services-section .s-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* =========================================
   Services Track & Cards (Layout & Animation)
========================================= */
.dm-services-section .services-track-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.dm-services-section .services-track {
    display: flex;
    align-items: center;
    gap: 80px; /* فاصله بیشتر بین کارت‌ها برای حس لاکچری */

    /* نکته کلیدی: 100vw باعث میشه در ابتدا کل صفحه خالی باشه و کارت‌ها سمت چپ بیرون کادر باشن */
    padding-right: 100vw;
    padding-left: 15vw; /* فضای خالی در انتهای اسکرول */

    width: max-content;
    will-change: transform;
    transform: translateZ(0);
}

.dm-services-section .s-card {
    width: 800px; /* کارت‌های عریض‌تر مطابق دیزاین */
    display: flex;
    flex-direction: row;
    gap: 24px;
    opacity: 0.85;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-services-section .s-card:hover {
    opacity: 1;
}

/* اختلاف ارتفاع شدید (Staggering) مطابق عکس دوم
   odd: کارت‌های فرد (1, 3, 5) | even: کارت‌های زوج (2, 4, 6)
*/
.dm-services-section .s-card:nth-child(odd) {
    transform: translateY(-140px);
}

.dm-services-section .s-card:nth-child(even) {
    transform: translateY(140px);
}

/* افکت هاور نرم */
.dm-services-section .s-card:hover:nth-child(odd) {
    transform: translateY(-155px) scale(1.02);
}

.dm-services-section .s-card:hover:nth-child(even) {
    transform: translateY(125px) scale(1.02);
}

/* =========================================
   Card Internal Styles
========================================= */
.dm-services-section .s-img-wrapper {
    position: relative;
    width: 580px;
    height: 300px; /* نسبت تصویر افقی‌تر و سینمایی‌تر */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    background-color: var(--bg-secondary);
}

.dm-services-section.theme-dark .s-img-wrapper {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.dm-services-section .s-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-services-section .s-card:hover .s-img-wrapper img {
    transform: scale(1.08);
}

.dm-services-section .s-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent-primary);
    padding: 6px 14px;
    border-radius: var(--pill-radius);
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
}

.dm-services-section.theme-dark .s-badge {
    background: rgba(10, 25, 47, 0.85);
}

.dm-services-section .s-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
}

.dm-services-section .s-num {
    font-family: 'gofteh', sans-serif;
    font-size: 18px;
    color: var(--text-secondary);
    opacity: 0.6;
}

.dm-services-section .s-name {
    font-size: 24px;
    color: var(--text-primary);
    margin: 0;
}

.dm-services-section .s-detail {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.dm-services-section .s-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-primary);
}

.dm-services-section .s-link i {
    font-size: 12px;
    transition: transform var(--transition-fast);
}

.dm-services-section .s-link:hover {
    color: var(--accent-secondary);
}

.dm-services-section .s-link:hover i {
    transform: translateX(-4px);
}

/* =========================================
   Responsive Logic (Vertical Stack for Mobile)
========================================= */
@media (max-width: 992px) {
    .dm-services-section .s-card {
        flex-direction: column;
        width: 100%;
    }

    .dm-services-section {
        height: auto;
        padding: 80px 0;
    }

    .dm-services-section .services-sticky-wrapper {
        position: relative;
        height: auto;
        display: block;
        overflow: visible;
    }

    .dm-services-section .services-header-box {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        padding: 0 24px;
        margin-bottom: 60px;
        text-align: right;
        max-width: 100%;
        align-items: flex-start;
    }

    .dm-services-section .s-title {
        font-size: 38px;
    }

    .dm-services-section .services-track {
        flex-direction: column;
        padding: 0 24px;
        width: 100%;
        gap: 40px;
        transform: none !important;
    }

    .dm-services-section .s-card {
        width: 100%;
        opacity: 1;
    }

    /* ریست کردن انیمیشن‌ها و اختلاف ارتفاع دسکتاپ در موبایل */
    .dm-services-section .s-card:nth-child(odd),
    .dm-services-section .s-card:nth-child(even),
    .dm-services-section .s-card:hover:nth-child(odd),
    .dm-services-section .s-card:hover:nth-child(even) {
        transform: none;
    }

    .dm-services-section .s-img-wrapper {
        height: 240px;
        width: 100%;
    }
}

/*services end*/

/*case studies start*/

/* =========================================
   Case Studies Section Base & Header
========================================= */
.dm-casestudies-section {
    position: relative;
    padding: 180px 0;
    background-color: var(--bg-primary);
    /* مخفی کردن کِرسر پیش‌فرض روی کل سکشن وقتی کرسر سفارشی فعال است،
       اما فقط روی لینک‌ها اعمال میکنیم که در هاور است */
}

.dm-casestudies-section .case-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
    gap: 40px;
}

.dm-casestudies-section .case-header-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.dm-casestudies-section .c-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.dm-casestudies-section .c-title {
    font-size: 48px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    text-align: right;
}

.dm-casestudies-section .c-tagline {
    font-size: 16px;
    color: var(--text-secondary);
}

.dm-casestudies-section .case-header-desc {
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 10px;
}

.dm-casestudies-section .case-header-desc h3 {
    font-size: 24px;
    color: var(--accent-secondary);
    margin: 0;
}

.dm-casestudies-section .case-header-desc p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
}

/* =========================================
   Case Cards Grid & Base
========================================= */
.dm-casestudies-section .case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.dm-casestudies-section .dm-case-card {
    position: relative;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    height: 600px;
    cursor: pointer;
    transform: translateZ(0);
}

.dm-casestudies-section .dm-case-card:nth-child(3) {
    grid-column: 1 / -1; /* به معنی گرفتن تمام ستون‌های موجود در این ردیف */
}

.dm-casestudies-section .case-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.dm-casestudies-section .case-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-casestudies-section .dm-case-card:hover .case-img-wrap img {
    transform: scale(1.05);
}

/* لایه تاریک روی عکس برای خوانایی متن */
.dm-casestudies-section .case-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0.2) 50%, transparent 100%);
    z-index: 2;
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

.dm-casestudies-section .dm-case-card:hover .case-overlay {
    opacity: 1;
}

/* =========================================
   Hover Information (Bottom Right)
========================================= */
.dm-casestudies-section .case-hover-info {
    position: absolute;
    bottom: -20px; /* شروع از پایین‌تر برای افکت Slide Up */
    right: 40px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dm-casestudies-section .dm-case-card:hover .case-hover-info {
    bottom: 40px;
    opacity: 1;
    visibility: visible;
}

.dm-casestudies-section .case-info-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.dm-casestudies-section .case-badge {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: var(--pill-radius);
    font-size: 11px;
}

.dm-casestudies-section .case-project-name {
    font-size: 28px;
    color: #ffffff; /* همیشه سفید روی عکس */
    margin: 0;
    font-weight: bold;
}

.dm-casestudies-section .case-stats-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.dm-casestudies-section .case-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-casestudies-section .stat-val {
    font-size: 24px;
    color: var(--accent-secondary); /* طلایی */
    font-family: 'gofteh', sans-serif;
}

.dm-casestudies-section .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.dm-casestudies-section .case-stat-divider {
    width: 1px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* =========================================
   Responsive Logic
========================================= */
@media (max-width: 992px) {
    .dm-casestudies-section {
        padding: 60px 0;
    }

    .dm-casestudies-section .case-header-box {
        flex-direction: column;
        gap: 24px;
    }

    .dm-casestudies-section .c-title {
        font-size: 36px;
    }

    .dm-casestudies-section .case-grid {
        grid-template-columns: 1fr;
    }

    .dm-casestudies-section .dm-case-card {
        height: 450px;
        cursor: auto;
    }

    /* --- کدهای جدید برای نمایش ثابت اطلاعات در موبایل --- */
    .dm-casestudies-section .case-hover-info {
        right: 24px;
        bottom: 24px; /* موقعیت ثابت در پایین */
        opacity: 1; /* نمایش همیشگی */
        visibility: visible;
    }

    .dm-casestudies-section .case-overlay {
        opacity: 0.8; /* نمایش همیشگی لایه تاریک برای خوانایی متن‌های سفید */
    }

    /* خنثی کردن حرکت هاور در صورت تاچ کردن کاربر روی گوشی */
    .dm-casestudies-section .dm-case-card:hover .case-hover-info,
    .dm-casestudies-section .dm-case-card:active .case-hover-info {
        bottom: 24px;
    }
}

/*case studies end*/

/*testimonials start*/

/* =========================================
   Testimonials Section Base
========================================= */
.dm-testimonials-section {
    padding: 120px 0;
    overflow: hidden;
    background-color: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.dm-testimonials-section .dm-testimonials-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: center;
}

/* =========================================
   Header (Right Column)
========================================= */
.dm-testimonials-section .t-stage-col {
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.dm-testimonials-section .t-stage-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.dm-testimonials-section .t-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 2px;
}

.dm-testimonials-section .t-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

/* بخش برجستهٔ عنوان — همان قرارداد بقیهٔ سرتیترهای سایت: فقط رنگ تأکیدی، بدون
   پس‌زمینه و بدون قلم متفاوت، تا در سکشن تیره و روشن یکسان بنشیند. */
.dm-testimonials-section .t-title__hl {
    color: var(--accent-primary);
}

.dm-testimonials-section .t-tagline {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

/* =========================================
   Display Card
========================================= */
.dm-testimonials-section .t-display-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    min-height: 380px;
    /* اصلاح گردی گوشه‌ها: گوشه پایین-چپ تیز، بقیه گرد */
    border-radius: 140px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    /* تنظیم پدینگ: فضای خالی در سمت چپ برای قرارگیری عکس */
    padding: 56px 56px 56px 180px;
    background-color: var(--card-bg, var(--bg-secondary));
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    animation: fadeCard 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: background-color var(--transition-slow);
}

.dm-testimonials-section.theme-dark .t-display-card {
    background-color: var(--bg-secondary) !important; /* یکپارچگی در دارک مود */
}

@keyframes fadeCard {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dm-testimonials-section .t-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 2;
}

.dm-testimonials-section .t-quote-icon {
    font-size: 60px;
    line-height: 0;
    color: var(--accent-secondary);
    opacity: 0.2;
    margin-bottom: 24px;
    display: block;
}

.dm-testimonials-section .t-quote-text {
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 40px;
    text-align: justify;
}

.dm-testimonials-section .t-author-block {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.dm-testimonials-section .t-name {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}

.dm-testimonials-section .t-role {
    font-size: 14px;
    color: var(--accent-primary);
    font-weight: 600;
}

.dm-testimonials-section .t-image-pop {
    position: absolute;
    bottom: -30px;
    left: -40px; /* قرارگیری در سمت چپ کارت */
    right: auto;
    width: 260px;
    height: 250px;
    z-index: 5;
    pointer-events: none;
}

.dm-testimonials-section .t-image-pop img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* جلوگیری از دفرمه شدن عکس */
    object-position: center;
    border-radius: 24px; /* گوشه‌های گرد برای زیبایی بیشتر */
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.15));
}

.dm-testimonials-section.theme-dark .t-image-pop img {
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}

/* =========================================
   Tracks Column (Left Column)
========================================= */
.dm-testimonials-section .t-tracks-col {
    position: relative;
    height: 600px;
    overflow: hidden;
    /* ایجاد افکت محو شدگی در بالا و پایین */
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.dm-testimonials-section .tracks-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: 100%;
}

.dm-testimonials-section .logo-track-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.dm-testimonials-section .logo-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
    width: 100%;
}

.dm-testimonials-section .logo-track-wrapper.up .logo-track {
    animation: scrollUp 40s linear infinite;
}

.dm-testimonials-section .logo-track-wrapper.down .logo-track {
    animation: scrollDown 45s linear infinite;
}

.dm-testimonials-section .logo-track-wrapper:hover .logo-track {
    animation-play-state: paused;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-33.33%);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-33.33%);
    }
    100% {
        transform: translateY(0);
    }
}

.dm-testimonials-section .logo-item {
    background-color: var(--bg-secondary);
    border-radius: 20px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0.4;
    filter: grayscale(100%);
}

.dm-testimonials-section .logo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-fast);
}

.dm-testimonials-section .logo-item:hover,
.dm-testimonials-section .logo-item.is-active {
    opacity: 1;
    filter: grayscale(0%);
    border-color: var(--accent-secondary);
    background-color: var(--bg-primary);
    transform: scale(1.05);
    z-index: 10;
    box-shadow: var(--card-shadow);
}

.dm-testimonials-section.theme-dark .logo-item img {
    filter: grayscale(100%) brightness(200%) contrast(100%);
}

.dm-testimonials-section.theme-dark .logo-item:hover img,
.dm-testimonials-section.theme-dark .logo-item.is-active img {
    filter: grayscale(0%) brightness(100%);
}

/* =========================================
   Floating Thumb & Modal
========================================= */
.dm-testimonials-section .t-floating-thumb {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 190px;
    border-radius: 16px;
    overflow: hidden;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border-color);
}

.dm-testimonials-section .t-floating-thumb.is-visible {
    opacity: 1;
}

.dm-testimonials-section .t-floating-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-testimonials-section .thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.dm-testimonials-section .t-video-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    display: none;
}

.dm-testimonials-section .t-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.9);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.dm-testimonials-section .t-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    animation: modalPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes modalPop {
    to {
        transform: scale(1);
    }
}

.dm-testimonials-section .t-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.dm-testimonials-section .t-close-btn:hover {
    background: var(--accent-primary);
    transform: rotate(90deg);
}

.dm-testimonials-section .t-video-wrapper {
    width: 100%;
    height: 100%;
}

.dm-testimonials-section .t-modal-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   Responsive Logic
========================================= */
@media (max-width: 992px) {
    .dm-testimonials-section {
        padding: 80px 0;
        height: auto;
    }

    .dm-testimonials-section .dm-testimonials-layout {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 0 24px;
    }

    .dm-testimonials-section .t-stage-col {
        order: 1;
    }

    .dm-testimonials-section .t-title {
        font-size: 38px;
    }

    /* اصلاح پدینگ کارت در موبایل */
    .dm-testimonials-section .t-display-card {
        margin: 0 auto;
        padding: 40px 24px; /* حذف پدینگ اضافی پایین */
        border-radius: 40px;
        text-align: center;
    }

    .dm-testimonials-section .t-quote-text {
        text-align: center;
        font-size: 16px;
        margin-bottom: 30px;
    }

    .dm-testimonials-section .t-author-block {
        align-items: center;
        margin-bottom: 0;
    }

    /* --- کدهای جدید برای رفع مشکل بیرون‌زدگی و تداخل عکس --- */
    .dm-testimonials-section .t-image-pop {
        position: relative; /* خارج کردن از حالت شناور مطلق */
        bottom: -40px;
        /*right: auto;*/
        /*transform: none; !* حذف ترنسلیت اضافی *!*/
        /*width: 100%;*/
        /*max-width: 220px;*/
        /*height: 220px;*/
        /*margin: 30px auto 0 auto; !* ایجاد فاصله مناسب از متن بالای خود *!*/
        /*display: block;*/
    }

    .dm-testimonials-section .t-image-pop img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 24px;
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
    }

    .dm-testimonials-section.theme-dark .t-image-pop img {
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
    }

    /* ----------------------------------------------------- */
    .dm-testimonials-section .t-tracks-col {
        order: 2;
        height: 400px;
    }

    .dm-testimonials-section .tracks-container {
        gap: 12px;
    }

    .dm-testimonials-section .logo-item {
        height: 100px;
        padding: 10px;
    }

    .dm-testimonials-section .t-floating-thumb {
        display: none !important;
    }
}

/*testimonials end*/

/*workflow start*/

.dm-workflow-section {
    position: relative;
    height: 400vh;
    background-color: var(--bg-primary);
    z-index: 10;

    /* متغیرهای پیش‌فرض متصل به جاوااسکریپت */
    --split-stage: 0;
    --circle-stage: 0;
    --text-stage: 0;
    --s1: 0;
    --s2: 0;
    --s3: 0;
    --s4: 0;
}

.dm-workflow-section .workflow-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.dm-workflow-section .workflow-full-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dm-workflow-section .workflow-inner {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.dm-workflow-section .dark-clip-layer {
    z-index: 20;
    clip-path: circle(calc(var(--circle-stage, 0) * 150%) at 50% 50%);
    -webkit-clip-path: circle(calc(var(--circle-stage, 0) * 150%) at 50% 50%);
    pointer-events: none;
    transition: clip-path 0.1s ease-out;
    will-change: clip-path;
}

/* =========================================
   Arch Background
========================================= */
.dm-workflow-section .w-arch-bg {
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 47vw;
    height: 25vw;
    border: 1px dashed var(--text-secondary);
    border-bottom: none;
    border-radius: 30vw 30vw 0 0;
    /* متصل به متغیر باز شدن کلمات */
    opacity: calc(var(--split-stage, 0) * 0.2);
    pointer-events: none;
    z-index: 1;
}

/* =========================================
   Center Stage (Words & Logo)
========================================= */
.dm-workflow-section .w-center-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

.dm-workflow-section .w-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(48px, 6vw, 80px);
    color: var(--text-primary);
    margin: 0;
    gap: 16px;
}

.dm-workflow-section .w-word {
    display: inline-block;
    will-change: transform;
    transform: translateZ(0);
}

/* باز شدن کلمات به طرفین با اسکرول */
.dm-workflow-section .w-word.right-word {
    transform: translateX(calc(var(--split-stage, 0) * 140px));
}

.dm-workflow-section .w-word.left-word {
    transform: translateX(calc(var(--split-stage, 0) * -140px));
}

/* چرخش و نمایان شدن لوگو از وسط */
.dm-workflow-section .w-logo-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    opacity: var(--split-stage, 0);
    transform: scale(var(--split-stage, 0)) rotate(calc(var(--split-stage, 0) * 360deg));
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform, opacity;
}

.dm-workflow-section .w-logo-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.dm-workflow-section .w-mobile-subtitle {
    display: none;
}

/* =========================================
   Center Stage Texts (Top & Bottom)
========================================= */
.dm-workflow-section .w-top-subtitle {
    display: block;
    font-size: 14px;
    color: var(--accent-primary);
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 24px;
    opacity: var(--text-stage, 0);
    transform: translateY(calc((1 - var(--text-stage, 0)) * 20px));
    will-change: opacity, transform;
}

.dm-workflow-section .w-bottom-tagline {
    display: block;
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: 24px;
    opacity: var(--text-stage, 0);
    transform: translateY(calc((1 - var(--text-stage, 0)) * -20px));
    will-change: opacity, transform;
}

/* =========================================
   Scattered Steps (Zig-Zag)
========================================= */
.dm-workflow-section .w-steps-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.dm-workflow-section .w-step-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 280px;
    will-change: opacity, transform;
}

/* موقعیت‌های پراکنده در دسکتاپ و اتصال به متغیرها برای انیمیشن Slide-up */
.dm-workflow-section .step-1 {
    top: 20%;
    right: 12%;
    opacity: var(--s1, 0);
    transform: translateY(calc((1 - var(--s1, 0)) * 40px));
}

.dm-workflow-section .step-2 {
    top: 40%;
    left: 10%;
    opacity: var(--s2, 0);
    transform: translateY(calc((1 - var(--s2, 0)) * 40px));
}

.dm-workflow-section .step-3 {
    bottom: 25%;
    right: 22%;
    opacity: var(--s3, 0);
    transform: translateY(calc((1 - var(--s3, 0)) * 40px));
}

.dm-workflow-section .step-4 {
    bottom: 15%;
    left: 22%;
    opacity: var(--s4, 0);
    transform: translateY(calc((1 - var(--s4, 0)) * 40px));
}

.dm-workflow-section .step-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-workflow-section .step-num {
    font-size: 32px;
    font-family: 'gofteh', sans-serif;
    color: var(--accent-secondary);
    line-height: 1;
}

.dm-workflow-section .step-title {
    font-size: 24px;
    color: var(--text-primary);
    margin: 0;
}

.dm-workflow-section .step-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.dm-workflow-section .w-word,
.dm-workflow-section .w-logo-wrap,
.dm-workflow-section .w-step-box,
.dm-workflow-section .w-arch-bg,
.dm-workflow-section .w-top-subtitle,
.dm-workflow-section .w-bottom-tagline {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* =========================================
   Responsive Logic (Mobile Stack)
========================================= */
@media (max-width: 992px) {
    .dm-workflow-section {
        height: auto;
    }

    .dm-workflow-section .workflow-sticky-wrapper {
        position: relative;
        height: auto;
        display: block;
    }

    .dm-workflow-section .workflow-full-layer {
        position: relative;
        height: auto;
    }

    .dm-workflow-section .workflow-inner {
        position: relative;
        transform: none;
        left: auto;
        padding: 0 24px;
    }

    .dm-workflow-section .workflow-full-layer.theme-light {
        display: none !important;
    }

    /* نمایش کامل لایه دارک بدون ماسک برشی در موبایل */
    .dm-workflow-section .dark-clip-layer {
        display: block !important;
        position: relative !important;
        clip-path: none !important;
        padding: 60px 0;
        -webkit-clip-path: none !important;
    }

    .dm-workflow-section .w-arch-bg {
        display: none;
    }

    .dm-workflow-section .w-center-stage {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .dm-workflow-section .w-heading {
        gap: 30px;
    }

    .dm-workflow-section .w-mobile-subtitle {
        display: block;
        font-size: 14px;
        color: var(--accent-primary);
        font-weight: bold;
    }

    .dm-workflow-section .w-logo-wrap {
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
        width: 50px;
        height: 50px;
    }

    .dm-workflow-section .w-steps-container {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .dm-workflow-section .w-step-box {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        max-width: 100%;
        background-color: var(--bg-secondary);
        padding: 24px;
        border: 1px solid var(--border-color);
        border-radius: 20px;
    }

    .dm-workflow-section .w-word,
    .dm-workflow-section .w-logo-wrap,
    .dm-workflow-section .w-step-box,
    .dm-workflow-section .w-top-subtitle,
    .dm-workflow-section .w-bottom-tagline {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/*workflow end*/

/*blog start*/

.dm-blog-section {
    position: relative;
    height: 250vh; /* ارتفاع متناسب برای 3 فاز انیمیشن جاوااسکریپت */
    background-color: var(--bg-primary);
    z-index: 10;
    
    display: none;
}

.dm-blog-section .blog-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dm-blog-section .blog-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch; /* کانتینر کارت‌ها تمام ارتفاع را می‌گیرد */
    justify-content: space-between;
    gap: 60px;
    padding: 180px 0 80px; /* فضای امن بالا و پایین در دسکتاپ */
}

/* =========================================
   Header (Right Column)
========================================= */
.dm-blog-section .blog-header-box {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* هدر در وسط عمودی ثابت می‌ماند */
    align-items: flex-start; /* تراز از راست برای RTL */
    text-align: right;
    gap: 16px;
}

.dm-blog-section .b-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.dm-blog-section .b-title {
    font-size: 56px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}

/* =========================================
   Cards Container (Left Column)
========================================= */
.dm-blog-section .b-cards-container {
    position: relative;
    width: 65%;
    max-width: 800px;
    height: 100%; /* گرفتن تمام ارتفاع ستون برای انیمیشن بالا و پایین */
}

.dm-blog-section .b-card {
    position: absolute;
    top: 0; /* تمام کارت‌ها از بالای کانتینر شروع می‌کنند */
    left: 0;
    width: 100%;
    height: 240px; /* ارتفاع ثابت برای اتصال دقیق و مماس کارت‌ها */
    background-color: var(--bg-secondary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    display: flex;
    overflow: hidden;
    box-shadow: none !important;
    will-change: transform;
    transition: transform 0.1s ease-out; /* نرمی نامحسوس برای جلوگیری از لگ اسکرول */
}

.dm-blog-section .b-card-3 {
    z-index: 1;
}

.dm-blog-section .b-card-2 {
    z-index: 2;
}

.dm-blog-section .b-card-1 {
    z-index: 3;
}

/* =========================================
   Card Internals
========================================= */
.dm-blog-section .b-img-wrap {
    width: 45%;
    height: 100%;
    position: relative;
    border-left: 1px solid var(--border-color); /* خط جداکننده عکس از متن */
}

.dm-blog-section .b-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-blog-section .b-content {
    width: 55%;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.dm-blog-section .b-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dm-blog-section .b-num {
    font-family: 'gofteh', sans-serif;
    font-size: 20px;
    color: var(--accent-secondary);
}

.dm-blog-section .b-cat {
    font-size: 13px;
    background: rgba(184, 115, 51, 0.1);
    color: var(--accent-primary);
    padding: 4px 12px;
    border-radius: var(--pill-radius);
    font-weight: bold;
}

/* بهینه‌سازی رنگ بج در دارک مود برای خوانایی بهتر */
.dm-blog-section.theme-dark .b-cat {
    background: rgba(239, 62, 99, 0.15);
}

.dm-blog-section .b-card-title {
    font-size: 24px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-blog-section .b-card-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* محدود کردن متن به 2 خط */
    -webkit-box-orient: vertical;
    overflow: hidden;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-blog-section .b-link {
    margin-top: auto;
    color: var(--accent-primary);
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.dm-blog-section .b-link i {
    font-size: 14px;
    transition: transform var(--transition-fast);
}

.dm-blog-section .b-link:hover {
    transform: translateX(-4px);
    color: var(--accent-secondary);
}

.dm-blog-section .b-link:hover i {
    transform: translateX(-4px);
}

/* =========================================
   Responsive Logic (Mobile Un-stack)
========================================= */
@media (max-width: 992px) {
    /* ریست کردن ارتفاع و پدینگ برای تبدیل به حالت استاتیک */
    .dm-blog-section {
        height: auto;
        padding: 80px 0;
    }

    .dm-blog-section .blog-sticky-wrapper {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .dm-blog-section .blog-inner {
        flex-direction: column;
        align-items: center;
        padding: 0 24px;
        gap: 40px;
    }

    .dm-blog-section .blog-header-box {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .dm-blog-section .b-cards-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* شکستن ساختار کارت‌ها و قرارگیری عکس در بالای متن */
    .dm-blog-section .b-card {
        position: relative;
        flex-direction: column;
        height: auto;
        transform: none !important; /* غیرفعال کردن انیمیشن جاوااسکریپت */
        transition: none !important;
    }

    .dm-blog-section .b-img-wrap {
        width: 100%;
        height: 220px;
        border-left: none;
        border-bottom: 1px solid var(--border-color);
    }

    .dm-blog-section .b-content {
        width: 100%;
        padding: 24px;
    }
}

/*blog end*/

/*contact start*/

/* =========================================
   Contact Section Base (100vh Layout)
========================================= */
.dm-contact-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-primary);
    overflow: hidden;
    padding: 0 0 60px;
    margin-top: -100px;
}

/* Marquee Background */
.c-marquee-wrapper {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    transform: translateY(-50%) rotate(-2deg);
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
}

.c-marquee-wrapper {
    opacity: 0.05;
}

.c-marquee-track {
    display: flex;
    width: max-content;
    animation: scrollMarquee 40s linear infinite;
}

.c-marquee-track span {
    font-size: 140px;
    font-family: 'gofteh', sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px var(--text-secondary);
    white-space: nowrap;
    padding: 0 40px;
    text-transform: uppercase;
}

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%);
    }
    /* چون سایت راست‌چین است و متن عربی/فارسی است مسیر حرکت هماهنگ شده */
}

/* Layout Grid */
.c-inner-layout {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

/* Minimal Header (Right Side) */
.c-header-minimal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
}

.c-header-minimal .c-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.c-header-minimal .c-title {
    font-size: 42px;
    line-height: 1.2;
    color: var(--text-primary);
    text-align: right;
    margin: 0;
}

.c-header-minimal .c-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.c-cta-links {
    margin-top: 10px;
}

.c-call-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary) !important;
    text-decoration: none;
    font-family: 'dana', sans-serif;
}

.c-call-link i {
    color: var(--accent-secondary);
}

/* 3D Form Stage (Left Side) */
.c-form-stage {
    perspective: 1200px;
    display: flex;
    justify-content: flex-end;
}

.c-form-3d-wrapper {
    width: 100%;
    max-width: 550px;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Pop-in Initial State */
    opacity: 0;
    transform: translateY(60px) scale(0.9) rotateX(10deg);
}

/* Added by JS on scroll */
.c-form-3d-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}

.c-glass-form {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(10, 25, 47, 0.1);

    /* Smooth transition for when mouse leaves or enters (freeze effect) */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme="dark"] .c-glass-form {
    background: rgba(10, 25, 47, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

/* Form Elements */
.dm-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dm-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dm-form .form-group input,
.dm-form .form-group select,
.dm-form .form-group textarea {
    width: 100%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 16px 20px;
    border-radius: 16px;
    font-size: 14px;
    font-family: inherit;
    transition: all var(--transition-fast);
    outline: none;
}

.dm-form .form-group input:focus,
.dm-form .form-group select:focus,
.dm-form .form-group textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.1);
}

/* dm-forms shortcode ([dm_form id="2"]) skin — matches the original glass form + global shine button.
   !important required: plugin's own dmf-form.css ties on specificity with these selectors,
   and its enqueue order isn't guaranteed to lose. */
.c-glass-form .dmf-form {
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.c-glass-form .dmf-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.c-glass-form .dmf-field-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.c-glass-form .dmf-col-full {
    grid-column: 1 / -1 !important;
}

/* original dm-form had no visible labels (placeholder-only inputs) — keep label for a11y, hide it visually */
.c-glass-form .dmf-field-wrap label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.c-glass-form .dmf-req {
    color: var(--accent-primary) !important;
}

.c-glass-form .dmf-field-wrap input,
.c-glass-form .dmf-field-wrap select,
.c-glass-form .dmf-field-wrap textarea {
    width: 100% !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: all var(--transition-fast) !important;
    outline: none !important;
}

.c-glass-form .dmf-field-wrap textarea {
    resize: vertical !important;
    min-height: 60px !important;
}

.c-glass-form .dmf-field-wrap select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.c-glass-form .dmf-field-wrap input:focus,
.c-glass-form .dmf-field-wrap select:focus,
.c-glass-form .dmf-field-wrap textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.1) !important;
}

.c-glass-form .dmf-choices {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
}

.c-glass-form .dmf-choice {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

.c-glass-form .dmf-choice input {
    accent-color: var(--accent-primary) !important;
}

.c-glass-form .dmf-form-msg {
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
}

.c-glass-form .dmf-form-msg.dmf-ok {
    background: rgba(46, 160, 67, 0.12) !important;
    border: 1px solid rgba(46, 160, 67, 0.4) !important;
    color: var(--text-primary) !important;
}

.c-glass-form .dmf-form-msg.dmf-err {
    background: rgba(214, 54, 56, 0.1) !important;
    border: 1px solid rgba(214, 54, 56, 0.4) !important;
    color: #d63638 !important;
}

.c-glass-form .dmf-hp {
    display: none !important;
}

/* Submit button — reproduces the global .dm-btn-wrapper .btn-shine CTA (base.css) on the plugin's plain <button> */
.c-glass-form .dmf-actions {
    margin-top: 4px !important;
}

.c-glass-form .dmf-submit {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    outline: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    background-color: transparent !important;
    border: 1px solid var(--accent-primary) !important;
    border-radius: var(--pill-radius) !important;
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-weight: bold !important;
    font-family: inherit !important;
    letter-spacing: 0.5px !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1) !important;
}

.c-glass-form .dmf-submit:after {
    background: var(--accent-secondary) !important;
    content: "" !important;
    height: 155px !important;
    right: -75px !important;
    opacity: 0.3 !important;
    position: absolute !important;
    top: -50px !important;
    transform: rotate(35deg) !important;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1) !important;
    width: 50px !important;
    z-index: 0 !important;
}

.c-glass-form .dmf-submit:hover:not(:disabled) {
    animation: rotate624 0.7s ease-in-out both;
    border-color: var(--accent-secondary) !important;
    color: var(--accent-secondary) !important;
}

.c-glass-form .dmf-submit:hover:not(:disabled):after {
    right: 120% !important;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.c-glass-form .dmf-submit:disabled,
.c-glass-form .dmf-submit.dmf-loading {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Responsive */
@media (max-width: 992px) {
    .dm-contact-section {
        height: auto;
        padding: 60px 0;
    }

    .c-inner-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .c-marquee-track span {
        font-size: 80px;
    }

    .c-header-minimal {
        text-align: center;
        max-width: 100%;
        align-items: center;
    }

    .c-header-minimal .c-title {
        text-align: center;
        font-size: 32px;
    }

    .c-form-stage {
        justify-content: center;
    }

    .dm-form .form-row {
        grid-template-columns: 1fr;
    }

    .c-glass-form .dmf-grid {
        grid-template-columns: 1fr !important;
    }

    .c-glass-form {
        padding: 30px 20px;
    }
}

/*contact end*/

/* =========================================
   اصلاح فاصله‌های عمودی برای ارتفاع کم (لپ‌تاپ و زوم ۱۲۵ تا ۱۵۰ درصد)
   ⚠ این بلوک عمداً انتهای فایل است: قاعده‌های بالا در این شیوه‌نامه چند بار تکرار شده‌اند
   و ویرایش هرکدام قابل اتکا نیست؛ آخرین تعریف برنده است.
========================================= */

/* هیرو: محتوا نباید به موج جداکنندهٔ پایین بچسبد یا زیرش برود. */
.dm-hero-section {
    padding-block: clamp(80px, 10vh, 140px) clamp(120px, 15vh, 200px);
}

/* خدمات: ناحیهٔ سنجاق ارتفاع ثابتِ پنجره دارد؛ بدون این فاصله، کارت‌ها در ارتفاع کم
   به لبهٔ بالا می‌چسبند. */
.dm-services-section .services-sticky-wrapper {
    padding-block: clamp(24px, 6vh, 80px);
}

/* تصویر کارت خدمات با ارتفاع پنجره کوچک می‌شود تا کارت از قاب بیرون نزند. */
.dm-services-section .s-img-wrapper {
    height: clamp(180px, 34vh, 300px);
}

@media (max-width: 992px) {
    .dm-hero-section {
        padding-block: 60px 90px;
    }

    .dm-services-section .services-sticky-wrapper {
        padding-block: 0;
    }

    .dm-services-section .s-img-wrapper {
        height: 220px;
    }
}