/* ---------- web ---------- */

.web{text-align:center;font-size:2em;margin-bottom:3%;margin-top:%}

/* =
/* =====================================
   Variables
===================================== */

@font-face {
    font-family: 'YekanBakh-Regular';
    src: url('/fonts/font-family:truetype/YekanBakh-Regular.eot?#') format('eot'), /* IE6�8 */
    url('/fonts/YekanBakh-Regular.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/fonts/YekanBakh-Regular.woff2') format('woff2'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/fonts/YekanBakh-Regular.ttf') format('ttf'); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}

body{font-family:YekanBakh-Regular}



:root {

    --bg:
        #070b1a;

    --bg-light:
        #0d1328;

    --purple:
        #8b5cf6;

    --blue:
        #3b82f6;

    --text-gray:
        #a8b0c3;

    --border:
        rgba(255,255,255,.08);

}


/* =====================================
   Container
===================================== */

.container {

    width:
        min(1400px, 90%);

    margin:
        auto;

}


/* =====================================
   Background
===================================== */

.background {

    position:
        fixed;

    inset:
        0;

    z-index:
        -10;

    overflow:
        hidden;

}


.glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        .3;

}


.glow-1 {

    width:
        500px;

    height:
        500px;

    background:
        #4f46e5;

    top:
        150px;

    left:
        -150px;

}


.glow-2 {

    width:
        450px;

    height:
        450px;

    background:
        #7c3aed;

    top:
        -200px;

    right:
        -150px;

}

/* =====================================
   Navigation
===================================== */

.nav {

    display:
        flex;

    align-items:
        center;

    gap:
        35px;

}


.nav a {

    color:
        #b8c0d2;

    text-decoration:
        none;

    font-size:
        15px;

    transition:
        .3s;

    position:
        relative;

}


.nav a:hover {

    color:
        white;

}


.nav a.active {

    color:
        #b07cff;

    font-weight:
        600;

}


.nav a.active::after {

    content:
        "";

    position:
        absolute;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #3b82f6
        );

    bottom:
        -30px;

    right:
        0;

}


.nav i {

    font-size:
        10px;

}



/* =====================================
   Mobile Menu
===================================== */

.menu-btn {

    display:
        none;

    background:
        transparent;

    border:
        none;

    color:
        white;

    font-size:
        22px;

    cursor:
        pointer;

}


/* =====================================
   Hero
===================================== */

.hero {
    background:  #070b1a;
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    padding: 70px 0 40px;
    position: relative;
}


.hero-container {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        40px;

}


/* =====================================
   Hero Content
===================================== */

.hero-content {

    max-width:
        650px;

}


/* Badge */

.badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 18px;

    border:
        1px solid
        rgba(139,92,246,.2);

    border-radius:
        50px;

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

    color:
        #c5b2ff;

    margin-bottom:
        25px;

    font-size:
        14px;

}


.badge span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #3b82f6;

    box-shadow:
        0 0 15px #3b82f6;

}


/* Heading */

.hero h1 {color:white;font-size: clamp(40px, 5vw, 50px);line-height: 2.1;font-weight:900;margin-bottom:25px;letter-spacing:-1px;}


.hero h1 span {
    font-size:0.8em;
    display:
        block;

    background:

        linear-gradient(
            90deg,
            #8b5cf6,
            #3b82f6,
            #60a5fa
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* Paragraph */

.hero p {

    color:
        #aeb7c9;

    font-size:
        18px;

    line-height:
        2.1;

    max-width:
        600px;

}


/* =====================================
   Hero Buttons
===================================== */

.hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        35px;

}


.primary-btn {

    padding:
        16px 28px;

    border-radius:
        50px;

    background:

        linear-gradient(
            135deg,
            #8b5cf6,
            #3b82f6
        );

    color:
        white;

    text-decoration:
        none;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    font-weight:
        600;

    box-shadow:

        0 10px 30px
        rgba(99,102,241,.3);

    transition:
        .3s;

}


.primary-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:

        0 20px 50px
        rgba(99,102,241,.45);

}


/* Secondary */

.secondary-btn {

    padding:
        15px 25px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:
        50px;

    color:
        white;

    text-decoration:
        none;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    transition:
        .3s;

}


.secondary-btn:hover {

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

    border-color:
        #8b5cf6;

}


