body {
    font-family: YekanBakh-Regular;
}

:root { --header-space: 150px; }

 

/* =====================================================
   Footer: متن‌ها وسط‌چین و هر گروه با یک خط جدا
===================================================== */
 
.footimg1 img,
.footimg2 img { max-width: 100%; height: auto; }
 
footer a { overflow-wrap: anywhere; }
 
footer .divFooterIn,
footer .divFooterIn ul,
footer .divFooterIn li,
footer #divCopyright { text-align: center; }
 
footer .divFooterIn ul,
footer .divFooterIn li {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
 
footer .divFooterIn { box-sizing: border-box; }
 
/* دسکتاپ: خط عمودی بین ستون‌ها */
footer .divFooterIn + .divFooterIn {
    border-inline-start: 1px solid rgba(255,255,255,.14);
}
 
/* تبلت و موبایل: گروه‌ها زیر هم، با خط افقی بین هر دو گروه */
@media (max-width: 1000px) {
    footer { display: flex; flex-wrap: wrap; }
 
    footer .linef,
    footer .Clear,
    footer #divCopyright { flex: 0 0 100%; width: 100%; }
 
    footer .divFooterIn {
        float: none;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        padding: 18px 10px;
    }
 
    footer .divFooterIn + .divFooterIn {
        border-inline-start: 0;
        border-top: 1px solid rgba(255,255,255,.14);
    }
 
    footer #divCopyright {
        padding: 14px 10px 20px;
        border-top: 1px solid rgba(255,255,255,.14);
    }
}
 

/* ---------- Base ---------- */

.hero, .hero *,
.features, .features *,
#websiteDesign, #websiteDesign *,
#whyzidex, #whyzidex *,nx7-glow
.divProjectsAll, .divProjectsAll *,
.nx7-services, .nx7-services * {
    box-sizing: border-box;
}

    #websiteDesign img, #whyzidex img, .hero img, .divProjectsAll img {
        max-width: 100%;
        height: auto;
    }

.web {
    font-size: clamp(1.4em, 4vw, 2em);
    margin-top: 0;
    padding: 0 15px;
}

/* ---------- Hero ---------- */

.hero {
    overflow: hidden;
}

.hero-container > * {
    min-width: 0;
}

.hero-buttons {
    flex-wrap: wrap;
}

.badge span {
    flex-shrink: 0;
}

.hero h1 {
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.9;
    letter-spacing: 0; /* letter-spacing منفی حروف فارسی را از هم جدا می‌کرد */
    background-clip: border-box;
}

    .hero h1 span {
        background-clip: text;
    }

.hero-visual {
    height: auto;
    min-height: 480px;
    transform: none;
}

.hero-img {
    width: 100%;
}

    .hero-img img {
        display: block;
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

.code-card {
    top: 20px;
    right: 0;
    width: 210px;
    height: 140px;
}

.code-icon {
    direction: ltr;
    text-align: left;
}

.responsive-card {
    left: 0;
    bottom: 20px;
}

.responsive-icon {
    flex-shrink: 0;
}

.responsive-card strong {
    color: #fff;
}

/* ---------- Features ---------- */

.features-container {
    width: min(1400px, 90%);
    margin: auto;
}

.feature {
    min-width: 0;
}

    .feature p {
        line-height: 1.8;
    }

/* ---------- فروشگاهی / چرا زیدکس ---------- */

.textweb p, .textwhyzidex p {
    line-height: 2;
}

.textweb span {
    display: inline-block;
    padding: 10px 28px;
}

/* ---------- پروژه‌ها ---------- */

.divProjectsAll div.divProjectsMain img {
    height: auto;
    object-fit: cover;
}

/* فلش کارت پروژه‌ها (کلاس جدید proj-arrow در aspx) */
.divProjectsAll div.divProjectsMain div.divTitle span.proj-arrow {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff;
    display: flex;
    padding: 12px 20px;
    text-align: center;
    border-radius: 100px;
}

    .divProjectsAll div.divProjectsMain div.divTitle span.proj-arrow i {
        font-size: 1.3em;
        display: inline-block;
    }

/* =====================================================
   NX7 - لپ‌تاپ وسط صفحه
===================================================== */

.nx7-services {
    overflow: clip;
}

.nx7-sticky {
    height: 100vh;
    height: 100svh;
}

/* عرض صحنه طوری محدود می‌شود که عنوان‌ها + لپ‌تاپ از ارتفاع صفحه بیرون نزنند */
.nx7-stage {
    width: min(90vw, 860px);
    width: max(260px, min(90vw, 860px, calc((100svh - 150px) * 1.383)));
}

.nx7-top-services {
    flex-wrap: wrap;
}

.nx7-screen {
    container-type: inline-size;
}

.nx7-browser {
    background: #fafbff;
}

.nx7-browser-dots {
    gap: clamp(3px, 1.2cqw, 8px);
}

/* پدینگ پایین = ارتفاع نوار آدرس (14٪ ارتفاع = 8.8٪ عرض)؛ محتوا دقیقاً وسط بخش دیدنی می‌ماند */
.nx7-panel {
    box-sizing: border-box;
    padding-bottom: 8.8%;
}

.nx7-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6%;
}

