/* KARNAWEB — self-contained demo. All classes are prefixed kw- to prevent .NET site CSS collisions. */
:root {
    --kw-ink: #14213D;
    --kw-muted: #667085;
    --kw-light: #f9fbff;
    --kw-cream: #FFF7F2;
    --kw-border: #e5eaf3;
    --kw-red: #ff2850;
    --kw-orange: #ff6c30;
    --kw-accent: #FF4B3E;
    --kw-grad: linear-gradient(112deg,#ff8a4d 0%,var(--kw-accent) 55%,#ff2d3f 100%);
    --kw-font: Vazirmatn,IRANSans,IRANYekan,"Segoe UI",Tahoma,Arial,sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #fff;
    color: var(--kw-ink);
    font-family: var(--kw-font);
    -webkit-font-smoothing: antialiased;
}

button, input {
    font: inherit;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.kw-icon-library, .kw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.kw-shell {
    max-width: 1632px;
    width: calc(100% - 72px);
    margin-inline: auto;
}

.kw-header {
    background: #fff;
    position: relative;
    z-index: 20;
}

.kw-topbar {
    min-height: 174px;
    display: grid;
    grid-template-columns: minmax(192px,1fr) minmax(330px,1.24fr) minmax(192px,1fr);
    align-items: center;
    column-gap: 25px;
}

.kw-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    width: 211px;
    min-width: 150px;
    transition: transform .3s ease;
}

    .kw-brand:hover {
        transform: translateY(-2px);
    }

    .kw-brand img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.kw-search {
    grid-column: 2;
    grid-row: 1;
    height: 58px;
    border: 1px solid #dfe5ed;
    box-shadow: 0 10px 36px rgba(27,47,83,.027);
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding-inline: 22px 16px;
    gap: 8px;
    transition: border-color .2s,box-shadow .2s;
    background: #fff;
}

    .kw-search:focus-within {
        border-color: #ffc0aa;
        box-shadow: 0 0 0 4px #ff894019;
    }

    .kw-search input {
        min-width: 0;
        flex: 1;
        outline: 0;
        border: 0;
        background: none;
        text-align: start;
        color: var(--kw-ink);
        font-size: 13px;
    }

        .kw-search input::placeholder {
            color: #9aa5b5;
            opacity: 1;
        }

        .kw-search input::-webkit-search-cancel-button {
            cursor: pointer;
        }

    .kw-search button {
        width: 29px;
        height: 29px;
        border: 0;
        background: transparent;
        color: var(--kw-ink);
        display: grid;
        place-items: center;
        padding: 0;
        order: 1;
    }

        .kw-search button:hover {
            color: var(--kw-orange);
        }

.kw-user-zone {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

.kw-utility {
    border: 1px solid #e5e9f2;
    background: #fff;
    box-shadow: 0 10px 27px #152c5310;
    color: var(--kw-ink);
    border-radius: 17px;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    padding: 10px 13px;
    font-size: 12px;
    transition: box-shadow .2s,border .2s;
}

    .kw-utility:hover, .kw-utility[aria-expanded="true"] {
        border-color: #fec5b4;
        box-shadow: 0 10px 28px #fa8b6b20;
    }

    .kw-utility > svg:first-child {
        width: 21px;
        height: 21px;
    }

.kw-tiny {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}

.kw-account-panel, .kw-lang-panel {
    position: absolute;
    top: calc(100% + 7px);
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    box-shadow: 0 20px 50px #1421391b;
    z-index: 30;
    min-width: 132px;
    padding: 8px;
}

.kw-language {
    position: relative;
}

.kw-lang-panel {
    inset-inline-start: 0;
}

    .kw-lang-panel button, .kw-account-panel a {
        display: block;
        text-align: start;
        background: transparent;
        width: 100%;
        font-size: 13px;
        border: 0;
        padding: 10px 12px;
        border-radius: 8px;
    }

        .kw-lang-panel button:hover, .kw-account-panel a:hover {
            background: #fff0e8;
        }

.kw-account-panel {
    inset-inline-end: 0;
    top: calc(100% + 8px);
}

.kw-nav-border {
    border-bottom: 1px solid #e8ecf3;
    box-shadow: 0 4px 26px #07163804;
}

.kw-nav-row {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.kw-navigation {
    display: flex;
    align-items: center;
    gap: 34px;
    height: 100%;
}

.kw-nav-dropdown {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.kw-nav-main {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: 650;
    color: var(--kw-ink);
    white-space: nowrap;
    font-size: 13px;
}

    .kw-nav-main svg {
        width: 20px;
        height: 20px;
    }

.kw-nav-link {
    position: relative;
    font-size: 13px;
    font-weight: 570;
    color: #2e3f57;
    transition: color .2s;
}

    .kw-nav-link:not(:last-child)::after {
        content: "";
        position: absolute;
        inset-inline-end: -17px;
        top: 3px;
        height: 13px;
        width: 1px;
        background: #e5e9f0;
    }

    .kw-nav-link:hover, .kw-nav-main:hover {
        color: #ff583c;
    }

.kw-nav-mobile {
    display: none;
}

.kw-services-panel {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-start: -6px;
    width: 277px;
    max-width: calc(100vw - 32px);
    border: 1px solid #e9eef4;
    border-radius: 13px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 19px 55px #11244123;
    z-index: 35;
    padding: 7px 9px;
    backdrop-filter: blur(15px);
}

    .kw-services-panel::before {
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        inset-inline-start: 21px;
        top: -8px;
        background: #fff;
        transform: rotate(45deg);
        border-top: 1px solid #e9eef4;
        border-left: 1px solid #e9eef4;
    }

    .kw-services-panel a {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 0 9px;
        border-bottom: 1px solid #eff2f5;
        color: #35445e;
        font-size: 12.5px;
        transition: color .2s,background .2s;
    }

        .kw-services-panel a:last-child {
            border-bottom: 0;
        }

    .kw-services-panel svg {
        width: 17px;
        height: 17px;
        stroke: #ff542e;
        stroke-width: 1.9;
    }

    .kw-services-panel a:hover {
        background: #fff1eb;
        color: #f45332;
        border-radius: 8px;
    }

[hidden] {
    display: none !important;
}

/* HERO */
.kw-hero {
    /* پالت اختصاصی هیرو (آبی سرمه‌ای + نارنجی) - فقط داخل .kw-hero اعمال می‌شود و بقیه‌ی سایت را تغییر نمی‌دهد */
    --kw-blue: #1f4fa3;
    --kw-blue-mid: #2f6fd6;
    --kw-blue-soft: #e8f0fb;
    --kw-amber: #f7941d;
    --kw-amber-soft: #fff3e3;
    --kw-grad: linear-gradient(112deg,#1f4fa3 0%,#2f6fd6 100%);
    --kw-grad-warm: linear-gradient(112deg,#ffa93a 0%,#f7941d 100%);
    isolation: isolate;
    position: relative;
    overflow: hidden;
    min-height: 625px;
    background: radial-gradient(circle at 85% 20%,#eaf2fc 0%,#f4f8fd 28%,transparent 55%),linear-gradient(170deg,#fff 0%,#fff 60%,#f3f7fd 100%);
}

    .kw-hero::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: -156px;
        height: 300px;
        background: radial-gradient(ellipse at 50% 5%,#dfeafa 0%,#f3f7fd 45%,transparent 65%);
        opacity: .7;
        border-radius: 48%;
        z-index: -2;
    }

.kw-hero-sheen {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: 0;
    background: radial-gradient(ellipse 47% 35% at 22% 83%,#d5e4f830,transparent 78%);
}

.kw-world {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    top: 10px;
    inset-inline-start: 28%;
    height: 250px;
    width: min(600px,45%);
    opacity: .57;
    background: url("assets/world.svg") center/contain no-repeat;
}

.kw-hero-inner {
    display: grid;
    grid-template-columns: minmax(0,.92fr) minmax(0,1.13fr);
    min-height: 608px;
    gap: 9px;
    align-items: center;
    position: relative;
}

.kw-hero-copy {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 3;
    max-width: 612px;
    justify-self: stretch;
    padding: 30px 0 38px;
}

.kw-eyebrow {
    color: var(--kw-amber);
    font-size: 13px;
    font-weight: 720;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 20px;
}

    .kw-eyebrow i {
        display: block;
        width: 34px;
        height: 3px;
        background: var(--kw-grad);
        border-radius: 5px;
    }

.kw-hero h1 {
    font-size: clamp(31px,3.35vw,54px);
    line-height: 1.58;
    letter-spacing: -.055em;
    margin: 0;
    color: var(--kw-ink);
    font-weight: 850;
}

    .kw-hero h1 span, .kw-hero h1 strong {
        display: block;
        white-space: nowrap;
        font-size: 1.6rem;
    }

    .kw-hero h1 strong {
        font-weight: 850;
        background: var(--kw-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.kw-description {
    font-size: 14.5px;
    line-height: 2.25;
    color: #53637a;
    max-width: 555px;
    margin: 13px 0 26px;
    font-weight: 440;
}

.kw-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.kw-btn {
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 0 26px;
    border-radius: 36px;
    font-weight: 760;
    font-size: 14px;
    transition: transform .2s,box-shadow .2s;
    white-space: nowrap;
}

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

.kw-btn-primary {
    color: #fff;
    min-width: 197px;
    background: var(--kw-grad-warm);
    box-shadow: 0 11px 32px #f7941d40;
}

    .kw-btn-primary svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.4;
    }

    .kw-btn-primary:hover {
        box-shadow: 0 16px 35px #f7941d50;
    }

.kw-btn-ghost {
    background: #fff;
    box-shadow: 0 8px 21px #172d4910;
    border: 1px solid #e6eaf0;
    gap: 13px;
    min-width: 161px;
}

    .kw-btn-ghost:hover {
        box-shadow: 0 15px 29px #172d491b;
    }

.kw-btn-round {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    background: var(--kw-blue-soft);
    color: var(--kw-blue);
    border-radius: 50%;
    font-size: 11px;
    padding-inline-start: 2px;
}

.kw-capabilities {
    margin-block-start: 47px;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 625px;
}

.kw-capability {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    line-height: 1.8;
    color: #283a53;
    font-weight: 650;
    flex: 1;
    padding-inline: 17px 0;
}

    .kw-capability:first-child {
        padding-inline-start: 0;
    }

    .kw-capability:not(:last-child) {
        border-inline-end: 1px solid #e2e6ed;
    }

.kw-bubble {
    width: 46px;
    height: 46px;
    flex: none;
    background: var(--kw-blue-soft);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--kw-blue);
}

    .kw-bubble svg {
        width: 23px;
        height: 23px;
    }

/* True layered, pointer-responsive CSS 3D scene: every piece is live DOM, not a flat screenshot. */
.kw-art {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 606px;
    position: relative;
    touch-action: pan-y;
    outline-offset: -8px;
    --rx: 0deg;
    --ry: 0deg;
    --px: 0px;
    --py: 0px;
}

.kw-art-glow {
    position: absolute;
    pointer-events: none;
    inset: 11% -7% 0 -8%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 53% 51%,#bcd3f366 2%,#eaf2fc 50%,transparent 71%);
    filter: blur(1px);
}

.kw-stage-wrap {
    width: 100%;
    height: 100%;
    perspective: 1450px;
    perspective-origin: 48% 45%;
    position: relative;
}

.kw-stage {
    width: 760px;
    height: 595px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(var(--scene-scale,1)) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .16s ease-out;
}

.kw-layer {
    position: absolute;
    transform-style: preserve-3d;
    --tx: 0px;
    --ty: 0px;
    transform: translate3d(calc(var(--tx) + var(--px) * var(--depth, 0))),calc(var(--ty) + var(--py) * var(--depth, 0))),var(--z,0px));
    will-change: transform;
    transition: transform .18s ease-out;
}

.kw-back-ribbon {
    --depth: .22;
    --z: -140px;
    top: 83px;
    left: 24px;
    width: 690px;
    height: 467px;
    border-radius: 45% 56% 35% 48%;
    background: radial-gradient(ellipse at 45% 30%,#f6faff 6%,#cfe0f759 35%,#e7ebf340 62%,transparent 80%);
    box-shadow: inset -40px -30px 60px #f6faffc4;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),-140px) rotate(-13deg);
}

    .kw-back-ribbon::before {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px solid #c6ccd980;
        transform: rotate(11deg) scale(1.015);
    }

    .kw-back-ribbon::after {
        content: "";
        position: absolute;
        inset: 27px;
        border-radius: 50%;
        border: 1px solid #ffffffaa;
        transform: rotate(-17deg) scale(1.11);
    }

.kw-orbit {
    --depth: .33;
    --z: -30px;
    width: 704px;
    height: 480px;
    top: 43px;
    left: 11px;
    border: 1.25px solid #cfd6e2;
    border-radius: 50%;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),-30px) rotate(-17deg);
    pointer-events: none;
}

    .kw-orbit::after {
        content: "";
        width: 95%;
        height: 100%;
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px solid #fff9f0cf;
        transform: rotate(33deg) scale(1.01);
    }

.kw-orbit-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--kw-amber);
    box-shadow: 0 0 0 1px #f7941d,0 0 18px #ffbd6b;
}

    .kw-orbit-dot.dot1 {
        top: 87px;
        left: -4px;
    }

    .kw-orbit-dot.dot2 {
        right: 18px;
        top: 132px;
    }

    .kw-orbit-dot.dot3 {
        right: 96px;
        bottom: 28px;
    }

.kw-grid-dots {
    --depth: .12;
    --z: -60px;
    left: -32px;
    top: 258px;
    width: 135px;
    height: 229px;
    background-image: radial-gradient(#c8cedb6b 1.65px,transparent 1.85px);
    background-size: 17px 17px;
    mask-image: linear-gradient(to right,#000,transparent);
}

.kw-laptop {
    --depth: .62;
    --z: 65px;
    left: 103px;
    top: 123px;
    width: 552px;
    height: 395px;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),65px) rotateZ(-5deg) rotateY(-14deg) rotateX(3deg);
    filter: drop-shadow(20px 28px 22px #14213d26);
}

.kw-laptop-lid {
    height: 350px;
    width: 100%;
    padding: 9px;
    background: linear-gradient(160deg,#20242d,#0f131b);
    border: 3px solid #c9ced6;
    border-bottom: 7px solid #b3b9c3;
    border-radius: 20px 20px 9px 9px;
    box-shadow: inset 0 2px 3px #fff6,9px 17px 18px #29354a2b;
}

.kw-laptop-screen {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #fff;
}

/* داشبورد داخل صفحه‌ی لپ‌تاپ (کاملاً با DOM/CSS؛ جهت چپ‌به‌راست تا مثل تصویر مرجع چیده شود) */
.kw-dash {
    direction: ltr;
    height: 100%;
    padding: 12px;
    display: grid;
    grid-template-rows: 12px 1.4fr 1fr 1fr;
    gap: 8px;
    background: #f4f7fc;
}

.kw-dash-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .kw-dash-bar span {
        height: 6px;
        width: 34%;
        border-radius: 4px;
        background: #e1e7f0;
    }

        .kw-dash-bar span:last-child {
            width: 11%;
        }

.kw-dash-row {
    display: grid;
    gap: 8px;
    min-height: 0;
}

.kw-dash-charts {
    grid-template-columns: 1.15fr 1fr;
}

.kw-dash-mid {
    grid-template-columns: .85fr 1.4fr;
}

.kw-dash-photos {
    grid-template-columns: 1fr 1.3fr .55fr;
}

.kw-dash-card {
    min-width: 0;
    min-height: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #1f4fa314;
    padding: 8px;
    overflow: hidden;
}

    .kw-dash-card > svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.kw-dash-line {
    fill: none;
    stroke: var(--kw-blue-mid);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.kw-dash-area {
    stroke: none;
    fill: #2f6fd61f;
}

.kw-dash-dot {
    fill: var(--kw-blue-mid);
}

.kw-dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

    .kw-dash-bars b {
        flex: 1;
        height: var(--h);
        border-radius: 2px 2px 0 0;
        background: linear-gradient(var(--kw-amber) 0 var(--top,22%),var(--kw-blue) var(--top,22%));
    }

.kw-dash-donut {
    display: flex;
    align-items: center;
    gap: 9px;
}

.kw-donut {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: conic-gradient(var(--kw-amber) 0 28%,var(--kw-blue) 28% 100%);
    -webkit-mask: radial-gradient(circle,transparent 58%,#000 60%);
    mask: radial-gradient(circle,transparent 58%,#000 60%);
}

.kw-dash-lines {
    flex: 1;
    display: grid;
    gap: 6px;
}

    .kw-dash-lines i {
        display: block;
        height: 5px;
        border-radius: 4px;
        background: #e1e7f0;
    }

        .kw-dash-lines i:first-child {
            width: 80%;
            background: #cfd8e6;
        }

        .kw-dash-lines i:last-child {
            width: 55%;
        }

.kw-dash-progress {
    display: grid;
    align-content: center;
    gap: 7px;
}

    .kw-dash-progress i {
        display: block;
        height: 5px;
        border-radius: 4px;
        background: #e8edf5;
        position: relative;
        overflow: hidden;
    }

        .kw-dash-progress i::after {
            content: "";
            position: absolute;
            inset: 0 auto 0 0;
            width: var(--w);
            border-radius: 4px;
            background: var(--kw-blue);
        }

        .kw-dash-progress i:nth-child(2)::after {
            background: var(--kw-amber);
        }

.kw-dash-photos > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.kw-dash-text {
    display: grid;
    align-content: center;
    gap: 6px;
}

    .kw-dash-text i {
        display: block;
        height: 5px;
        border-radius: 4px;
        background: #e1e7f0;
    }

        .kw-dash-text i:first-child {
            width: 85%;
            background: #cfd8e6;
        }

        .kw-dash-text i:nth-child(2) {
            width: 100%;
        }

        .kw-dash-text i:last-child {
            width: 28%;
            height: 6px;
            background: var(--kw-amber);
        }

.kw-laptop-base {
    position: absolute;
    top: 342px;
    left: -40px;
    width: 645px;
    height: 26px;
    background: linear-gradient(0deg,#cfd4dc 0%,#e9ecf1 40%,#f8f9fb 78%);
    clip-path: polygon(7% 0,91% 0,100% 63%,96% 100%,4% 100%,0 61%);
    box-shadow: 0 10px 8px #2b3e5b4d;
}

    .kw-laptop-base::after {
        content: "";
        position: absolute;
        top: 0;
        left: 41%;
        width: 18%;
        height: 7px;
        background: #aab1bd;
        border-radius: 0 0 10px 10px;
    }

.kw-float {
    background: #ffffffed;
    border: 1px solid #ffffffd8;
    box-shadow: 0 17px 40px #1f4fa326,0 2px 12px #1f4fa314;
    backdrop-filter: blur(10px);
    border-radius: 16px;
}

.kw-code-card {
    --depth: 1.07;
    --z: 175px;
    top: 170px;
    left: 51px;
    width: 147px;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),175px) rotateZ(7deg) rotateY(-8deg);
}

    .kw-code-card svg {
        width: 47px;
        height: 47px;
        stroke: var(--kw-blue);
        stroke-width: 2.5;
    }

    .kw-code-card > div {
        display: grid;
        gap: 7px;
    }

    .kw-code-card i {
        display: block;
        background: #e3e7ef;
        border-radius: 5px;
        width: 42px;
        height: 6px;
    }

        .kw-code-card i:nth-child(2) {
            width: 30px
        }

        .kw-code-card i:last-child {
            width: 34px
        }

.kw-ghost-card {
    --depth: .87;
    --z: 130px;
    top: 319px;
    left: 17px;
    width: 107px;
    height: 153px;
    padding: 20px 15px;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),130px) rotateZ(-4deg);
}

    .kw-ghost-card i {
        display: block;
        border-radius: 5px;
        background: #e9e9f0;
        width: 67px;
        height: 9px;
        margin-bottom: 15px;
    }

        .kw-ghost-card i:last-child {
            width: 45px;
            height: 76px;
            background: #f1f3f7;
        }

.kw-stat-card {
    --depth: 1.02;
    --z: 170px;
    top: 185px;
    left: 563px;
    min-width: 192px;
    height: 99px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),170px) rotateZ(4deg);
}

    .kw-stat-card > span:nth-child(2) {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 13px;
        white-space: nowrap;
    }

    .kw-stat-card small {
        font-size: 9px;
        color: #7b899c;
    }

    .kw-stat-card b {
        font-weight: 800;
    }

.kw-graph {
    height: 40px;
    display: flex;
    gap: 4px;
    align-items: end;
}

    .kw-graph b {
        display: block;
        width: 9px;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(var(--kw-amber),var(--kw-blue));
    }

        .kw-graph b:first-child {
            height: 43%
        }

        .kw-graph b:nth-child(2) {
            height: 68%
        }

        .kw-graph b:last-child {
            height: 100%
        }

.kw-growth-arrow {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kw-amber-soft);
    color: var(--kw-amber);
    font-size: 15px;
}

.kw-phone {
    --depth: 1.21;
    --z: 225px;
    top: 322px;
    left: 558px;
    width: 133px;
    height: 243px;
    border-radius: 24px;
    background: linear-gradient(120deg,#2a3142,#10192b);
    padding: 6px;
    box-shadow: 10px 18px 26px #1f4fa34d;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),225px) rotateZ(9deg) rotateY(-9deg);
}

.kw-phone-inner {
    background: #fff;
    border-radius: 19px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 22px 9px 10px;
}

.kw-phone-top {
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    background: #131f32;
    width: 54px;
    height: 11px;
    border-radius: 0 0 10px 10px;
}

.kw-phone-image {
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
    height: 75px;
    background: #dfeafa;
}

    .kw-phone-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }

.kw-phone-inner > b {
    display: block;
    font-size: 11px;
    line-height: 1.52;
    color: #142034;
    margin-top: 7px;
}

.kw-phone-inner > i {
    display: block;
    width: 84%;
    height: 4px;
    background: #e9ecf0;
    border-radius: 5px;
    margin-top: 7px;
}

    .kw-phone-inner > i:nth-of-type(2) {
        width: 65%;
    }

.kw-phone-cta {
    display: grid;
    place-items: center;
    background: var(--kw-grad-warm);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    margin-top: 8px;
    direction: ltr;
}

.kw-video-card {
    --depth: 1.37;
    --z: 257px;
    top: 481px;
    left: 405px;
    width: 181px;
    height: 106px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translate3d(var(--layer-x,0px),var(--layer-y,0px),257px) rotateZ(4deg);
}

.kw-video-play {
    border-radius: 50%;
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    background: var(--kw-grad-warm);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 8px 15px #f7941d55;
}

.kw-video-visual {
    width: 78px;
    height: 66px;
    border-radius: 7px;
    overflow: hidden;
    transform: rotate(-4deg);
}

    .kw-video-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
    }

.kw-floating-spark {
    --z: 210px;
    color: #fff;
    font-size: 29px;
    text-shadow: 0 0 9px #f7941d;
}

    .kw-floating-spark.spark1 {
        --depth: 1.1;
        left: 484px;
        top: 95px;
    }

    .kw-floating-spark.spark2 {
        --depth: 1.3;
        left: 724px;
        top: 375px;
    }

.kw-slider-controls {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
}

.kw-slide-arrow {
    background: #fff;
    border: 1px solid #d5e2f5;
    color: var(--kw-blue);
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 5px 12px #1f4fa318;
    font-size: 25px;
    line-height: 1;
    transition: transform .18s,background .18s;
}

    .kw-slide-arrow:hover {
        background: var(--kw-blue-soft);
        transform: scale(1.07);
    }

    .kw-slide-arrow span {
        position: relative;
        top: -2px;
    }

.kw-slider-dots {
    display: flex;
    gap: 7px;
    align-items: center;
}

    .kw-slider-dots button {
        height: 7px;
        width: 7px;
        padding: 0;
        border: 0;
        background: #c4d6f0;
        border-radius: 8px;
        transition: width .26s,background .26s;
    }

        .kw-slider-dots button.active {
            width: 22px;
            background: var(--kw-amber);
        }

.kw-hero.is-switching .kw-hero-copy h1, .kw-hero.is-switching .kw-description, .kw-hero.is-switching .kw-eyebrow {
    animation: kw-in .42s ease both;
}

@keyframes kw-in {
    from {
        transform: translateY(12px);
        opacity: .4
    }

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

.kw-art.is-hovered .kw-floating-spark {
    filter: drop-shadow(0 0 8px #f7b560);
}

.kw-art:focus-visible {
    outline: 2px solid var(--kw-blue-mid);
    border-radius: 10px;
}

.kw-demo-sections {
    border-bottom: 1px solid #eff0f4;
    padding-block: 95px;
    min-height: 235px;
}

.kw-section-kicker {
    font-size: 13px;
    color: #f85b39;
    font-weight: 750;
}

.kw-demo-sections h2 {
    font-size: 27px;
    margin: 0 0 10px;
}

.kw-demo-sections > p:last-child {
    color: #68788d;
    font-size: 14px;
}

@media(min-width:1650px) {
    .kw-hero-inner {
        grid-template-columns: minmax(0,.87fr) minmax(0,1.14fr);
    }
}

@media(max-width:1370px) {
    .kw-shell {
        width: calc(100% - 62px);
    }

    .kw-brand {
        width: 184px;
    }

    .kw-topbar {
        min-height: 157px;
    }

    .kw-hero-copy {
        padding-inline-start: 8px;
    }

    .kw-hero h1 {
        font-size: clamp(30px,3.1vw,44px);
    }

    .kw-description {
        font-size: 13.5px;
    }

    .kw-hero-inner {
        grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
        min-height: 595px;
    }

    .kw-art {
        height: 565px;
    }

    .kw-stage {
        --scene-scale: .86;
    }

    .kw-capability {
        font-size: 10.5px;
        gap: 7px;
    }

    .kw-bubble {
        width: 41px;
        height: 41px;
    }
}

@media(max-width:1110px) {
    .kw-shell {
        width: calc(100% - 40px);
    }

    .kw-topbar {
        grid-template-columns: minmax(160px,1fr) minmax(230px,1.4fr) minmax(140px,1fr);
        column-gap: 13px;
    }

    .kw-brand {
        width: 165px;
    }

    .kw-user-zone {
        gap: 6px;
    }

    .kw-utility {
        padding: 8px;
        font-size: 11px;
    }

    .kw-account > span {
        max-width: 130px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .kw-hero-inner {
        grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    }

    .kw-art {
        height: 515px;
    }

    .kw-stage {
        --scene-scale: .72;
    }

    .kw-hero h1 {
        font-size: 31px;
    }

    .kw-description {
        font-size: 12px;
        line-height: 2.05;
    }

    .kw-capabilities {
        margin-top: 27px;
        gap: 4px;
    }

    .kw-capability {
        font-size: 10px;
    }

    .kw-bubble {
        width: 34px;
        height: 34px;
    }

        .kw-bubble svg {
            width: 19px;
            height: 19px;
        }

    .kw-btn {
        height: 47px;
        min-width: 0;
        font-size: 12px;
        padding: 0 17px;
        gap: 10px;
    }
}

@media(max-width:830px) {
    .kw-topbar {
        grid-template-columns: 160px minmax(0,1fr) auto;
        min-height: 113px;
    }

    .kw-brand {
        width: 149px;
    }

    .kw-account > span {
        display: none;
    }

    .kw-user-zone {
        gap: 4px;
    }

    .kw-search {
        height: 44px;
        padding-inline: 12px;
    }

        .kw-search input {
            font-size: 11px;
        }

    .kw-utility {
        min-height: 40px;
    }

    .kw-language #lang-current {
        display: none;
    }

    .kw-nav-row {
        height: 48px;
    }

    .kw-hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 15px;
    }

    .kw-hero-copy {
        grid-column: 1;
        grid-row: 1;
        max-width: 690px;
        padding: 45px 0 0;
        justify-self: center;
        text-align: center;
    }

    .kw-eyebrow, .kw-cta-row, .kw-capabilities {
        justify-content: center;
    }

    .kw-description {
        max-width: 590px;
        margin-inline: auto;
    }

    .kw-hero h1 {
        font-size: clamp(31px,6vw,48px);
    }

    .kw-art {
        grid-column: 1;
        grid-row: 2;
        max-width: 730px;
        margin-inline: auto;
        height: 515px;
    }

    .kw-stage {
        --scene-scale: .78;
    }

    .kw-hero {
        min-height: 0;
    }

    .kw-world {
        top: 280px;
        inset-inline-start: 0;
        width: 100%;
        opacity: .25;
    }

    .kw-capabilities {
        margin-top: 22px;
    }
}

@media(max-width:590px) {
    .kw-shell {
        width: calc(100% - 28px);
    }

    .kw-topbar {
        grid-template-columns: 112px minmax(0,1fr) auto;
        min-height: 96px;
        gap: 6px;
    }

    .kw-brand {
        width: 119px;
    }

    .kw-search {
        height: 37px;
        padding-inline: 8px 6px;
    }

        .kw-search input {
            font-size: 10px;
        }

        .kw-search button {
            width: 22px;
        }

            .kw-search button svg {
                width: 17px;
                height: 17px;
            }

    .kw-account {
        display: none;
    }

    .kw-user-zone {
        gap: 0;
    }

    .kw-utility {
        padding: 6px;
        min-height: 36px;
        border-radius: 13px;
    }

        .kw-utility > svg:first-child {
            width: 17px;
            height: 17px;
        }

    .kw-tiny {
        width: 10px;
    }

    .kw-nav-row {
        height: 47px;
    }

    .kw-navigation {
        gap: 18px;
    }

    .kw-nav-link {
        display: none;
    }

    .kw-nav-main {
        font-size: 11px;
    }

    .kw-services-panel {
        width: min(290px,calc(100vw - 28px));
    }

    .kw-hero-copy {
        padding-top: 37px;
    }

    .kw-eyebrow {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .kw-hero h1 {
        font-size: clamp(27px,7vw,36px);
    }

    .kw-description {
        font-size: 11.8px;
        line-height: 2.1;
        margin: 11px auto 19px;
    }

    .kw-cta-row {
        gap: 9px;
    }

    .kw-btn {
        height: 43px;
        min-width: 0;
        font-size: 11.6px;
        padding: 0 15px;
    }

    .kw-capabilities {
        margin-top: 28px;
        gap: 0;
    }

    .kw-capability {
        flex: 1;
        gap: 6px;
        flex-direction: column;
        text-align: center;
        font-size: 9px;
        line-height: 1.8;
        padding-inline: 4px;
    }

    .kw-bubble {
        width: 37px;
        height: 37px;
    }

    .kw-art {
        height: 340px;
        margin-top: -3px;
    }

    .kw-stage {
        --scene-scale: .48;
    }

    .kw-slider-controls {
        bottom: 4px;
    }

    .kw-hero::after {
        bottom: -235px;
    }

    .kw-demo-sections {
        padding-block: 53px;
        min-height: 145px;
    }
}

@media(max-width:395px) {
    .kw-topbar {
        grid-template-columns: 97px minmax(0,1fr) auto;
    }

    .kw-brand {
        width: 108px;
    }

    .kw-stage {
        --scene-scale: .405;
    }

    .kw-art {
        height: 295px;
    }

    .kw-hero h1 {
        font-size: 27px;
    }

    .kw-language .kw-utility .kw-tiny {
        display: none;
    }
}
/* English mirrors the structure without duplicating page markup. */
html[dir="ltr"] .kw-hero-copy {
    text-align: start;
}

html[dir="ltr"] .kw-eyebrow, html[dir="ltr"] .kw-cta-row, html[dir="ltr"] .kw-capabilities {
    justify-content: flex-start;
}

html[dir="ltr"] .kw-hero h1 {
    letter-spacing: -.04em;
    line-height: 1.3;
}

html[dir="ltr"] .kw-description {
    margin-inline-start: 0;
}

html[dir="ltr"] .kw-hero .kw-demo-text {
    direction: rtl;
}

html[dir="ltr"] .kw-hero .kw-capability {
    font-size: 11px;
}

@media(max-width:830px) {
    html[dir="ltr"] .kw-hero-copy {
        text-align: center;
    }

    html[dir="ltr"] .kw-eyebrow, html[dir="ltr"] .kw-cta-row, html[dir="ltr"] .kw-capabilities {
        justify-content: center;
    }

    html[dir="ltr"] .kw-description {
        margin-inline: auto;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .kw-stage {
        transform: translate(-50%,-50%) scale(var(--scene-scale,1)) !important;
    }

    .kw-layer {
        --px: 0px !important;
        --py: 0px !important;
    }
}

.kw-art:not(.is-hovered) .kw-stage {
    transition: transform .65s cubic-bezier(.2,.75,.3,1)
}

.kw-art:not(.is-hovered) .kw-layer {
    transition: transform .65s cubic-bezier(.2,.75,.3,1)
}

/* QA refinements: ensure no 3D element gets clipped at the hero's lower edge. */
@media(min-width:831px) {
    .kw-stage {
        top: 45%;
    }

    .kw-phone {
        --z: 165px;
        top: 308px;
    }

    .kw-video-card {
        --z: 195px;
        top: 457px;
    }
}
/* KARNAWEB - ظاهر مارکتینگ‌پسند ویجت مشترک «پروژه‌های در حال اجرا»؛ رنگ هر نوار توسط karnaweb_home.js
   بر اساس درصد (قرمز تا سبز) به‌صورت inline ست می‌شود، اینجا فقط shape/transition مشترک تعریف می‌شود. */
.projects-progress-widget .progress {
    height: 10px;
    border-radius: 20px;
    background: #eef1f6;
    overflow: hidden;
}

.projects-progress-widget .progress-bar {
    border-radius: 20px;
    transition: width 1.5s ease, background-color .4s ease, box-shadow .4s ease;
}

.projects-progress-widget .projects-progress-value {
    font-size: 13px;
    transition: color .4s ease;
}

.projects-progress-widget .projects-progress-item span:first-child {
    font-weight: 600;
    color: var(--kw-ink);
}

/* Mobile: preserve the same brand/search/account components in two uncluttered rows. */
@media(max-width:590px) {
    .kw-topbar {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 88px 44px;
        min-height: 141px;
        gap: 0 8px;
    }

    .kw-brand {
        grid-column: 1;
        grid-row: 1;
        width: 133px;
    }

    .kw-user-zone {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .kw-account {
        display: flex;
    }

        .kw-account > span {
            display: none;
        }

    .kw-search {
        grid-column: 1/-1;
        grid-row: 2;
        width: 100%;
        height: 39px;
        margin-bottom: 11px;
    }

        .kw-search input {
            font-size: 12px;
        }
}

/* ===================================================================
   KARNAWEB - صفحه خدمات: هدر گالری انیمیشنی (.head-anim-holder.frame-alt.container)
   و بخش لیست خدمات (.rel-holder.container). منتقل‌شده از سایت قدیمی Karnaweb
   (services.aspx + css/style.css)، همراه با JS در karnaweb_site.js.
   =================================================================== */

.kwgreen {
    color: green;
}

.kwh1 {
    font-weight: bold;
    font-size: 28px;
    margin-bottom: 15px;
}

.LeftDesc {
    padding-right: 130px;
}

/* --- گالری تصاویر هدر: حالت اول (head-anim-sl01..06) --- */
.head-anim-img {
    position: absolute;
    top: 18px;
    left: 0;
    height: 100%;
    width: 100%;
    direction: ltr;
    opacity: 0;
}

.img-wrap img {
    opacity: 1;
    transition: opacity .3s forwards;
}

.img-loaded img {
    opacity: 1;
}

.animated .head-anim-load .img-loaded img {
    opacity: 1;
}

@keyframes head-anim-sl01 {
    0%, 100% {
        opacity: 1;
        transform: translate(320px,40px);
    }
}

@keyframes head-anim-sl02 {
    0% {
        opacity: 0;
        transform: translate(355px,295px);
    }

    100% {
        opacity: 1;
        transform: translate(355px,295px);
    }
}

@keyframes head-anim-sl03 {
    0% {
        opacity: 0;
        transform: translate(150px,55px);
    }

    100% {
        opacity: 1;
        transform: translate(0,55px);
    }
}

@keyframes head-anim-sl04 {
    0% {
        opacity: 0;
        transform: translate(100px,0);
    }

    100% {
        opacity: 1;
        transform: translate(-130px,120px);
    }
}

@keyframes head-anim-sl05 {
    0% {
        opacity: 0;
        transform: translate(200px,0);
    }

    100% {
        opacity: 1;
        transform: translate(-155px,230px);
    }
}

@keyframes head-anim-sl06 {
    0% {
        opacity: 0;
        transform: translate(200px,0);
    }

    100% {
        opacity: 1;
        transform: translate(-20px,310px);
    }
}

.animated .head-anim-sl01 {
    animation: head-anim-sl01 1.2s forwards;
    z-index: 1;
}

.animated .head-anim-sl02 {
    animation: head-anim-sl02 1.5s forwards;
    z-index: 2;
}

.animated .head-anim-sl03 {
    animation: head-anim-sl03 1.8s forwards;
    z-index: 3;
}

.animated .head-anim-sl04 {
    animation: head-anim-sl04 2.2s forwards;
    z-index: 2;
}

.animated .head-anim-sl05 {
    animation: head-anim-sl05 2.5s forwards;
    z-index: 4;
}

.animated .head-anim-sl06 {
    animation: head-anim-sl06 2.5s forwards;
    z-index: 5;
}

/* --- گالری تصاویر هدر: حالت دوم (head-anim37..46 + top-anim-mobile01..07)، برای زیرصفحات خدمات --- */
@keyframes head-anim-img {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(100px);
    }
}

.animated .head-anim37 {
    left: 62px;
    top: -40px;
    animation: head-anim-img .6s forwards;
}

.animated .head-anim38 {
    left: 410px;
    top: 95px;
    animation: head-anim-img .8s forwards .2s;
}

.animated .head-anim39 {
    left: 84px;
    top: 172px;
    animation: head-anim-img .6s forwards .5s;
}

.animated .head-anim40 {
    left: 111px;
    top: 27px;
    animation: head-anim-img 1s forwards .7s;
}

.animated .head-anim41 {
    left: 16px;
    top: 57px;
    animation: head-anim-img .4s forwards 1.2s;
}

.animated .head-anim42 {
    left: 128px;
    top: -22px;
    animation: head-anim-img .6s forwards;
}

.animated .head-anim43 {
    left: 320px;
    top: 57px;
    animation: head-anim-img .8s forwards .2s;
}

.animated .head-anim44 {
    left: -137px;
    top: 116px;
    animation: head-anim-img .6s forwards .5s;
}

.animated .head-anim45 {
    left: 63px;
    top: 12px;
    animation: head-anim-img 1s forwards .7s;
}

.animated .head-anim46 {
    left: 227px;
    top: -12px;
    animation: head-anim-img .4s forwards 1.2s;
}

@keyframes top-anim-mobile01 {
    0%,50% {
        opacity: 0;
        transform: translate(233px,91px);
    }

    100% {
        opacity: 1;
        transform: translate(195px,91px);
    }
}

@keyframes top-anim-mobile05 {
    0%,25% {
        opacity: 0;
        transform: translate(-100px,30px);
    }

    100%,45% {
        opacity: 1;
        transform: translate(-100px,69px);
    }
}

@keyframes top-anim-mobile06 {
    0% {
        opacity: 0;
        transform: translate(7px,7px);
    }

    10% {
        opacity: 0;
        transform: translate(8px,8px);
    }

    100%,30% {
        opacity: 1;
        transform: translate(-9px,78px);
    }
}

@keyframes top-anim-mobile07 {
    0% {
        opacity: 0;
        transform: translate(350px,-2px);
    }

    15% {
        opacity: 1;
        transform: translate(350px,36px);
    }

    100% {
        opacity: 1;
        transform: translate(406px,119px);
    }
}

.animated .top-anim-mobile01 {
    animation: top-anim-mobile01 2s forwards .2s;
}

.animated .top-anim-mobile05 {
    animation: top-anim-mobile05 2s forwards .2s;
}

.animated .top-anim-mobile06 {
    animation: top-anim-mobile06 2s forwards .2s;
}

.animated .top-anim-mobile07 {
    animation: top-anim-mobile07 2s forwards .2s;
}

/* --- بخش لیست خدمات (.rel-holder.container) --- */
.dark-services--section {
    padding: 80px 0 34px;
}

    .dark-services--section a {
        color: inherit;
        font-size: 24px;
    }

@media only screen and (max-width:992px) {
    .dark-services--section {
        padding: 80px 0;
    }
}

.nw-container {
    margin: auto;
}

.nw--service-item:after, .service-nav__list:before {
    right: 0;
    top: 0;
    content: "";
}

.service-nav__list:before {
    position: absolute;
    height: 100%;
    width: 57px;
    background: url(/images/list_normal.png) center center no-repeat;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    background-size: 35px 98%;
}

.nw--service-item:not(:last-child) {
    margin-bottom: 29px;
}

@media only screen and (max-width:992px) {
    .nw--service-item {
        width: calc(50% - 15px);
        padding: 25px 0 40px;
    }
}

@media only screen and (max-width:646px) {
    .nw--service-item {
        width: 100%;
    }
}

.nw--service-item:after {
    position: absolute;
    display: block;
    width: 450px;
    height: 400px;
    background-size: contain;
    z-index: 1;
}

.nw--service-item__content, .nw--service-item__logo, .nw--service-item__nav {
    z-index: 2;
    position: relative;
}

@media only screen and (max-width:992px) {
    .nw--service-item:after {
        width: 100%;
        background-size: 100%;
    }
}

.nw--service-item.branding-design:after {
    background: url(/images/branding-logo-BG.jpg) left top no-repeat;
}

.nw--service-item.web-dev:after {
    background: url(/images/website-development-BG.jpg) left top no-repeat;
}

.nw--service-item.mob-apps:after {
    background: url(/images/mobile-apps-BG.jpg) left top no-repeat;
}

.nw--service-item.digital-marketing:after {
    background: url(/images/digital-marketing-BG.jpg) left top no-repeat;
}

@media only screen and (max-width:992px) {
    .nw--service-item.branding-design:after,
    .nw--service-item.web-dev:after,
    .nw--service-item.mob-apps:after,
    .nw--service-item.digital-marketing:after {
        background-size: 100%;
    }
}

.nw--service-item__title {
    font: 45px/1 roboto-medium-webfont,Arial;
    margin-bottom: 12px;
    transition: color .2s;
}

@media only screen and (max-width:992px) {
    .nw--service-item__title {
        font-size: 28px;
        text-align: center;
    }
}

.nw--service-item__title, .service-nav__item, .service-nav__list, .nw--service-item__nav, .btn-wrp {
    color: inherit !important;
    direction: rtl;
}

.nw--service-item:nth-child(1) .nw--service-item__wrp {
    color: #872f9f;
}

.nw--service-item:nth-child(2) .nw--service-item__wrp {
    color: #aa4141;
}

.nw--service-item:nth-child(3) .nw--service-item__wrp {
    color: #03739f;
}

.nw--service-item:nth-child(4) .nw--service-item__wrp {
    color: #aa4141;
}

.nw--service-item:nth-child(5) .nw--service-item__wrp {
    color: #0078ae;
}

.nw--service-item:nth-child(6) .nw--service-item__title:hover {
    color: #fff;
}

@media only screen and (min-width:993px) {
    .nw--service-item__content {
        width: 42%;
        margin: 0 35px;
    }

    .nw--service-item__nav {
        width: calc(37% - 70px);
    }
}

@media only screen and (max-width:992px) {
    .nw--service-item__content {
        text-align: center;
        font-size: 16px;
        margin-bottom: 50px;
    }

    .nw--services-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

.nw--service-item__content p {
    margin-bottom: 25px;
}

.nw--service-item__wrp {
    margin: 0 auto;
    position: relative;
    display: flex;
    padding-bottom: 15px inherit;
    padding-top: 15px;
}

.nw--service-item .nw--service-item__wrp:before, .nw--service-item .nw--service-item__wrp:after {
    top: 0;
    content: '';
    width: 136px;
    height: 100%;
    z-index: 499;
    position: absolute;
    background-color: inherit;
    -moz-transform: skewX(-22deg);
    -webkit-transform: skewX(-22deg);
    -o-transform: skewX(-22deg);
    -ms-transform: skewX(-22deg);
    transform: skewX(-22deg);
    right: -65px;
}

.nw--service-item .nw--service-item__wrp:after {
    right: auto;
    left: -65px;
}

@media only screen and (max-width:992px) {
    .nw--service-item__wrp {
        flex-direction: column;
        align-items: center;
    }
}

.nw--service-item__logo {
    display: flex;
    align-items: center;
}

@media only screen and (max-width:646px) {
    .nw--service-item__logo img {
        max-width: 150px;
    }

    .nw--service-item .nw--service-item__wrp:before, .nw--service-item .nw--service-item__wrp:after {
        content: "";
        display: none;
    }
}

.service-nav__list.green {
    color: #71980d;
}

.service-nav__list {
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (min-width:993px) {
    .nw--service-item__logo {
        width: 21%;
    }

    .service-nav__list {
        height: 222px;
        padding-right: 66px;
    }
}

.btn-wrp .vm-btn:after, .service-nav__item a:before {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    display: inline-block;
}

.btn-wrp .vm-btn:before {
    width: 100%;
    height: 3px;
    background: #393939;
    left: 0;
    bottom: 4px;
}

.btn-wrp .vm-btn:after, .btn-wrp .vm-btn:before {
    content: "";
    position: absolute;
    transition: all .2s;
}

.btn-wrp .vm-btn.green:hover {
    color: #fff;
}

.btn-wrp .vm-btn.green:after {
    border-color: inherit;
}

.btn-wrp .vm-btn:after {
    border: 20px solid #fff;
    border-width: 0 0 3px 3px;
    right: 2px;
    top: 4px;
}

.btn-wrp .vm-btn.green {
    color: inherit;
}

.btn-wrp .vm-btn {
    position: relative;
    text-transform: uppercase;
    font-family: inherit;
    padding: 0 20px 12px 0;
    transition: color .2s;
    font-size: 13px;
}

.service-nav__item a {
    transition: color .2s;
    position: relative;
    font-size: 12px;
}

    .service-nav__item a:before {
        content: "";
        border: 3px solid;
        border-width: 0px 0px 3px 3px;
        position: absolute;
        right: -26px;
        top: 9px;
        transition: all .2s linear;
    }

    .btn-wrp .vm-btn:after, .service-nav__item a:before {
        width: 6px;
        height: 6px;
        transform: rotate(45deg);
        display: inline-block;
    }

.nw--service-item__wrp img {
    width: 100%;
}

/* --- زیربخش «کارهایی که می‌توانیم انجام دهیم» داخل همان rel-holder --- */
#get_quote {
    font-size: 24px;
    padding-top: 90px;
    padding-bottom: 50px;
    text-align: center;
    background-image: url(/images/contact_line.png);
    background-repeat: no-repeat;
    background-position: center top;
}

.OurServiceTitle {
    padding-bottom: 20px;
}

    .OurServiceTitle h2 {
        font-size: 13px;
        width: 100%;
        text-align: center;
        direction: rtl;
    }

    .OurServiceTitle img {
        width: 100%;
        object-fit: cover;
    }

.shadow2 {
    position: absolute;
    bottom: 0;
    border: none !important;
    right: 3px;
    display: none;
}
.rd-navbar-fixed .rd-navbar-panel-canvas {
    height: 79px !important;
    align-items: center;
}
.rd-navbar-fixed .rd-navbar-toggle {
    height: 78px !important;
}
.mtmegamenu a {
    font-weight:800;
}

/* ===== KARNAWEB — مقایسه قبل/بعد (Before/After) ===== */
.kw-compare {
    --kw-compare-pos: 50%;
    position: relative;
    direction: ltr; /* چپ/راست ثابت بماند، حتی در صفحه RTL */
    overflow: hidden;
    border-radius: 16px;
    user-select: none;
    touch-action: pan-y; /* اسکرول عمودی صفحه روی موبایل قفل نشود */
    cursor: ew-resize;
}
.kw-compare__img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
/* لایه قبل هم برش می‌خورد تا در PNG شفاف، عکس زیرین از زیر لایه بعد پیدا نشود */
.kw-compare > .kw-compare__img:first-child {
    clip-path: inset(0 calc(100% - var(--kw-compare-pos)) 0 0);
}
.kw-compare__after {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--kw-compare-pos));
}
.kw-compare__after .kw-compare__img {
    height: 100%;
    object-fit: cover;
}
.kw-compare__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--kw-compare-pos);
    width: 3px;
    margin-left: -1.5px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,.35);
    pointer-events: none;
}
.kw-compare__handle {
    position: absolute;
    top: 50%;
    left: var(--kw-compare-pos);
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kw-grad);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.kw-compare__handle:focus-visible {
    outline: 3px solid var(--kw-ink);
    outline-offset: 2px;
}
.kw-compare.is-dragging .kw-compare__handle {
    transform: scale(1.1);
}
/* ========== tokens ========== */