.play-icon {

    width:
        24px;

    height:
        24px;

    border:
        2px solid white;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.play-icon i {

    font-size:
        9px;

    margin-right:
        -2px;

}


/* =====================================
   Stats
===================================== */

.hero-stats {

    display:
        flex;

    gap:
        40px;

    margin-top:
        45px;

}


.hero-stats div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.hero-stats strong {

    font-size:
        22px;

    color:
        white;

}


.hero-stats span {

    color:
        #7f899d;

    font-size:
        13px;

}


/* =====================================
   Hero Visual
===================================== */

.hero-visual {

    height:
        600px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =====================================
   Laptop
===================================== */

.laptop-wrapper {

    width:
        620px;

    position:
        absolute;

    left:
        0;

    top:
        110px;

    transform:
        perspective(1500px)
        rotateY(10deg)
        rotateX(3deg)
        rotateZ(-4deg);

}


/* Screen */

.laptop-screen {

    height:
        370px;

    padding:
        13px;

    border-radius:
        18px 18px 8px 8px;

    background:

        linear-gradient(
            135deg,
            #222a48,
            #050914
        );

    box-shadow:

        0 30px 80px
        rgba(0,0,0,.6),

        0 0 40px
        rgba(79,70,229,.25);

    position:
        relative;

}


.laptop-screen::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    border:
        1px solid
        rgba(139,92,246,.4);

    pointer-events:
        none;

}


/* Screen UI */

.screen-ui {

    width:
        100%;

    height:
        100%;

    border-radius:
        8px;

    overflow:
        hidden;

    background:

        linear-gradient(
            135deg,
            #0b1024,
            #111a35
        );

}


/* Mini Navbar */

.screen-navbar {

    height:
        45px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 20px;

    direction:
        ltr;

}


.mini-logo {

    color:
        white;

    font-size:
        11px;

    font-weight:
        700;

}


.mini-logo span {

    color:
        #8b5cf6;

    font-size:
        18px;

}


.mini-menu {

    display:
        flex;

    gap:
        15px;

    font-size:
        7px;

    color:
        #aab2c5;

}


.mini-active {

    background:
        #6650c8;

    padding:
        4px 7px;

    border-radius:
        4px;

    color:
        white;

}


/* Screen Content */

.screen-content {

    height:
        calc(100% - 45px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        35px;

    direction:
        ltr;

}


.screen-text h2 {

    font-size:
        34px;

    line-height:
        1.2;

    color:
        white;

}


.screen-text h2 span {

    color:
        #7da7ff;

}


.screen-text p {

    font-size:
        10px;

    margin-top:
        15px;

    color:
        #a9b0c0;

}


.screen-text button {

    margin-top:
        25px;

    border:
        none;

    padding:
        10px 16px;

    border-radius:
        7px;

    color:
        white;

    background:

        linear-gradient(
            90deg,
            #7c3aed,
            #3b82f6
        );

    font-size:
        9px;

    cursor:
        pointer;

}


/* =====================================
   Abstract Shape
===================================== */

.abstract-shape {

    width:
        260px;

    height:
        250px;

    position:
        relative;

}


.blob {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(1px);

}


.blob-1 {

    width:
        130px;

    height:
        210px;

    background:

        linear-gradient(
            180deg,
            #8b5cf6,
            #1d4ed8
        );

    right:
        40px;

    top:
        0;

    border-radius:
        60% 40% 60% 40%;

    transform:
        rotate(20deg);

}


.blob-2 {

    width:
        140px;

    height:
        140px;

    background:
        #312e81;

    bottom:
        10px;

    left:
        20px;

    border-radius:
        50% 60% 40% 60%;

}


.blob-3 {

    width:
        110px;

    height:
        160px;

    background:

        linear-gradient(
            180deg,
            #a855f7,
            #2563eb
        );

    bottom:
        20px;

    right:
        0;

    opacity:
        .7;

}


/* =====================================
   Laptop Base
===================================== */

.laptop-base {

    width:
        700px;

    height:
        100px;

    margin-right:
        -40px;

    margin-top:
        -3px;

    border-radius:
        0 0 60px 60px;

    background:

        linear-gradient(
            135deg,
            #353d5e,
            #12172a 45%,
            #454b6b
        );

    box-shadow:

        0 25px 50px
        rgba(0,0,0,.6);

    position:
        relative;

    transform:
        perspective(600px)
        rotateX(55deg);

}


.keyboard {

    position:
        absolute;

    top:
        15px;

    left:
        170px;

    width:
        350px;

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        5px;

}


.keyboard span {

    height:
        10px;

    border-radius:
        2px;

    background:
        #0b0f1c;

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.1);

}


.trackpad {

    position:
        absolute;

    width:
        140px;

    height:
        45px;

    border:
        1px solid
        rgba(0,0,0,.4);

    border-radius:
        8px;

    left:
        280px;

    top:
        55px;

}


/* =====================================
   Floating Cards
===================================== */

.floating-card {

    position:
        absolute;

    background:

        linear-gradient(
            135deg,
            rgba(25,34,67,.95),
            rgba(12,17,35,.9)
        );

    border:
        1px solid
        rgba(120,100,255,.3);

    backdrop-filter:
        blur(20px);

    box-shadow:

        0 20px 60px
        rgba(0,0,0,.4),

        0 0 25px
        rgba(99,102,241,.1);

    z-index:
        10;

}


/* Chart Card */

.chart-card {

    width:
        240px;

    height:
        150px;

    border-radius:
        15px;

    top:
        20px;

    left:
        130px;

    padding:
        15px;

    transform:
        rotate(8deg);

    animation:
        float 5s ease-in-out infinite;

}


.card-top {

    display:
        flex;

    justify-content:
        space-between;

    color:
        #b7a5ff;

    font-size:
        13px;

}


.chart {

    margin-top:
        15px;

}


.chart svg {

    width:
        100%;

}


/* Code Card */

.code-card {

    width:
        220px;

    height:
        145px;

    border-radius:
        15px;

    top:
        26px;

    right:
        100px;

    padding:
        20px;

    transform:
        rotate(8deg);

    animation:
        float 6s ease-in-out infinite;

}


.code-icon {

    color:
        #a78bfa;

    font-size:
        23px;

    margin-bottom:
        15px;

}


.code-lines {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.code-lines span {

    height:
        6px;

    border-radius:
        5px;

    background:

        linear-gradient(
            90deg,
            #8b5cf6,
            #3b82f6
        );

}


.code-lines span:nth-child(1) {

    width:
        70%;

}


.code-lines span:nth-child(2) {

    width:
        90%;

}


.code-lines span:nth-child(3) {

    width:
        55%;

}


.code-lines span:nth-child(4) {

    width:
        80%;

}


.code-lines span:nth-child(5) {

    width:
        40%;

}


/* Responsive Card */

.responsive-card {

    width:
        220px;

    height:
        100px;

    bottom:
        10px;

    left:
        -10px;

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        20px;

    animation:
        float 7s ease-in-out infinite;

}


.responsive-icon {

    width:
        45px;

    height:
        45px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(139,92,246,.2);

    color:
        #a78bfa;

    font-size:
        22px;

}


.responsive-card div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.responsive-card strong {

    font-size:
        13px;

}


.responsive-card span {

    color:
        #aab3c6;

    font-size:
        11px;

}


/* =====================================
   Features
===================================== */

.features {

    padding:
        60px 0 80px;

    border-top:
        1px solid
        rgba(255,255,255,.04);

}


.features-container {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

}


.feature {

    text-align:
        center;

    padding:
        20px 30px;

    position:
        relative;

}


.feature:not(:last-child)::after {

    content:
        "";

    width:
        1px;

    height:
        100px;

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

    position:
        absolute;

    left:
        0;

    top:
        30px;

}


.feature-icon {

    width:
        55px;

    height:
        55px;

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        auto auto 18px;

    background:

        linear-gradient(
            135deg,
            #161e3c,
            #10172e
        );

    border:
        1px solid
        rgba(139,92,246,.2);

    color:
        #a78bfa;

    font-size:
        22px;

}


.feature h3 {

    font-size:
        16px;

    margin-bottom:
        8px;

}


.feature p {

    color:
        #8d96aa;

    font-size:
        12px;

}


/* =====================================
   Animations
===================================== */

@keyframes float {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-15px);

    }

}