.nx7-card {
    overflow: hidden;
    gap: 4px;
    gap: clamp(2px, 1.4cqw, 8px);
    padding: 6px;
    padding: clamp(3px, 2.5cqw, 14px);
    border-radius: 14px;
    border-radius: clamp(8px, 3cqw, 16px);
}

.nx7-card-icon {
    width: clamp(16px, 24%, 34px);
    flex-shrink: 0;
}

.nx7-card > span:last-child {
    font-size: clamp(8px, 1vw, 10px);
    font-size: clamp(7px, 1.9cqw, 11px);
}

.nx7-final-content {
    gap: 7px;
    gap: clamp(4px, 1.6cqw, 12px);
}

    .nx7-final-content h3 {
        font-size: clamp(13px, 1.7vw, 18px);
        font-size: clamp(10px, 3cqw, 18px);
        line-height: 1.5;
    }

    .nx7-final-content p {
        max-width: 85%;
        font-size: clamp(8px, 1.1vw, 11px);
        font-size: clamp(7px, 1.9cqw, 11px);
    }

.nx7-cta {
    padding: 5px 18px;
    padding: clamp(3px, 1.2cqw, 8px) clamp(12px, 4cqw, 26px);
    font-size: clamp(8px, 1.1vw, 11px);
    font-size: clamp(7px, 1.9cqw, 11px);
}

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

/* ---------- لپ‌تاپ کوچک ---------- */
@media (max-width: 1200px) {
    .hero-visual {
        min-height: 440px;
        transform: none;
    }

    .feature {
        padding: 20px 15px;
    }

    .textweb p {
        font-size: 1.2em;
    }

    .divProjectsAll div.divProjectsMain div.divTitle a {
        font-size: 1.6em;
    }
}

/* ---------- تبلت ---------- */
@media (max-width: 1000px) {
    .hero {
        min-height: auto;
        padding: 50px 0 40px;
    }

    .hero-container {
        gap: 20px;
        margin-top:20%;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        min-height: 400px;
        margin-top: 10px;
        transform: none;
    }

    .hero-img img {
        max-width: 560px;
    }

    .features {
        padding: 40px 0 50px;
    }

    .features-container {
        gap: 30px 10px;
    }

    .feature:not(:last-child)::after {
        display: none;
    }

    #websiteDesign {
        flex-direction: column;
        padding: 0;
    }

    .imgwebsiteDesign, .textweb {
        width: 100%;
    }

    .textweb {
        margin: 0;
        padding: 30px 6% 40px;
    }

        .textweb h2 {
            font-size: 1.7em;
        }

        .textweb p {
            font-size: 1.15em;
            padding-bottom: 25px;
        }

    #whyzidex {
        flex-direction: column;
        padding: 40px 6%;
    }

    .textwhyzidex, .imgwhyzidex {
        width: 100%;
        margin: 0;
    }

        .textwhyzidex h2 {
            font-size: 1.7em;
            padding-bottom: 20px;
        }

    .imgwhyzidex {
        margin-top: 30px;
    }

        .imgwhyzidex img {
            width: 85%;
            max-width: 520px;
            margin: 0 auto;
        }

    .divProjectsAll div.divProjectsMain div.divTitle a {
        font-size: 1.4em;
    }

    .divProjectsAll div.divProjectsMain div.divTitle span.proj-arrow {
        padding: 10px 16px;
    }
}

/* ---------- موبایل ---------- */
@media (max-width: 700px) {
    .hero {
        padding: 35px 0 30px;
    }

        .hero h1 {
            font-size: 30px;
            line-height: 1.8;
        }
        /* قبلاً 10px بود */
        .hero p {
            font-size: 15px;
            line-height: 2;
        }

    .badge {
        font-size: 12px;
        padding: 8px 14px;
    }

    .hero-buttons {
        align-items: stretch;
    }

    /* حقه‌ی scale / width:180% قبلی حذف شد (باعث اسکرول افقی می‌شد) */
    .hero-visual {
        min-height: 300px;
        height: auto;
        width: 100%;
        margin: 0;
        transform: none;
    }

    .code-card {
        width: 130px;
        height: 88px;
        padding: 12px;
        top: 0;
    }

    .code-icon {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .code-lines {
        gap: 5px;
    }

        .code-lines span {
            height: 4px;
        }

    .responsive-card {
        width: 170px;
        height: 70px;
        padding: 12px;
        gap: 10px;
        bottom: 0;
    }

    .responsive-icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
        border-radius: 9px;
    }

    .responsive-card strong {
        font-size: 11px;
    }

    .responsive-card span {
        font-size: 10px;
    }

    .features-container {
        gap: 25px 10px;
    }

    .feature:last-child {
        grid-column: 1 / -1;
    }

    .feature h3 {
        font-size: 15px;
    }

    .textweb h2, .textwhyzidex h2 {
        font-size: 1.45em;
    }

    .textweb p, .textwhyzidex p {
        font-size: 1.02em;
    }

    .divProjectsAll {
        margin: 3% 2%;
    }

        .divProjectsAll div.divProjectsMain {
            width: 96%;
            margin: 2%;
        }

            .divProjectsAll div.divProjectsMain div.divTitle a {
                font-size: 1.3em;
            }

    /* ----- لپ‌تاپ ----- */
    .nx7-heading {
        padding: 30px 16px 10px;
    }

    .nx7-scroll-area {
        height: 380vh;
    }

    .nx7-stage {
        width: 96vw;
        width: max(260px, min(96vw, calc((100svh - 200px) * 1.383)));
    }

    .nx7-top-services {
        gap: 6px;
        margin-bottom: 14px;
        padding: 0 2px;
    }

    .nx7-service {
        padding: 6px 9px;
        gap: 5px;
        font-size: 9px;
    }

    .nx7-service-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

        .nx7-service-icon svg {
            width: 10px;
            height: 10px;
        }

    .nx7-card-grid {
        width: 84%;
        height: 84%;
        gap: 5%;
    }
}

/* ---------- موبایل کوچک ---------- */
@media (max-width: 450px) {
    .hero h1 {
        font-size: 26px;
    }

    .hero p {
        font-size: 14px;
    }

    .code-card {
        display: none;
    }

    .responsive-card {
        left: 50%;
        transform: translateX(-50%);
        animation: none;
    }

    .hero-visual {
        min-height: 270px;
    }

    .feature {
        padding: 10px 6px;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .feature p {
        font-size: 11px;
    }
}

/* ---------- گوشی در حالت افقی / صفحه‌های کم‌ارتفاع ---------- */
@media (max-height: 520px) {
    .nx7-stage {
        width: max(260px, min(90vw, 860px, calc((100svh - 100px) * 1.383)));
    }

    .nx7-top-services {
        margin-bottom: 8px;
        gap: 6px;
    }

    .nx7-service {
        padding: 5px 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-card {
        animation: none;
    }
}