/* =====================================
   Responsive
===================================== */

@media (max-width: 1200px) {


    .nav {

        gap:
            20px;

    }


    .laptop-wrapper {

        transform:

            scale(.85)
            perspective(1500px)
            rotateY(10deg)
            rotateX(3deg)
            rotateZ(-4deg);

    }


}


@media (max-width: 1000px) {


    .nav {

        display:
            none;

    }


    .menu-btn {

        display:
            block;

    }


    .hero-container {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .hero-content {

        margin:
            auto;

    }


    .hero-buttons,
    .hero-stats {

        justify-content:
            center;

    }


    .hero-visual {

        margin-top:
            30px;

        transform:
            scale(.9);

    }


    .features-container {

        grid-template-columns:
            repeat(3, 1fr);

        gap:
            30px;

    }


}


@media (max-width: 700px) {


    .header {

        height:
            75px;

    }


    .nav-btn {

        display:
            none;

    }


    .hero {

        padding-top:
            40px;

    }


    .hero h1 {

        font-size:
            10px;

    }


    .hero p {

        font-size:
            15px;

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .primary-btn,
    .secondary-btn {

        width:
            100%;

        justify-content:
            center;

    }


    .hero-stats {

        gap:
            20px;

    }


    .hero-visual {

        transform:
            scale(.55);

        height:
            400px;

        width:
            180%;

        margin-right:
            -40%;

    }


    .features-container {

        grid-template-columns:
            1fr 1fr;

    }


    .feature:not(:last-child)::after {

        display:
            none;

    }


}


@media (max-width: 450px) {


    .logo {

        font-size:
            22px;

    }


    .hero h1 {

        font-size:
            34px;

    }


    .hero-stats {

        gap:
            15px;

    }


    .hero-stats strong {

        font-size:
            17px;

    }


    .hero-stats span {

        font-size:
            10px;

    }


}

#websiteDesign{display:flex;background: #fff;padding:0 0 0 5%}
.imgwebsiteDesign{width:50%}
.imgwebsiteDesign img{width:100%;display:block;}
.textweb{width:50%;margin-top: 5%;margin-left: 3%;margin-right:3%}
.textweb h2{color:#000;font-size:2em;padding:2% 0 2% 0}
.textweb h3{color:#000;font-size:1.8em;padding:2% 0 2% 0}
.textweb p{font-size:1.4em;color:#000000be;padding:0 0 5% 0}
.textweb a{border:1px solid orange;padding:2% 5%;background-color:orange;border-radius:100px;color:#fff}

.textweb i{margin-right:1%}

#whyzidex{display:flex;background: linear-gradient(120deg, #030020, #050033, #080044, #050033, #07003D, #02001A);padding:5%;margin-bottom:3%}
.imgwhyzidex{width:50%;margin-top:2%}
.imgwhyzidex img{width:100%;display:block;margin-right: 10%;}
.textwhyzidex{width:50%;margin-top:8%;margin-right:4%}
.textwhyzidex h2{color:#ff9700;font-size:2em;padding:0% 0 5% 0}
.textwhyzidex p{font-size:1.2em;color:#ffffffa3;padding:0 0 5% 0}

#masterServicesWebsiteDesign{margin-bottom:1%;padding:1% 5%;padding-bottom:0;position:relative;max-height:600px !important}
#masterServicesWebsiteDesign h3{text-align: center;font-size: 2em;margin-bottom: 3%;margin-top: 3% !important}
#ServicesWebsiteDesign .grid{display:flex;}
#ServicesWebsiteDesign{margin:0 auto;}
figure.effect-selena {background: #fff;width:30%;border-radius:5px;text-align:center;margin:3%}


.center{margin:0 auto; width:100%}
.divProjectsAll{display:flex;flex-wrap:wrap;margin:1%}
.divProjectsAll div.divProjectsMain{width:48%;margin:1%;background:#fff;}
.divProjectsAll div.divProjectsMain img{width:100%;display:block;border-radius:5px 5px 0 0;max-height:500px}
.divProjectsAll div.divProjectsMain div.divTitle{background:#fff;padding:3%;position:relative;border-radius:0 0 5px 5px;}
.divProjectsAll div.divProjectsMain div.divTitle a{font-size:2em;color:#000;}
.divProjectsAll div.divProjectsMain div.divTitle p{font-size:.85em;color:#2a2a2a;opacity:.95;margin-top:2%;}
.divProjectsAll div.divProjectsMain div.divTitle span.nav{position:absolute;left:3%;top:50%;transform:translateY(-50%);z-index:100000;background:#fff;display:flex;padding:12px 20px;text-align:center;border-radius:100px;}
.divProjectsAll div.divProjectsMain div.divTitle span.nav i{font-size:1.3em;display:inline-block}

/* =====================================================
   NX7 SERVICES
   Completely isolated component
===================================================== */

.nx7-services {

  --nx7-text: #202638;
  --nx7-white: #ffffff;

  width: 100%;
  position: relative;

  overflow: clip;

  direction: rtl;

}


/* =====================================================
   HEADING
===================================================== */

.nx7-heading {

  width: 100%;

  text-align: center;

  padding: 40px 20px 20px;

}

.nx7-heading h2 {

  margin: 0;

  color: var(--nx7-text);

  font-size:
    clamp(20px, 3vw, 30px);

  font-weight: 700;

}



/* =====================================================
   SCROLL AREA
===================================================== */

.nx7-scroll-area {

  position: relative;

  height: 430vh;

}



/* =====================================================
   STICKY
===================================================== */

.nx7-sticky {

  position: sticky;

  top: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



/* =====================================================
   MAIN STAGE
===================================================== */

.nx7-stage {

  position: relative;

  width: min(90vw, 860px);

  margin: 0 auto;

}



/* =====================================================
   TOP SERVICES
===================================================== */

.nx7-top-services {

  position: relative;

  z-index: 20;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 12px;

  margin-bottom: 28px;

}



.nx7-service {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  white-space: nowrap;

  padding: 9px 14px;

  background: #ffffff;

  color: var(--nx7-text);

  border-radius: 999px;

  border: 1px solid
    rgba(20, 30, 60, .06);

  box-shadow:
    0 8px 20px
    rgba(20, 30, 60, .12);

  font-size:
    clamp(10px, 1.3vw, 13px);

  font-weight: 700;

  will-change: transform, opacity;

  transform-origin: center center;

}



.nx7-service-icon {

  width: 27px;

  height: 27px;

  flex: 0 0 27px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #ffffff;

}



.nx7-service-icon svg {

  width: 14px;

  height: 14px;

}



/* Colors */

.nx7-red {
  background: #e11d48;
}

.nx7-blue {
  background: #2563eb;
}

.nx7-green {
  background: #059669;
}

.nx7-orange {
  background: #d97706;
}



/* =====================================================
   LAPTOP
===================================================== */

.nx7-laptop {

  position: relative;

  width: 100%;

  aspect-ratio: 1632 / 1180;

}



/* =====================================================
   LAPTOP IMAGE
===================================================== */

.nx7-laptop-image1 {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

  z-index: 10;

  pointer-events: none;

  user-select: none;

}



/* =====================================================
   GLOW
===================================================== */

.nx7-glow {

  position: absolute;

  left: 10%;

  top: 8%;

  width: 80%;

  height: 70%;

  z-index: 0;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      closest-side,
      rgba(225, 29, 72, .35),
      transparent 70%
    );

  filter: blur(30px);

}



/* =====================================================
   LAPTOP SCREEN
===================================================== */

.nx7-screen {

  position: absolute;

  left: 15.93%;

  top: 14.41%;

  width: 68.2%;

  height: 59.24%;

  z-index: 5;

  overflow: hidden;

  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      #fbfcff,
      #eef1f8
    );

  opacity: 0;

}



/* =====================================================
   BROWSER BAR
===================================================== */

.nx7-browser {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 14%;

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 5%;

  padding: 0 6%;

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

  border-bottom:
    1px solid
    rgba(20,30,60,.06);

}



.nx7-browser-dots {

  display: flex;

  align-items: center;

  gap: 8px;

  direction: ltr;

}



.nx7-dot {

  display: block;

  width: 7px;

  height: 7px;

  border-radius: 50%;

}



.nx7-dot-red {
  background: #ef4444;
}

.nx7-dot-yellow {
  background: #f59e0b;
}

.nx7-dot-green {
  background: #22c55e;
}



.nx7-address {

  flex: 1;

  height: 38%;

  border-radius: 999px;

  background:
    rgba(20,30,60,.08);

}



/* =====================================================
   IMPORTANT
   SCREEN TRACK

   دو صفحه کاملاً زیر هم
===================================================== */

.nx7-screen-track {

  position: absolute;

  left: 0;

  top: 14%;

  width: 100%;

  height: 200%;

  will-change: transform;

}



/* =====================================================
   PANELS

   هر پنل دقیقاً به اندازه صفحه است
===================================================== */

.nx7-panel {

  position: relative;

  width: 100%;

  height: 50%;

}



/* =====================================================
   PANEL 1
===================================================== */

.nx7-panel-cards {

  display: flex;

  align-items: center;

  justify-content: center;

}



/* =====================================================
   CARD GRID

   دقیقاً 2 × 2
===================================================== */

.nx7-card-grid {

  width: 78%;

  height: 82%;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  grid-template-rows:
    repeat(2, 1fr);

  gap: 8%;

}



/* =====================================================
   CARD
===================================================== */

.nx7-card {

  min-width: 0;

  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8%;

  padding: 8%;

  text-align: center;

  background: #ffffff;

  border-radius: 16%;

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

  opacity: 0;

}



.nx7-card-icon {

  width: 25%;

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #ffffff;

}



.nx7-card-icon svg {

  width: 55%;

  height: 55%;

}



.nx7-card > span:last-child {

  color: var(--nx7-text);

  font-size:
    clamp(8px, 1vw, 10px);

  font-weight: 700;

  line-height: 1.3;

}



/* =====================================================
   PANEL 2
===================================================== */

.nx7-panel-final {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



/* =====================================================
   FINAL CONTENT
===================================================== */

.nx7-final-content {

  width: 80%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 7%;

}



.nx7-final-content h3 {

  margin: 0;

  color: var(--nx7-text);

  font-size:
    clamp(13px, 1.7vw, 18px);

  font-weight: 700;

}



.nx7-final-content p {

  margin: 0;

  max-width: 80%;

  color: #8b93a5;

  font-size:
    clamp(8px, 1.1vw, 11px);

  line-height: 1.8;

}



.nx7-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 3% 8%;

  border-radius: 999px;

  background: #e11d48;

  color: #ffffff;

  text-decoration: none;

  font-size:
    clamp(8px, 1.1vw, 11px);

  font-weight: 700;

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .nx7-stage {

    width: 96vw;

  }


  .nx7-top-services {

    gap: 5px;

    margin-bottom: 15px;

  }


  .nx7-service {

    padding: 6px 8px;

    gap: 4px;

    font-size: 8px;

  }


  .nx7-service-icon {

    width: 19px;

    height: 19px;

    flex-basis: 19px;

  }


  .nx7-service-icon svg {

    width: 10px;

    height: 10px;

  }


  .nx7-card-grid {

    width: 82%;

    height: 80%;

    gap: 7%;

  }

}










.projects {
  /* بخش خارج‌شده از کادر دیده نشه (clip برای اینکه اسکرول افقی ایجاد نشه) */
  overflow-x: hidden;
  overflow-x: clip;
  padding: 80px 0 100px;
  background: #0f1117;
  color: #fff;

  /* متغیرهای اندازه */
  --w: min(47vw, 820px);     /* عرض هر عکس */
  --h: 52vh;                 /* ارتفاع هر عکس */
  --g: 2vw;                  /* فاصله بین دو عکس */
}

.projects__title {
  margin: 0 0 60px;
  padding: 0 20px;
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 800;
}

.projects__rows {
  display: flex;
  flex-direction: column;
  gap: var(--g);
}

.projects__row {
  display: flex;
  justify-content: center;
  gap: var(--g);
  direction: ltr;            /* چپ و راست ثابت بمونه حتی در سایت فارسی */
}

.projects__img {
  width: var(--w);
  height: var(--h);
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  will-change: transform;
}

/* دکمه */
.projects__action {
  display: flex;
  justify-content: center;
  margin-top: 70px;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.projects__action.is-visible {
  opacity: 1;
  transform: none;
}

.projects__btn {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6c5ce7, #00cec9);
  color: #fff;
  font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.projects__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(108, 92, 231, .45);
}

/* ---------- ریسپانسیو ---------- */

/* لپ‌تاپ کوچک / تبلت افقی */
@media (max-width: 1024px) {
  .projects { --w: 47vw; --h: 44vh; }
}

/* تبلت عمودی */
@media (max-width: 768px) {
  .projects { --w: 47vw; --h: 36vh; --g: 3vw; padding: 60px 0 80px; }
  .projects__title { margin-bottom: 40px; }
  .projects__img { border-radius: 14px; }
}

/* موبایل */
@media (max-width: 480px) {
  .projects { --w: 47.5vw; --h: 28vh; --g: 2.5vw; }
  .projects__img { border-radius: 10px; }
  .projects__action { margin-top: 50px; }
  .projects__btn { padding: 14px 28px; }
}

/* موبایل در حالت افقی */
@media (max-height: 500px) and (orientation: landscape) {
  .projects { --h: 70vh; --w: 40vw; }
}

/* کاربرانی که انیمیشن کم می‌خوان */
@media (prefers-reduced-motion: reduce) {
  .projects__action { opacity: 1; transform: none; transition: none; }
}