@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb.woff2') format('woff2'),
        url('../fonts/IRANSansWeb.woff') format('woff'),
        url('../fonts/IRANSansWeb.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb_Medium.woff2') format('woff2'),
        url('../fonts/IRANSansWeb_Medium.woff') format('woff'),
        url('../fonts/IRANSansWeb_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb_Bold.woff2') format('woff2'),
        url('../fonts/IRANSansWeb_Bold.woff') format('woff'),
        url('../fonts/IRANSansWeb_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    direction: rtl;
    font-family: IRANSans;
    padding: 0;
    margin: 0;
    background-color: #111111;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.section {
    max-width: 1400px;
    width: 95%;
    margin: 0px auto;
}

.wa_sticky_header:is(.TopBar) {
    top: 55px;
}

.wa_sticky_header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    transition: 400ms ease-in-out;
    z-index: 8;
}

.wa_sticky_header:is(.wa_sticky) {
    transform: translateY(-190%);
}

.wa_sticky_header:is(.TopBar):is(.wa_sticky_show) {
    top: 10px;
}

.wa_sticky_header:is(.wa_sticky):is(.wa_sticky_show) {
    transform: translateY(0%);
}

.TopBar {
    background: #171619;
    box-shadow: 1.782px 0.908px 32.2px 2.8px rgba(214, 243, 69, 0.23);
    border-radius: 50px;
    border: 1px solid rgba(214, 243, 69, 0.4);
    padding: 0 50px 0px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.TopBar .Logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.TopBar .Logo img {
    width: 50px;
    height: auto;
}

.TopBar .Logo h1 {
    font-size: 22px;
    color: white;
    white-space: nowrap;
}

.Menu .main-nav {
    display: flex;
    flex-direction: row;
    /* shrinks when the menu has more items (editable in /admin/content) */
    gap: clamp(26px, 3.4vw, 60px);
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.Menu li {
    position: relative;
}

.Menu li a {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    color: #fff;
    padding: 35px 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.Menu li a:hover {
    color: #d6f345;
}

.Menu li a i {
    background: #d6f345;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: #171619;
    border-radius: 100px;
    font-size: 13px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu {
    left: 50%;
    top: 100%;
    z-index: 100;
    margin: 0px;
    padding: 15px 0px;
    height: auto;
    min-width: 200px;
    display: block;
    box-shadow: 1.782px 0.908px 32.2px 2.8px rgba(214, 243, 69, 0.23);
    border: 1px solid rgba(214, 243, 69, 0.4);
    border-radius: 8px;
    position: absolute;
    background: #171619;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform: translateX(-50%);
}

.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu li a {
    width: 100%;
    display: block;
    padding: 9px 20px;
    padding-left: 30px;
}

.Menu li:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scaleY(1);
}


.ActionBtn {
    background: #d6f345;
    font-weight: 600;
    border-radius: 100px;
    padding: 6px;
    padding-right: 6px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding-left: 30px;
    color: white;
    font-size: 20px;
    overflow: hidden;
    transition: 0.2s;
    width: fit-content;
    font-family: IRANSans;
    border: none;
}

.ActionBtn .icon {
    flex: 0 0 auto;
    width: 53px;
    height: 53px;
    background: #171619;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: 0.2s ease;
}

.ActionBtn .text {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #171619;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.ActionBtn .text:before {
    top: 0;
    left: 0;
    display: block;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    position: relative;
    content: attr(data-front);
    transform: translateY(0);
}

.ActionBtn .text:after {
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    position: absolute;
    content: attr(data-back);
    transform: translateY(100%);
}

.ActionBtn .icon i {
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.ActionBtn .icon i:nth-child(1) {
    position: absolute;
    transform: translateX(50px);
}

.ActionBtn .icon i:nth-child(2) {
    position: relative;
}

.ActionBtn:hover .icon i:nth-child(1) {
    transform: translateX(0px);
}

.ActionBtn:hover .icon i:nth-child(2) {
    transform: translateX(-50px);
}

.ActionBtn:hover .text::after {
    transform: translateY(0%);
}

.ActionBtn:hover .text::before {
    transform: translateY(-100%);
}

.ActionBtn:is(.has-v2) {
    background: #282828;
    font-size: 16px;
}

.ActionBtn:is(.has-v2) .icon {
    width: 42px;
    height: 42px;
    background: #d6f345;
    color: #171619;
    font-size: 16px;
}

.ActionBtn:is(.has-v2) .text {
    color: #fff;
}

.ActionBtn:is(.has-v2):hover {
    background: #d6f345;
}

.ActionBtn:is(.has-v2):hover .icon {
    background: #000;
    color: #d6f345;
}

.ActionBtn:is(.has-v2):hover .text {
    color: #000;
}

.Hero {
    position: relative;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    perspective: 2000px;
    transform-style: preserve-3d;
    overflow: hidden;
}

.hero-bg-img img {
    animation: hero-bg-img 20s linear infinite;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

@keyframes hero-bg-img {
    0% {
        transform-origin: 100% 50%;
        transform: scaleX(1.1);
    }

    50% {
        transform-origin: 0% 50%;
        transform: scaleX(1);
    }

    100% {
        transform-origin: 100% 50%;
        transform: scaleX(1.1);
    }
}

.hero-container {
    max-width: 1300px;
    margin: 0px auto;
    padding-inline: 15px;
}

.hero-content {
    padding-top: 180px;
    padding-bottom: 320px;
}

.hero-content h1 {
    font-size: 100px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 0;
    letter-spacing: -0.02em;
    padding-bottom: 15px;
    margin-left: 95px;
    overflow: hidden;
}

.hero-content h2 {
    font-size: 20px;
    font-weight: 600;
    color: #d6f345;
    margin-left: 195px;
    margin-top: -10px;
    font-size: 18px;
    line-height: 1.666;
    font-weight: 400;
    margin-bottom: 0;
    overflow: hidden;

}

.hero-content h1 span {
    transform: translateY(120%);
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
    display: inline-block;
}

.Hero:is(.active) .hero-content h1 span {
    transform: translateY(0);
    transition-delay: 0.5s;
}

.hero-content h2 span {
    transform: translateY(100%);
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
    display: inline-block;
}

.Hero:is(.active) .hero-content h2 span {
    transform: translateY(0);
    transition-delay: 0.6s;
}



.hero-content-2 {
    position: absolute;
    bottom: 95px;
    left: 0;
    width: 100%;
    z-index: 2;
}

.hero-content-2-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    overflow: hidden;
}


.Hero:is(.active) .plybtn-wrap {
    transform: translateY(0);
    transition-delay: 1.3s;
}

.plybtn-wrap {
    transform: translateY(100%);
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.hero-plybtn {
    flex: 0 0 auto;
    width: 115px;
    height: 115px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

.hero-plybtn:after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(4px);
    z-index: -1;
    border-radius: 50%;
    transform: scale(0.7);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.hero-plybtn .bg-elm {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    border-radius: 50%;
    overflow: hidden;
}

.hero-plybtn .bg-elm video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-plybtn:hover {
    color: #171619;
}

.hero-plybtn:hover:after {
    background: #d6f345;
    transform: scale(0.5);
}

.hero-disc {
    max-width: 520px;
    font-size: 15px;
    color: #e3e3e3;
    transform: translateY(120%);
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.Hero:is(.active) .hero-disc {
    transform: translateY(0);
    transition-delay: 1.2s;
}

.Hero-ActionBtn {
    margin-right: 40px;
    transform: translateY(160%);
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.Hero:is(.active) .Hero-ActionBtn {
    transform: translateY(0);
    transition-delay: 1.4s;
}

.hero-main-img {
    text-align: left;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -2;
    display: flex;
    align-items: start;
    justify-content: end;
    height: 100%;
    transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform: translateY(100%);
}

.hero-main-img img {
    height: 100%;
    margin-left: 1vw;
}

.hero-main-img img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: color;
    z-index: 1;
    opacity: 0;
}

.Hero:is(.active) .hero-main-img {
    transform: translateY(0);
    transition-delay: 1s;
}

.Hero:hover .hero-main-img img:nth-child(2) {
    opacity: 1;
    /* animation: hero-img-filter 3s linear infinite; */
}

/* @keyframes hero-img-filter {
  0% {
    filter: sepia(1) hue-rotate(0deg) saturate(300%);
  }
  5% {
    filter: sepia(1) hue-rotate(10deg) saturate(300%);
  }
  10% {
    filter: sepia(1) hue-rotate(20deg) saturate(300%);
  }
  15% {
    filter: sepia(1) hue-rotate(30deg) saturate(300%);
  }
  20% {
    filter: sepia(1) hue-rotate(40deg) saturate(300%);
  }
  25% {
    filter: sepia(1) hue-rotate(50deg) saturate(300%);
  }
  30% {
    filter: sepia(1) hue-rotate(60deg) saturate(300%);
  }
  35% {
    filter: sepia(1) hue-rotate(70deg) saturate(300%);
  }
  40% {
    filter: sepia(1) hue-rotate(80deg) saturate(300%);
  }
  45% {
    filter: sepia(1) hue-rotate(90deg) saturate(300%);
  }
  50% {
    filter: sepia(1) hue-rotate(100deg) saturate(300%);
  }
  55% {
    filter: sepia(1) hue-rotate(110deg) saturate(300%);
  }
  60% {
    filter: sepia(1) hue-rotate(120deg) saturate(300%);
  }
  65% {
    filter: sepia(1) hue-rotate(130deg) saturate(300%);
  }
  70% {
    filter: sepia(1) hue-rotate(140deg) saturate(300%);
  }
  75% {
    filter: sepia(1) hue-rotate(150deg) saturate(300%);
  }
  80% {
    filter: sepia(1) hue-rotate(160deg) saturate(300%);
  }
  85% {
    filter: sepia(1) hue-rotate(170deg) saturate(300%);
  }
  90% {
    filter: sepia(1) hue-rotate(180deg) saturate(300%);
  }
  95% {
    filter: sepia(1) hue-rotate(190deg) saturate(300%);
  }
  100% {
    filter: sepia(1) hue-rotate(200deg) saturate(300%);
  }
} */


.Hero canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-social-position {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    z-index: 2;
}

.hero-social-position::after {
    content: "";
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 60px solid #d6f345;
    position: absolute;
    top: 50%;
    left: -180px;
    transform: translateY(-50%);
    z-index: -1;
    box-sizing: border-box;
}

.hero-social-border {
    width: 430px;
    height: 430px;
    border: 3px solid #7c7c7c;
    border-radius: 50%;
    position: absolute;
    left: -210px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    animation: hero-social-border 10s linear infinite;
}

@keyframes hero-social-border {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

.hero-social-border::after {
    content: "";
    width: 22px;
    height: 22px;
    background: #d6f345;
    border-radius: 50%;
    box-shadow: 0px 3px 5.52px 0.48px rgba(214, 243, 69, 0.46);
    position: absolute;
    left: -11px;
    top: 47%;
}

.hero-social-border::before {
    content: "";
    width: 22px;
    height: 22px;
    background: #d6f345;
    border-radius: 50%;
    box-shadow: 0px 3px 5.52px 0.48px rgba(214, 243, 69, 0.46);
    position: absolute;
    right: -11px;
    top: 47%;
}

.hero-social-link {
    /* a point on the ring's center: turning it rolls the icons along the ring */
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform: rotate(179deg);
    transition: 1.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.hero-social-link:is(.active) {
    transform: rotate(0deg);
    transition-delay: 1s;
}

/* each icon sits on the middle of the lime band (radius 150px), from -60° to 60° */
.hero-social-link .link-elm {
    --a: 0deg;
    position: absolute;
    top: -24px;
    left: -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #000;
    font-size: 35px;
    line-height: 1;
    transform: rotate(var(--a)) translateX(150px) rotate(calc(-1 * var(--a)));
}

.hero-social-link .link-elm:nth-child(1) {
    --a: -60deg;
}

.hero-social-link .link-elm:nth-child(2) {
    --a: -30deg;
}

.hero-social-link .link-elm:nth-child(4) {
    --a: 30deg;
}

.hero-social-link .link-elm:nth-child(5) {
    --a: 60deg;
}

.hero-social-link .link-elm i {
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.hero-social-link .link-elm:hover i {
    transform: scale(0.7);
}

.partner-logo-marquee {
    direction: ltr;
}

.partner-area {
    background-size: 100% 100%;
    padding: 50px 0;
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
}

.partner-border {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);
    width: 70%;
    height: 1px;
    opacity: 0.2;
}

.partner-wrap {
    display: flex;
    align-items: center;
    gap: 40px;
}

.partner-title {
    line-height: 1.666;
    font-weight: 400;
    margin-bottom: 0;
    font-size: 16px;
    max-width: 171px;
    color: #cacaca;
    flex: 0 0 auto;
    margin: 0px;
}

.partner-logo-mask {
    overflow: hidden;
}

.partner-logo-wrap {
    display: flex;
    align-items: center;
    gap: 75px;
    margin-right: 75px;
    height: 53px;
}

.partner-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.partner-logo img {
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.partner-logo img:nth-child(1) {
    position: relative;
}

.partner-logo img:nth-child(2) {
    position: absolute;
    transform: translateY(102%);
    filter: brightness(0) saturate(100%) invert(89%) sepia(33%) saturate(1188%) hue-rotate(26deg) brightness(98%) contrast(89%);
}

.partner-logo img:nth-child(3) {
    position: absolute;
    transform: translateY(300%);
}

.partner-logo:hover img:nth-child(1) {
    transform: translateY(-300%);
}

.partner-logo:hover img:nth-child(2) {
    transform: translateY(-100%);
}

.partner-logo:hover img:nth-child(3) {
    transform: translateY(0%);
}

.about-area {
    padding-top: 80px;
    position: relative;
}

.about-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    text-align: center;
}

.about-line-border,
.about-line-border2 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);
    width: 90%;
    height: 1px;
    opacity: 0.15;
    margin-left: auto;
    margin-right: auto;
}

.about-line-plus,
.about-line-plus2 {
    display: block;
    color: #d6f345;
    line-height: 1;
    font-size: 20px;
    margin-top: -12px;
}

.about-line-plus .plus,
.about-line-plus2 .plus {
    display: block;
}


.about-line:is(.has-v2) {
    top: unset;
    bottom: -9px;
}


.Firefly-ani::after {
    content: "";
    width: 100px;
    height: 100px;
    background: #d6f345;
    position: absolute;
    top: 0px;
    left: -30px;
    filter: blur(60px);
    animation: Firefly-ani-after 2s linear infinite;
}

@keyframes Firefly-ani-after {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.Firefly-ani {
    display: inline-block;
    width: 290px;
    height: 660px;
    padding: 50px 20px;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}

.Firefly-ani:is(.has-right-side) {
    left: unset;
    right: 0px;
    transform: scaleX(-1);
}

.about-wrap {
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: 60px;
}

.about-left {
    position: relative;
    padding-bottom: 80px;
    min-height: 1180px;
}

.about-left-content {
    position: sticky;
    top: 80px;
}

.about-sec-title {
    margin-bottom: 30px;
}

.subtitle {
    color: #838383;
    font-size: 18px;
    font-weight: 500;
    display: inline-flex;
    gap: 13px;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 20px;
}

.subtitle .dot {
    width: 11px;
    height: 11px;
    background: #d6f345;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0px 3px 5.52px 0.48px rgba(214, 243, 69, 0.46);
    animation: subtitleDot1kf 2s linear infinite;
}

@keyframes subtitleDot1kf {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}


.sec-title {
    color: #fff;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    font-size: 55px;
}

.wa_bg_position div {
    background-size: 200% 100%;
    background-position-x: 0%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(to left, rgb(255, 255, 255) 50%, rgba(104, 104, 104, 0.2) 50%);
    padding-bottom: 7px;
}

p {
    font-size: 18px;
    line-height: 1.666;
    font-weight: 400;
    color: #b5b5b5;
    margin-bottom: 0;
    text-align: justify;
}

p b {
    color: #8EBC3F;
}

.about-sec-title .sec-disc {
    margin-top: 30px;
}

.about-left .inner-div {
    display: flex;
    align-items: center;
    gap: 33px;
    flex-wrap: wrap;
}


.about-left .inner-div .ActionBtn {
    background: #d6f345;
    outline: 4px solid rgba(255, 255, 255, 0.2);
}

.about-left .inner-div .ActionBtn .text {
    color: #000;
}

.about-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.about-author-img {
    display: flex;
    align-items: center;
}

.about-author-img img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.about-author-content .author-name {
    font-size: 18px;
}

.about-author-content .author-dg {
    font-size: 14px;
    margin-top: 3px;
}

.about-author-content h5 {
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.about-left-bg-shape {
    width: 62%;
    position: absolute;
    right: 0;
    bottom: 10%;
    z-index: -1;
}

.about-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 80px;
    align-self: start;
}

.about-card-wrap .a1_card_trigger_elm {
    position: sticky;
    top: 100px;
}

.about-card {
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(0, 0, 0) 100%);
    text-align: center;
    padding: 30px 40px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.about-card::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #d6f345;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform-origin: bottom;
}

.about-card .icon {
    font-size: 44px;
    color: #d6f345;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.about-card .title {
    font-size: 30px;
    margin-top: 13px;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

.about-card .title a {
    color: inherit;
}

.about-card .disc {
    font-size: 16px;
    color: #9e9e9e;
    margin-top: 7px;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.about-card:hover::after {
    transform: scaleY(1);
}

.about-card:hover .icon,
.about-card:hover .title,
.about-card:hover .disc {
    color: #000;
}

.services-area {
    padding-bottom: 100px;
    padding-top: 100px;
    position: relative;
}

.services-sec-title {
    display: flex;
    padding: 0 50px;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.services-sec-title .subtitle {
    flex: 0 0 auto;
}

.services-sec-title .sec-title {
    max-width: 650px;
    font-size: 35px;
}

.services-sec-title .sec-disc {
    max-width: 490px;
}

.services-wrap {
    display: grid;
    grid-template-columns: 1fr 2.1fr;
    gap: 10px;
}

.services-tabs-btn-scrollbar {
    height: 544px;
    overflow: hidden;
    border-right: 3px solid #8EBC3F;
}

.services-tabs-btn .nav-link:is(.active),
.services-tabs-btn .nav-link:hover {
    background: #050505;
    color: #fff;
}

.services-tabs-btn .nav-link {
    background: transparent;
    border-radius: 20px;
    font-size: 22px;
    padding: 38px 44px;
    width: 100%;
    text-align: right;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    line-height: 1.5;
    font-weight: 600;
    color: white;
    font-family: IRANSans;
    outline: none;
    border: none;
    cursor: pointer;
}

.services-tabs-pane {
    display: grid;
}

.services-tabs-pane .tab-pane {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.services-tabs-pane .tab-pane.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.services-tabs-pane-single {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    perspective: 2000px;
}

.services-tabs-pane .tab-pane.show .services-tabs-pane-single .content-wrap {
    transform: rotateY(0deg);
}

.services-tabs-pane-single .content-wrap {
    background: #050505;
    border-radius: 20px;
    padding: 60px 45px;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform-origin: 100% 50%;
    transform: rotateY(-90deg);
    position: relative;
    z-index: 2;
}

.services-tabs-pane-single .item-icon {
    font-size: 80px;
    color: #b5b5b5;
}

.services-tabs-pane-single .disc {
    margin-top: 32px;
}

.services-tabs-pane-single .features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0px;
    margin-top: 33px;
    margin-bottom: 40px;
    padding: 0px;
    list-style: none;
}

.services-tabs-pane-single .features-list li {
    font-size: 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
}

.services-tabs-pane-single .item-img {
    height: 544px;
    border-radius: 20px;
    filter: grayscale(1);
    transform-origin: 0% 50%;
    transform: translateX(100%);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    position: relative;
    z-index: 1;
    opacity: 0;
}

.services-tabs-pane .tab-pane:is(.show) .services-tabs-pane-single .item-img {
    transform: translateX(0);
    transition-delay: 0.2s;
    opacity: 1;
    overflow: hidden;
}

.services-tabs-pane-single .item-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.gravity-section {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 5px;
    overflow: hidden;
    background: #111111;
    border-bottom: 1px solid #22242c;
    cursor: grab;
}

.gravity-section:active {
    cursor: grabbing;
}

#gravity-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-y;
}

.hint {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #888;
    pointer-events: none;
    z-index: 5;
}

.gravitySectionArea {
    padding-top: 100px;
}

.gravitySectionArea .sec-title {
    font-size: 20px;
    max-width: 800px;
    margin: 0px auto;
}

.portfolio-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-top: 90px;
}

.portfolio-top {
    background-size: unset;
    position: relative;
    z-index: 1;
    padding-bottom: 110px;
    background-position: center center;
    background-repeat: no-repeat;
}

.portfolio-top-wrap {
    max-width: 610px;
}

.portfolio-top .sec-title {
    font-size: 18px;
    line-height: 1.66;
}

.portfolio-sec-title {
    margin-bottom: 30px;
}

.portfolio-top-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
}

.portfolio-top-features-single {
    text-align: center;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border-radius: 20px;
    padding: 25px 20px;
    position: relative;
    z-index: 1;
}

.portfolio-top-features-single::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #d6f345;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform-origin: bottom;
}

.portfolio-top-features-single .title {
    font-size: 40px;
    font-weight: 700;
    color: #838383;
    line-height: 1;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    margin: 0;
}

.portfolio-top-features-single .disc {
    margin-top: 12px;
    line-height: 1.3;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    text-align: center;
}

.portfolio-top-features-single:hover::after {
    transform: scaleY(1);
}

.portfolio-top-features-single:hover .title,
.portfolio-top-features-single:hover .disc {
    color: #000;
}

.portfolio-sec-title-2 {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 65px;
}

.portfolio-sec-title-2 .left {
    width: 100%;
}

.portfolio-sec-title-2 h2 {
    font-size: 30px;
}

.portfolio-sec-title-2 .sec-disc {
    margin: 0px;
}

.portfolio-item-wrap {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr 1fr;
}

.portfolio-card {
    height: 420px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.portfolio-card::after {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0%;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.portfolio-card img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.portfolio-card .card-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1;
    background: #fff;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 43px;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: #b6b6b6;
}

.portfolio-card .card-btn span {
    transition: unset;
    display: block;
}

.portfolio-card .card-categories {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 1;
}

.portfolio-card .card-categories p {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0px;
}

.portfolio-card .card-categories .link-elm {
    background: #323232;
    border-radius: 100px;
    font-size: 13px;
    padding: 5px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: #fff;
    font-weight: 500;
}

.portfolio-card:hover::after {
    opacity: 39%;
}

.portfolio-card:hover .card-btn {
    transform: translate(-50%, -50%) scale(1);
}

.portfolio-card .card-btn:hover {
    background: #d6f345;
    color: #000;
}

.portfolio-card .card-btn i {
    animation: blink 1.4s infinite;
    transform-origin: 50% 50%;
}

@keyframes blink {
    90% {
        transform: none;
        animation-timing-function: ease-in;
    }

    93% {
        transform: translateY(15px) scaleY(0);
    }

    100% {
        animation-timing-function: ease-out;
    }
}

.portfolio-card .card-categories .link-elm:hover {
    color: #d6f345;
}

.portfolio-all-btn {
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: center;
    margin-top: 25px;
}

.portfolio-all-plus {
    color: #d6f345;
    font-weight: 600;
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 1;
}

.portfolio-all-plus::after {
    content: "";
    width: 99.1%;
    height: 1px;
    background: #FFF;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 5%, rgb(255, 255, 255) 100%);
    position: absolute;
    top: 15px;
    left: 11px;
    opacity: 0.1;
}

.portfolio-all-btn .ActionBtn {
    font-size: 16px;
    padding-right: 30px;
}

.bg-shadow {
    width: 100px;
    height: 100px;
    background: #d6f345;
    filter: blur(60px);
    animation: Firefly-ani-after 2s linear infinite;
}

.portfolio-bg-shadow-1 {
    position: absolute;
    bottom: 14%;
    left: -30px;
    z-index: -1;
}

.portfolio-bg-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 50%;
    z-index: -1;
}

.testimonial-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-top: 65px;
}

.testimonial-sec-title {
    display: flex;
    align-items: end;
    gap: 40px;
    justify-content: space-between;
}

.testimonial-sec-title .left {
    max-width: 600px;
}

.testimonial-sec-title .right {
    text-align: right;
}

.testimonial-sec-title h2 {
    font-size: 25px;
}

.testimonial-wrap {
    height: 540px;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.testimonial-preview-slider .swiper-wrapper {
    max-width: 1050px;
    height: 1050px;
    position: relative;
    margin: 0 auto;
}

.testimonial-preview-slider .swiper-wrapper .swiper-slide {
    width: auto;
    position: absolute;
    width: 100px;
    height: 100px;
}

.testimonial-preview-slider-item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 8px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    cursor: pointer;
    overflow: hidden;
}

.testimonial-preview-slider-item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.testimonial-main-slider {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: 430px;
    overflow: hidden;
}

.testimonial-main-slider-single {
    text-align: center;
}

.testimonial-main-slider-single .icon {
    font-size: 70px;
    color: #d6f345;
}

.testimonial-main-slider-single .comment {
    color: #fff;
    font-weight: 500;
    line-height: 36px;
    margin-top: 10px;
}

.testimonial-main-slider-single .line {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);
    width: 90%;
    height: 1px;
    opacity: 0.2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide .testimonial-main-slider-single .line {
    transform: scaleX(0);
    transition: 1s;
}

.testimonial-main-slider-single .choose-rating {
    margin-top: 18px;
}

.choose-rating .rating-icon {
    display: inline-flex;
    gap: 7px;
    font-size: 18px;
    color: #d6f345;
}

.testimonial-main-slider-single .author-name {
    font-size: 15px;
    margin-top: 10px;
    text-align: center;
}

.testimonial-bg-blur {
    height: 140px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    opacity: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0);
    -webkit-mask-image: linear-gradient(to top, #000 10%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, #000 10%, rgba(0, 0, 0, 0) 100%);
}

.testimonial-preview-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-thumb-active) .testimonial-preview-slider-item {
    border-color: #d6f345;
    box-shadow: -1.526px 7.853px 59px 0px rgba(214, 243, 69, 0.6);
}


.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .icon {
    animation-delay: 0.5s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .comment {
    animation-delay: 0.7s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .author-name {
    animation-delay: 0.9s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .icon,
.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .comment,
.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .author-name {
    animation-name: fadeInUp;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.55, 0.085, 0, 0.99);
    animation-fill-mode: backwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .line {
    transform: scaleX(1);
    transition-delay: 0.7s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .rating-icon i:nth-child(1) {
    transition-delay: 0.4s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .rating-icon i:nth-child(2) {
    transition-delay: 0.5s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .rating-icon i:nth-child(3) {
    transition-delay: 0.6s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .rating-icon i:nth-child(4) {
    transition-delay: 0.7s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .rating-icon i:nth-child(5) {
    transition-delay: 0.8s;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .testimonial-main-slider-single .rating-icon i {
    opacity: 1;
}

.testimonial-main-slider .swiper-wrapper .swiper-slide .testimonial-main-slider-single .rating-icon i {
    opacity: 0;
    transition: 0.5s;
    transition-delay: 0s;
}

.steps-area {
    background: #000;
    position: relative;
    z-index: 1;
    padding-bottom: 130px;
    padding-top: 95px;
}

.steps-sec-title {
    max-width: 510px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 55px;
    text-align: center !important;
}

.steps-sec-title .sec-title {
    margin-top: 10px;
}

.steps-sec-title .sec-title div {
    text-align: center !important;
    font-size: 32px;
}

.steps-wrap {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.steps-card {
    max-width: 545px;
    display: flex;
    gap: 40px;
    align-items: stretch;
    perspective: 2000px;
    transform-style: preserve-3d;
}

.steps-card:nth-child(2n+1) {
    margin-right: auto;
    margin-left: 5px;
}

.steps-card:nth-child(2n) {
    flex-direction: row-reverse;
}

.steps-card .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.steps-card .number {
    width: 45px;
    height: 45px;
    background: #111111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex: 0 0 auto;
    line-height: 1.5;
    margin: 0px;
}

.steps-card .number-line {
    width: 7px;
    height: 100%;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none;
}

.steps-card .number-line-fill {
    width: 100%;
    height: 100%;
    background: #d6f345;
    border-radius: 0 0 20px 20px;
    transform: scaleY(0);
    transform-origin: top;
}

.steps-card .content {
    background: #111111;
    border-radius: 20px;
    padding: 50px 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin: 50px 0;
    padding-top: 75px;
    position: relative;
    z-index: 1;
}

.steps-card:nth-child(2n+1) .content {
    transform-origin: 100% 50%;
    transform: rotateY(-45deg);
}

.steps-card:nth-child(2n) .content {
    transform-origin: 0% 50%;
    transform: rotateY(45deg);
}

.steps-card .content .date {
    position: absolute;
    left: 15px;
    top: 20px;
    background: #000;
    border-radius: 8px;
    padding: 3px 20px;
    font-size: 16px;
}

.steps-card .content .title {
    display: flex;
    gap: 30px;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.steps-card .content .disc {
    margin-top: 14px;
    opacity: 53%;
}

.steps-card .content .title span {
    opacity: 0.3;
}

.team-area {
    position: relative;
    z-index: 1;
    padding-top: 115px;
}

.team-sec-title {
    display: flex;
    gap: 40px;
    align-items: end;
    margin-bottom: 100px;
}

.team-sec-title .left {
    width: 100%;
}

.team-sec-title .sec-disc {
    max-width: 550px;
}

.team-sec-title h2 {
    font-size: 30px;
}

.team-slider {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.team-slider .swiper-wrapper .swiper-slide {
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform: translateY(200px) rotate(-20deg);
    opacity: 0;
    transform-origin: 100% 0%;
}

.team-slider .swiper-wrapper .swiper-slide.swiper-slide-prev {
    transform: translateX(-40%) rotate(12deg);
    transform-origin: 40% 0%;
    opacity: 1;
}

.team-slider .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1;
    z-index: 2;
    transform: translateX(0) translateY(0) rotate(0deg);
}

.team-slider .swiper-wrapper .swiper-slide.swiper-slide-next {
    transform: translateX(40%) rotate(-12deg);
    transform-origin: 70% 0%;
    opacity: 1;
}

.team-member {
    max-width: 388px;
    border-radius: 30px;
    height: 550px;
    transition: transform 0.5s, background 0.5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.team-member img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.team-member .toggle-btn {
    width: 52px;
    height: 52px;
    background: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 20px;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    cursor: pointer;
}

.team-member .toggle-btn i {
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.team-member .content-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
    padding: 20px 30px;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.team-member .member-name {
    font-size: 23px;
    margin: 0px;
}

.team-member .member-name a,
.team-member .member-name span {
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.team-member .member-name:hover a,
.team-member .member-name:hover span {
    color: #d6f345;
}

.team-member .member-dg {
    font-size: 16px;
    margin: 0px;
}

.team-member .content-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(56px);
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    border-radius: 30px;
}

.team-member .social-link {
    display: flex;
    gap: 14px;
    font-size: 18px;
    color: #b5b5b5;
    margin-top: 15px;
}

.team-member .social-link .link-elm {
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: rgb(181, 181, 181);
}

.team-member .hr-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 1px;
    opacity: 0.3;
    margin-top: 24px;
}

.team-member .disc {
    margin-top: 30px;
    margin-bottom: 30px;
}

.team-member .member-btn {
    margin-top: auto;
}

.team-member .ActionBtn {
    background: #000;
}

.team-member:is(.active) {
    box-shadow: 0px 0px 13px 0px rgba(11, 11, 11, 0.24);
}

.team-member:is(.active) .toggle-btn {
    background: #d6f345;
}

.team-member:is(.active) .toggle-btn i {
    transform: rotate(225deg);
}

.team-member:is(.active) .content-1 {
    transform: translateY(-100%);
    opacity: 0;
}

.team-member:is(.active) .content-2 {
    transform: translateY(0%);
}

.team-member .social-link .link-elm:hover {
    color: #d6f345;
}

.slider-btn-1 {
    overflow: hidden;
    width: 66px;
    height: 66px;
    background: #1f1f1f;
    color: #333;
    background-color: #f7f7f7;
    border-radius: 50%;
    font-size: 25px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
    flex: 0 0 auto;
}

.team-slider-btn-1 {
    position: absolute;
    top: 45%;
    right: 0px;
    z-index: 2;
}

.team-slider-btn-2 {
    position: absolute;
    top: 45%;
    left: 0px;
    z-index: 2;
}

.slider-btn-1 .icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slider-btn-1:hover {
    color: #fff;
    background-color: #333;
}

.slider-btn-1:is(.has-left) .icon i:nth-child(1) {
    transform: translateX(50px);
}

.slider-btn-1:is(.has-left) .icon i {
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.slider-btn-1 .icon i:nth-child(1) {
    position: absolute;
    transform: translateX(-50px);
}

.slider-btn-1 .icon i {
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.slider-btn-1:hover .icon i:nth-child(1) {
    transform: translateX(0);
}

.slider-btn-1:hover .icon i:nth-child(2) {
    transform: translateX(50px);
}


.slider-btn-1:is(.has-left):hover .icon i:nth-child(1) {
    transform: translateX(0%);
}

.slider-btn-1:is(.has-left):hover .icon i:nth-child(2) {
    transform: translateX(-50px);
}

.team-bg-title {
    text-align: center;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -3;
    height: 100%;
    overflow: hidden;
}

.team-bg-title .title-elm {
    font-size: 22em;
    line-height: 1.2;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(69, 69, 69, 0.77) 0%, rgb(0, 0, 0) 100%);
    background-clip: border-box;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0px;
}

.team-bg-shadow-1 {
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: -30px;
    bottom: 30%;
    z-index: -2;
}

.faqs-area {
    position: relative;
    z-index: 1;
    padding-bottom: 110px;
    padding-top: 105px;
}

.faqs-container {
    max-width: 1730px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.faqs-wrap {
    display: grid;
    gap: 70px;
    grid-template-columns: 1fr 1.36fr;
}

.faqs-left {
    position: relative;
    z-index: 1;
}

.faqs-contact {
    background: #000;
    border-radius: 30px;
    padding: 50px 40px;
}

.faqs-contact .response {
    display: flex;
    color: #fff;
    font-size: 16px;
    align-items: center;
    gap: 10px;
}

.faqs-contact .response .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d6f345;
}

.faqs-contact .title {
    font-weight: 700;
    margin-top: 8px;
    color: #fff;
    font-size: 26px;
}

.faqs-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faqs-contact-form input,
.faqs-contact-form textarea {
    height: 50px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    padding: 0 15px;
    font-size: 16px;
    margin-bottom: 15px;
    color: #b5b5b5;
    outline: none;
    font-family: IRANSans;
}

.tx-contactForm input {
    max-width: 100% !important;
}

.faqs-contact-form textarea {
    resize: vertical;
    height: 110px;
    padding-top: 11px;
}

.team-faqs-title {
    margin-bottom: 40px;
}

.faqs-tabs-btn {
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 1;
}

.faqs-tabs-btn .nav-link {
    color: #393939;
    background: transparent;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 10px;
    position: relative;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    cursor: pointer;
    border: none;
    font-family: IRANSans;
}

.faqs-tabs-btn .nav-link::after {
    content: "";
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -2px;
    left: 0;
    background: #d6f345;
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    transform: scaleX(0);
}

.faqs-tabs-btn .nav-link:is(.active)::after {
    transform: scaleX(1);
}

.faqs-tabs-btn .nav-link:is(.active) {
    color: #d6f345;
}

.faqs-tabs-btn .nav-link:hover {
    color: #d6f345;
}

.faqs-tabs-btn-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 85%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 1px;
    opacity: 0.2;
    position: absolute;
    bottom: 0;
    left: 0;
}

.faqs-tabs-pane {
    margin-top: 40px;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-item {
    background-color: #050505;
    border-radius: 20px;
    border: 1px solid transparent;
}

.accordion-item:is(.active) {
    border-color: rgba(255, 255, 255, 0.15);
}


.accordion-item .item-title {
    border-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    outline: none;
    font-size: 18px;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 26px 25px;
    text-align: right;
    transition: 0.2s;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    color: white;
    font-family: IRANSans;
}

.accordion-item .item-title:is(:not(.collapsed)) {
    border-color: rgba(255, 255, 255, 0.1);
}

.accordion-item .item-title .text {
    opacity: 0.4;
}


.accordion-item .item-title .icon {
    width: 38px;
    height: 38px;
    background: #3d3d3d;
    font-size: 16px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: auto;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.accordion-item .item-title:is(:not(.collapsed)) .icon {
    background: #d6f345;
    color: #000;
}

.accordion-item .item-title:is(:not(.collapsed)) .icon i {
    transform: rotate(135deg);
}

.accordion-collapse {
    display: none;
}

.accordion-collapse.show {
    display: block;
}

.accordion-collapse.collapsing {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

.accordion-item .item-disc {
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 25px;
    color: #8c8a8a;
    max-width: 910px;
    padding-top: 25px;
    margin: 0;
}

.team-faqs-title .sec-title {
    margin: 0;
    font-size: 35px;
}

.accordion-item .item-title .icon i {
    transition: 0.5s;
}

.faqs-tabs-pane .tab-pane {
    display: none;
    opacity: 0;
}

.faqs-tabs-pane .tab-pane.active {
    display: block;
    opacity: 1;
    animation: faqTabFade 2s ease;
}

@keyframes faqTabFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.accordion-item .item-title:is(.collapsed):hover {
    color: #d6f345;
}

.blog-area {
    background-color: #050505;
    position: relative;
    z-index: 1;
    padding-bottom: 95px;
    padding-top: 110px;
}

.blog-sec-title {
    display: flex;
    align-items: end;
    gap: 40px;
    margin-bottom: 50px;
}

.blog-sec-title h2 {
    font-size: 30px;
}

.blog-sec-title .left {
    max-width: 610px;
    width: 90%;
}

.blog-sec-title .sec-disc {
    max-width: 570px;
}

.blog-wrap {
    display: flex;
    gap: 40px;
}

.blog-item {
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    flex-grow: 1;
    width: 100%;
}

.blog-item:nth-child(1) {
    transform-origin: top right;
}

.blog-item .item-img {
    border-radius: 30px;
    margin-bottom: 30px;
    width: 100%;
    height: 305px;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.blog-item .item-img::after {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0%;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.blog-item .item-img img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.blog-item .item-img .card-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1;
    background: #fff;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: #b6b6b6;
}

.blog-item .item-img .card-btn span {
    transition: unset;
    display: block !important;
}

.blog-item .item-img .card-btn i {
    animation: blink 2.4s infinite;
    transform-origin: 50% 50%;
}

.blog-item .item-img .card-categories {
    position: absolute;
    top: 20px;
    right: 25px;
    z-index: 1;
}

.blog-item .item-img .card-categories .link-elm {
    background: #000;
    border-radius: 100px;
    font-size: 15px;
    padding: 5px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: #fff;
    margin-bottom: 0;
}

.blog-item .item-date {
    font-size: 15px;
    letter-spacing: -0.025em;
    color: #616161;
}

.blog-item .item-title {
    font-size: 18px;
    margin-top: 5px;
    transition: all 0.2s;
    margin: 0;
}

.blog-item .item-title a {
    color: #fff;
}

.blog-item:is(.active) {
    width: 635px;
    flex: 0 0 auto;
}

.blog-item:is(.active) .item-img {
    height: 400px;
}

.blog-item:is(.active) .item-img::after {
    opacity: 39%;
}

.blog-item:is(.active) .item-img .card-btn {
    transform: translate(-50%, -50%) scale(1);
}

.blog-item .item-img .card-btn:hover {
    background: #d6f345;
    color: #000;
}

.blog-all-btn {
    margin-top: 50px;
    text-align: center !important;
}

.footer-area {
    background-color: #000;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-top: 140px;
}

.footer-main {
    display: flex;
    gap: 50px 60px;
    justify-content: space-between;
    margin-bottom: 80px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logo img {
    width: 50px;
    height: auto;
}

.footer-logo span {
    font-size: 22px;
    color: white;
    font-weight: bold;
}

.footer-disc {
    max-width: 300px;
    color: #fff;
    margin-top: 20px;
}

.footer-hire {
    margin-top: 69px;
}

.footer-hire .hire-mail {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
    color: #b5b5b5;
}

.footer-hire .hire-mail:hover {
    color: #d6f345;
}

.footer-widget .widget-title {
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    font-size: 24px;
    margin-bottom: 17px;
}

.footer-menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.footer-menu li {
    font-size: 18px;
    line-height: 1.666;
    font-weight: 400;
    color: #b5b5b5;
}

.footer-menu li a:hover {
    color: #d6f345;
}

.footer-menu li a {
    font-size: 16px;
    color: #a6a6a6;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-social .link-elm {
    width: 42px;
    background: #17191b;
    height: 42px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.footer-social .link-elm:hover {
    background: #d6f345;
    color: #000;
}

.footer-bottom {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.footer-bottom-copyright {
    font-size: 16px;
    color: #68696c;
}

.footer-bottom-make {
    font-size: 16px;
    color: #68696c;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    padding: 3px 16px;
}

.footer-bottom-make i {
    color: #d6f345;
}

.footer-bottom-make a {
    color: #fff;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.footer-bottom-make a:hover,
.footer-bottom-link a:hover {
    color: #d6f345;
}

.footer-bottom-link {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.footer-bottom-link li {
    font-size: 18px;
    line-height: 1.666;
    font-weight: 400;
    color: #b5b5b5;
}

.footer-bottom-link a {
    font-size: 16px;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: #b5b5b5;
}

/* Contact us*/

.breadcrumb-area {
    padding-top: 280px;
    padding-bottom: 135px;
    background-color: #000001;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.breadcrumb-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    z-index: 1;
    align-items: start;
}

.breadcrumb-title {
    font-size: 60px;
    line-height: 1.066;
    letter-spacing: -0.02em;
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.breadcrumb-list {
    display: inline-block;
}

.tx-breadcrumb__wrapper {
    max-width: max-content;
}

.bread-crumb {
    padding: 0px;
    margin: 0px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb-list a::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 13px;
    transform: translateY(-50%) rotate(180deg);
    width: 18px;
    height: 18px;
    background-image: url(../assets/icon.svg);
    background-size: contain;
}

.breadcrumb-list a,
.breadcrumb-list span {
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.breadcrumb-list a {
    padding-left: 30px;
    position: relative;
    transition: 300ms;
    margin-left: 5px;
}

.breadcrumb-list span {
    opacity: 60%;
}

.contact-area {
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    padding-top: 105px;
    padding-bottom: 105px;
}

.contact-sec-title {
    display: flex;
    gap: 40px 100px;
    max-width: 860px;
    align-items: center;
    margin: 0px auto 45px auto;
    height: 120px;
}

.contact-sec-title .subtitle {
    flex: 0 0 auto;
    margin: 0px;
}

.contact-sec-title h2 {
    font-size: 25px;
    margin: 0px;
    margin-top: 13px;
}

.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
    gap: 50px;
    position: relative;
    z-index: 1;
}

.contact-wrap::after {
    content: "";
    width: 100%;
    height: 278px;
    background: #050505;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 20px 20px 0 0;
}

.contact-img {
    margin-top: -90px;
    margin-right: -20px;
}

.contact-img::after {
    content: "";
    width: 200px;
    height: 200px;
    background: #fff;
    position: absolute;
    top: 0px;
    right: 90px;
    z-index: -1;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
}

.contact-img .earth {
    width: 475px;
}

.contact-img-location {
    position: absolute;
    right: 24%;
    top: -6%;
    display: flex;
    gap: 5px;
}

.contact-img-location .dot-icon {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    align-self: end;
    margin-right: -20px;
    margin-bottom: -10px;
    position: relative;
    z-index: 1;
}

.contact-img-location .dot-icon::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d6f345;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 2.598px -1.5px 6px 0px rgba(0, 0, 0, 0.7);
    animation: nm-c1-l-icon-after 2s linear infinite;
}

@keyframes nm-c1-l-icon-after {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.contact-img-location .icon {
    width: 70px;
    height: 70px;
    background: #d6f345;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-img-location .icon img {
    width: 50%;
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.contact-social .link-elm {
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(0, 0, 0) 100%);
    border-radius: 10px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    gap: 42px;
    padding: 13px 20px;
    position: relative;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    color: white;
}



.contact-social .link-elm::after {
    content: "";
    width: 100%;
    height: 100%;
    background: #d6f345;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 10px;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.contact-social .link-elm .icon {
    width: 36px;
    height: 36px;
    background: #d6f345;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    color: #000;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.contact-social .link-elm:hover::after {
    transform: scaleY(1);
}

.contact-social .link-elm:hover .icon {
    background: #000;
    color: #fff;
}

.contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px 60px;
    margin-top: 85px;
}

.contact-info-single .icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(-33deg, rgb(46, 46, 46) 0%, rgb(16, 16, 16) 100%);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 18px;
    color: #636363;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.contact-info-single .title {
    font-size: 24px;
    margin-top: 17px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0px;
}

.contact-info-single .disc:nth-of-type(1) {
    margin-top: 8px;
}

.contact-info-single .disc {
    font-size: 15px;
    color: #666666;
    margin-top: 0px;
}

.contact-info-single .disc a {
    color: #666666;
    margin-right: 10px;
}

.contact-social .link-elm:hover {
    color: #000;
}

.contact-info-single:hover .icon {
    color: #d6f345;
}

/* Project details */

/* ---------- hero ---------- */
.pd-hero {
    position: relative;
    z-index: 1;
    padding-top: 220px;
    overflow: hidden;
}

.pd-hero-shadow-1 {
    position: absolute;
    top: 30%;
    left: -30px;
    z-index: -1;
}

.pd-hero-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 20%;
    z-index: -1;
}

.pd-hero-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.pd-hero-title {
    font-size: 90px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    margin: 0;
    max-width: 1150px;
}

.pd-hero-en {
    direction: ltr;
    color: #d6f345;
    font-size: 18px;
    margin-top: -8px;
}

.pd-hero-meta {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 10px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-hero-summary {
    max-width: 560px;
}

.pd-hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.pd-hero-tags,
.pd-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-tag {
    background: #323232;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    transition: color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99), border-color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-tag:hover {
    color: #d6f345;
    border-color: rgba(214, 243, 69, 0.5);
}

.pd-scroll-btn {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(214, 243, 69, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d6f345;
    font-size: 20px;
    transition: background 0.5s cubic-bezier(0.55, 0.085, 0, 0.99), color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-scroll-btn i {
    animation: pdScrollBtn 1.8s ease-in-out infinite;
}

@keyframes pdScrollBtn {
    0%, 100% {
        transform: translateY(-4px);
    }

    50% {
        transform: translateY(5px);
    }
}

.pd-scroll-btn:hover {
    background: #d6f345;
    color: #171619;
}

.pd-hero-cover-wrap {
    position: relative;
    z-index: 1;
    margin-top: 110px;
    padding-bottom: 40px;
}

.pd-hero-bg-title {
    position: absolute;
    top: -0.42em;
    left: 0;
    width: 100%;
    z-index: -1;
    direction: ltr;
    text-align: center;
    white-space: nowrap;
    font-size: 15vw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, rgba(69, 69, 69, 0.77) 0%, rgba(0, 0, 0, 0) 75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}

.pd-hero-cover {
    position: relative;
    height: 720px;
    border-radius: 30px;
    overflow: hidden;
    background: #171619;
}

.pd-hero-cover img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* ---------- about + specs ---------- */
.pd-about-area {
    position: relative;
    z-index: 1;
    padding: 110px 0;
}

.pd-about-wrap {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 70px;
    align-items: start;
}

.pd-about-content .sec-title,
.pd-video-sec-title .sec-title,
.pd-gallery-head .sec-title {
    font-size: 44px;
    line-height: 1.35;
}

.pd-about-text p {
    margin-top: 24px;
}

.pd-tech {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-tech-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.pd-specs {
    position: sticky;
    top: 120px;
}

.pd-specs-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 35px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pd-specs-card::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    z-index: -1;
    width: 160px;
    height: 160px;
    background: #d6f345;
    filter: blur(90px);
    opacity: 0.35;
}

.pd-specs-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.pd-specs-head .icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-specs-head .title {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.pd-specs-list {
    margin: 12px 0 30px;
}

.pd-specs-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pd-specs-row:last-child {
    border-bottom: none;
}

.pd-specs-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 12px;
    background: #d6f345;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-specs-row dt {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #838383;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-specs-row dt .icon {
    width: 20px;
    text-align: center;
    color: #d6f345;
    transition: color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-specs-row dd {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    transition: color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-specs-row:hover::after {
    transform: scaleY(1);
}

.pd-specs-row:hover dt,
.pd-specs-row:hover dt .icon,
.pd-specs-row:hover dd {
    color: #000;
}

.pd-specs-btn .ActionBtn {
    width: 100%;
    justify-content: space-between;
}

/* ---------- video ---------- */
.pd-video-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 120px 0 130px;
    background: radial-gradient(ellipse at 50% 65%, rgba(214, 243, 69, 0.09) 0%, rgba(214, 243, 69, 0) 60%);
}

.pd-video-marquee {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

.pd-video-marquee-text {
    direction: ltr;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 60px;
    white-space: nowrap;
    font-size: 180px;
    font-weight: 700;
    line-height: 1.3;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
}

.pd-video-marquee-text .star {
    font-size: 0.4em;
    color: rgba(214, 243, 69, 0.35);
    -webkit-text-stroke: 0;
}

.pd-video-sec-title {
    text-align: center;
    margin-bottom: 60px;
}

.pd-video-stage {
    perspective: 1600px;
}

.pd-video-frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px 12px;
    border-radius: 26px;
    background: #171619;
    border: 1px solid rgba(214, 243, 69, 0.4);
    box-shadow: 1.782px 0.908px 32.2px 2.8px rgba(214, 243, 69, 0.23), 0 60px 120px rgba(0, 0, 0, 0.6);
    transform-origin: 50% 0%;
    will-change: transform;
}

.pd-browser-bar {
    direction: ltr;
    height: 54px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pd-browser-bar .dots {
    display: flex;
    gap: 7px;
    flex: 0 0 auto;
}

.pd-browser-bar .dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.pd-browser-bar .dots span:first-child {
    background: #d6f345;
}

.pd-browser-bar .url {
    flex: 1;
    max-width: 420px;
    height: 32px;
    margin: 0 auto;
    border-radius: 100px;
    background: #232225;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    color: #9e9e9e;
    font-size: 13px;
    white-space: nowrap;
}

.pd-browser-bar .url i {
    color: #d6f345;
    font-size: 11px;
}

.pd-browser-bar .live {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #d6f345;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.pd-browser-bar .live .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6f345;
    animation: subtitleDot1kf 1.4s linear infinite;
}

.pd-video-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: #000;
}

.pd-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-video-screen:fullscreen {
    border-radius: 0;
}

.pd-video-screen:fullscreen .pd-video {
    object-fit: contain;
}

.pd-video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
    transition: opacity 0.6s ease;
}

.pd-video-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.7s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-video-play-inner {
    position: relative;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-video-play-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}

.pd-video-play .ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pd-video-play .ring text {
    /* rtl pushes the glyphs off the path start */
    direction: ltr;
    fill: #fff;
    font-family: IRANSans;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
}

.pd-video-play .core {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 12px rgba(214, 243, 69, 0.15), 0 0 50px rgba(214, 243, 69, 0.5);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-video-play .core::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #d6f345;
    animation: pdPlayPulse 2s ease-out infinite;
}

@keyframes pdPlayPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

.pd-video-play .core i {
    margin-right: -4px;
}

.pd-video-play:hover .core {
    background: #fff;
    transform: scale(1.1);
}

.pd-video-screen.is-playing .pd-video-overlay {
    opacity: 0;
}

.pd-video-screen.is-playing .pd-video-play {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.6);
}

.pd-video-screen.is-playing .pd-video {
    cursor: pointer;
}

.pd-video-screen.is-idle {
    cursor: none;
}

.pd-video-controls {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 100px;
    background: rgba(23, 22, 25, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-video-screen.is-playing .pd-video-controls {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pd-video-screen.is-playing.is-idle .pd-video-controls {
    opacity: 0;
    transform: translateY(20px);
}

.pd-vc-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-vc-btn:hover {
    background: #d6f345;
    color: #171619;
}

.pd-vc-progress {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
}

/* bigger hit area */
.pd-vc-progress::before {
    content: "";
    position: absolute;
    inset: -10px 0;
}

.pd-vc-progress:focus-visible {
    outline: 2px solid #d6f345;
    outline-offset: 6px;
}

.pd-vc-progress-fill {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    border-radius: 10px;
    background: #d6f345;
    box-shadow: 0 0 12px rgba(214, 243, 69, 0.6);
}

.pd-vc-progress-fill::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d6f345;
    transform: translateY(-50%);
}

.pd-vc-time {
    min-width: 44px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- gallery ---------- */
.pd-gallery-area {
    position: relative;
    z-index: 1;
    padding: 110px 0;
}

.pd-gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 60px;
}

.pd-gallery-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* counter only tracks the horizontal (pinned) mode */
.pd-gallery-area:not(.is-horizontal) .pd-gallery-status {
    display: none;
}

.pd-gallery-count {
    color: #838383;
    font-size: 20px;
    font-weight: 700;
}

.pd-gallery-count b {
    color: #d6f345;
    font-size: 44px;
}

.pd-gallery-progress {
    position: relative;
    width: 180px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
}

.pd-gallery-progress span {
    position: absolute;
    inset: 0;
    background: #d6f345;
    transform: scaleX(0);
    transform-origin: right;
}

/* default (tablet / mobile / no-js): grid */
.pd-gallery-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 40px;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
}

.pd-gallery-item {
    display: block;
    color: inherit;
}

.pd-gallery-frame {
    position: relative;
    padding: 0 8px 8px;
    border-radius: 20px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.pd-gallery-bar {
    direction: ltr;
    height: 30px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-gallery-bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.pd-gallery-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: 13px;
    background: #0b0b0b;
}

.pd-gallery-img img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top center;
}

.pd-gallery-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
    pointer-events: none;
}

.pd-gallery-frame .card-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
    color: #171619;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-gallery-info {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: 20px;
    padding: 0 6px;
}

.pd-gallery-info .num {
    color: #d6f345;
    font-size: 16px;
    font-weight: 700;
}

.pd-gallery-info .caption {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    transition: color 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-gallery-item:hover .pd-gallery-frame {
    border-color: rgba(214, 243, 69, 0.5);
    box-shadow: 0 0 40px rgba(214, 243, 69, 0.15);
}

.pd-gallery-item:hover .pd-gallery-img::after {
    opacity: 0.35;
}

.pd-gallery-item:hover .card-btn {
    transform: translate(-50%, -50%) scale(1);
}

.pd-gallery-item:hover .caption {
    color: #d6f345;
}

.pd-gallery-frame .card-btn:hover {
    background: #d6f345;
}

/* desktop: pinned horizontal track (class added by project.js) */
.pd-gallery-area.is-horizontal {
    padding: 0;
}

.pd-gallery-area.is-horizontal .pd-gallery-pin {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-top: 30px;
}

.pd-gallery-area.is-horizontal .pd-gallery-head {
    margin-bottom: 45px;
}

.pd-gallery-area.is-horizontal .pd-gallery-track {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    width: max-content;
    max-width: none;
    margin: 0;
    padding-inline: 2.5vw;
    perspective: 1400px;
}

.pd-gallery-area.is-horizontal .pd-gallery-item {
    flex: 0 0 auto;
    /* --pd-item-w is set by project.js so the lowest caption fits in the pinned screen */
    width: var(--pd-item-w, min(40vw, 620px));
}

.pd-gallery-area.is-horizontal .pd-gallery-item:nth-child(even) {
    margin-top: 70px;
}

.pd-gallery-area.is-horizontal .pd-gallery-img img {
    width: 112%;
    max-width: none;
    margin-left: -6%;
}

/* lightbox (Magnific Popup) */
.mfp-pd.mfp-bg {
    background: #000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mfp-pd.mfp-bg.mfp-ready {
    opacity: 0.92;
}

.mfp-pd.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-pd .mfp-content {
    opacity: 0;
    transform: scale(0.92);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.mfp-pd.mfp-ready .mfp-content {
    opacity: 1;
    transform: scale(1);
}

.mfp-pd.mfp-removing .mfp-content {
    opacity: 0;
    transform: scale(0.92);
}

.mfp-pd img.mfp-img {
    padding: 50px 0;
    border-radius: 16px;
}

.mfp-pd .mfp-figure::after {
    top: 50px;
    bottom: 50px;
    border-radius: 16px;
    box-shadow: 0 0 60px rgba(214, 243, 69, 0.15);
    background: #171619;
}

.mfp-pd .mfp-bottom-bar {
    margin-top: -45px;
    direction: rtl;
    font-family: IRANSans;
}

.mfp-pd .mfp-title {
    text-align: right;
    padding-right: 0;
    padding-left: 90px;
    font-size: 17px;
    color: #fff;
}

.mfp-pd .mfp-counter {
    right: auto;
    left: 0;
    color: #d6f345;
    font-size: 14px;
}

.mfp-pd .mfp-close {
    width: 50px;
    height: 50px;
    line-height: 50px;
    top: 0;
    right: 0;
    border-radius: 50%;
    opacity: 1;
    color: #fff;
    font-family: IRANSans;
    transition: all 0.4s ease;
}

.mfp-pd .mfp-close:hover {
    background: #d6f345;
    color: #171619;
}

.mfp-pd .mfp-arrow {
    width: 64px;
    height: 64px;
    margin-top: -32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    opacity: 1;
    transition: background 0.4s ease;
}

.mfp-pd .mfp-arrow:hover {
    background: #d6f345;
}

.mfp-pd .mfp-arrow::before {
    display: none;
}

.mfp-pd .mfp-arrow::after {
    border: none;
    width: 14px;
    height: 14px;
    margin: 0;
    top: 50%;
    left: 50%;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}

.mfp-pd .mfp-arrow:hover::after {
    border-color: #171619;
}

/* RTL: "next" sits on the left */
.mfp-pd .mfp-arrow-left {
    left: auto;
    right: 20px;
}

.mfp-pd .mfp-arrow-right {
    right: auto;
    left: 20px;
}

.mfp-pd .mfp-arrow-left::after {
    transform: translate(-65%, -50%) rotate(135deg);
}

.mfp-pd .mfp-arrow-right::after {
    transform: translate(-35%, -50%) rotate(-45deg);
}

/* ---------- next project / cta ---------- */
.pd-next-area {
    position: relative;
    z-index: 1;
    padding: 110px 0 120px;
}

.pd-next-link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pd-next-label {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #838383;
    font-size: 18px;
    font-weight: 500;
}

.pd-next-label .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d6f345;
    box-shadow: 0px 3px 5.52px 0.48px rgba(214, 243, 69, 0.46);
    animation: subtitleDot1kf 2s linear infinite;
}

.pd-next-title {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.3;
}

/* lime sweeps in from the right on hover */
.pd-next-title .word,
.pd-next-title:not(:has(.word)) {
    background-image: linear-gradient(to left, #d6f345 50%, #fff 50%);
    background-size: 200% 100%;
    background-position-x: 0%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transition: background-position 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-next-link:hover .pd-next-title .word,
.pd-next-link:hover .pd-next-title:not(:has(.word)) {
    background-position-x: 100%;
}

.pd-next-arrow {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.pd-next-link:hover .pd-next-arrow {
    background: #d6f345;
    color: #171619;
    transform: rotate(45deg);
}

.pd-next-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 320px;
    height: 220px;
    border-radius: 18px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.pd-next-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-cta {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
    padding: 40px 50px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pd-cta::before {
    content: "";
    position: absolute;
    bottom: -70px;
    left: 20%;
    z-index: -1;
    width: 200px;
    height: 120px;
    background: #d6f345;
    filter: blur(90px);
    opacity: 0.4;
}

.pd-cta-title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
}

/* About us */

/* ---------- hero ---------- */
.ab-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 220px 0 40px;
}

.ab-hero-shadow-1 {
    position: absolute;
    top: 35%;
    left: -30px;
    z-index: -1;
}

.ab-hero-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 10%;
    z-index: -1;
}

.ab-hero-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 60px;
    align-items: end;
    margin-top: 30px;
}

.ab-hero-title {
    margin: 0;
    color: #fff;
    font-size: 78px;
    font-weight: 700;
    line-height: 1.3;
}

.ab-hero-title .accent {
    color: #d6f345;
}

.ab-hero-pill {
    position: relative;
    top: -0.05em;
    display: inline-block;
    width: 170px;
    height: 0.78em;
    margin: 0 10px;
    vertical-align: middle;
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid rgba(214, 243, 69, 0.4);
}

.ab-hero-pill video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 10px;
}

.ab-hero-badge {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-hero-badge .ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ab-hero-badge .ring text {
    /* rtl pushes the glyphs off the path start */
    direction: ltr;
    fill: #fff;
    font-family: IRANSans;
    font-size: 14px;
    font-weight: 500;
}

.ab-hero-badge .core {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 10px rgba(214, 243, 69, 0.12), 0 0 40px rgba(214, 243, 69, 0.4);
}

.ab-hero-badge .core b {
    font-size: 34px;
    line-height: 1.1;
}

.ab-hero-badge .core small {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- company photo ---------- */
.ab-photo-area {
    position: relative;
    height: 100vh;
}

.ab-photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #171619;
}

.ab-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
}

.ab-photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.ab-photo-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 100px;
    background: rgba(23, 22, 25, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
}

.ab-photo-chip i {
    color: #d6f345;
}

.ab-photo-title {
    margin: 0;
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.3;
}

.ab-photo-title span {
    color: #d6f345;
}

/* ---------- intro + stats ---------- */
.ab-intro-area {
    position: relative;
    z-index: 1;
    padding: 120px 0 110px;
}

.ab-statement {
    max-width: 1200px;
    margin-top: 10px;
    color: #fff;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.7;
    text-align: right;
}

.ab-statement b {
    color: #d6f345;
}

.ab-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 80px;
}

/* ---------- mission ---------- */
.ab-mission-area {
    position: relative;
    z-index: 1;
    padding: 60px 0 120px;
}

.ab-mission-wrap {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 80px;
    align-items: start;
}

.ab-mission-title {
    align-self: stretch;
}

.ab-mission-title-pin {
    position: sticky;
    top: 120px;
}

.ab-mission-title .sec-title,
.ab-goals-sec-title .sec-title,
.ab-history-sec-title .sec-title {
    font-size: 44px;
    line-height: 1.35;
}

.ab-mission-quote {
    margin-top: 40px;
    padding: 28px 30px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border-right: 3px solid #d6f345;
}

.ab-mission-quote i {
    color: #d6f345;
    font-size: 28px;
}

.ab-mission-quote p {
    margin-top: 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.ab-mission-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 70px 1fr 56px;
    align-items: center;
    gap: 24px;
    padding: 34px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ab-mission-row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 18px;
    background: #d6f345;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.ab-mission-row .num {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
    transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}

.ab-mission-row .title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    transition: color 0.5s ease;
}

.ab-mission-row .disc {
    margin: 0;
    color: #9e9e9e;
    font-size: 16px;
    transition: color 0.5s ease;
}

.ab-mission-row .arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.ab-mission-row:hover::after {
    transform: scaleX(1);
}

.ab-mission-row:hover .num {
    color: #171619;
    -webkit-text-stroke-color: #171619;
}

.ab-mission-row:hover .title {
    color: #000;
}

.ab-mission-row:hover .disc {
    color: #2b2b2b;
}

.ab-mission-row:hover .arrow {
    background: #171619;
    border-color: #171619;
    transform: rotate(45deg);
}

.ab-mission-img {
    position: relative;
    height: 380px;
    margin-top: 40px;
    border-radius: 20px;
    overflow: hidden;
}

.ab-mission-img img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* ---------- crossing ribbons ---------- */
.ab-ribbons {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 90px 0;
}

.ab-ribbon {
    position: relative;
    direction: ltr;
    width: 110%;
    margin-left: -5%;
    padding: 22px 0;
    white-space: nowrap;
}

.ab-ribbon-1 {
    z-index: 2;
    background: #d6f345;
    transform: rotate(-3deg);
    box-shadow: 0 10px 40px rgba(214, 243, 69, 0.25);
}

.ab-ribbon-2 {
    z-index: 1;
    margin-top: 0;
    background: #171619;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotate(2.5deg);
}

.ab-ribbon-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.25;
}

.ab-ribbon-track i {
    font-style: normal;
    font-size: 0.5em;
}

.ab-ribbon-1 .ab-ribbon-track {
    color: #171619;
}

.ab-ribbon-2 .ab-ribbon-track span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
}

.ab-ribbon-2 .ab-ribbon-track i {
    color: #d6f345;
}

/* ---------- goals (stacking cards) ---------- */
.ab-goals-area {
    position: relative;
    z-index: 1;
    padding: 60px 0 60px;
}

.ab-goals-sec-title {
    text-align: center;
    margin-bottom: 70px;
}

.ab-goals-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
}

.ab-goal-card {
    position: sticky;
    top: calc(120px + var(--i) * 28px);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    min-height: 480px;
    padding: 45px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(11, 11, 11) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    transform-origin: 50% 0%;
}

.ab-goal-card::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: #d6f345;
    filter: blur(110px);
    opacity: 0.3;
    pointer-events: none;
}

.ab-goal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ab-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.ab-goal-head .icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-goal-head .num {
    font-size: 90px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(214, 243, 69, 0.5);
}

.ab-goal-content .title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
}

.ab-goal-content .disc {
    font-size: 17px;
}

.ab-goal-content .features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
}

.ab-goal-content .features-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.ab-goal-img {
    position: relative;
    min-height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.ab-goal-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- history timeline ---------- */
.ab-history-area {
    position: relative;
    z-index: 1;
    padding: 120px 0;
}

.ab-history-sec-title {
    text-align: center;
    margin-bottom: 80px;
}

.ab-timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.ab-tl-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
}

.ab-tl-line-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #d6f345 0%, #8EBC3F 100%);
    box-shadow: 0 0 12px rgba(214, 243, 69, 0.6);
    transform-origin: top;
}

.ab-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: center;
    padding: 30px 0;
}

.ab-tl-year {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
    transition: color 0.6s ease, -webkit-text-stroke-color 0.6s ease;
}

.ab-tl-dot {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
}

.ab-tl-dot span {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #111;
    border: 2px solid rgba(255, 255, 255, 0.25);
    transition: all 0.5s ease;
}

.ab-tl-card {
    grid-column: 3;
    grid-row: 1;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.ab-tl-card .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(214, 243, 69, 0.1);
    color: #d6f345;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-tl-card-year {
    display: none;
    color: #d6f345;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ab-tl-card .title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.ab-tl-card .disc {
    font-size: 16px;
}

/* every second item mirrors (card on the right, year on the left) */
.ab-tl-item:nth-child(odd) .ab-tl-year {
    grid-column: 3;
    text-align: right;
}

.ab-tl-item:nth-child(odd) .ab-tl-card {
    grid-column: 1;
}

.ab-tl-item.is-active .ab-tl-year {
    color: #d6f345;
    -webkit-text-stroke-color: #d6f345;
}

.ab-tl-item.is-active .ab-tl-dot span {
    background: #d6f345;
    border-color: #d6f345;
    box-shadow: 0 0 0 6px rgba(214, 243, 69, 0.2), 0 0 20px rgba(214, 243, 69, 0.8);
}

.ab-tl-item.is-active .ab-tl-card {
    border-color: rgba(214, 243, 69, 0.4);
    box-shadow: 0 0 40px rgba(214, 243, 69, 0.08);
}

.ab-tl-item.is-future .ab-tl-card {
    background: transparent;
    border-style: dashed;
}

.ab-tl-item.is-future .ab-tl-dot span {
    border-style: dashed;
}

/* ---------- founders ---------- */
.ab-founders-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 120px 0;
}

.ab-founders-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.ab-founders-imgs {
    position: relative;
    height: 540px;
}

.ab-founder-img {
    position: absolute;
    width: 56%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 24px;
    border: 6px solid #1f1f22;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.ab-founder-img.one {
    top: 0;
    right: 4%;
    z-index: 2;
}

.ab-founder-img.two {
    top: 0;
    left: 4%;
}

.ab-founder-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.ab-founder-img:hover img {
    transform: scale(1.08);
}

.ab-founder-img .name {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 5px 14px;
    border-radius: 100px;
    background: #d6f345;
    color: #171619;
    font-size: 13px;
    font-weight: 700;
}

.ab-founders-quote {
    margin: 10px 0 40px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
}

.ab-cta-area {
    padding: 20px 0 120px;
}

/* Service details */

/* ---------- hero ---------- */
.sv-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 200px 0 130px;
}

.sv-hero-shadow-1 {
    position: absolute;
    top: 30%;
    left: -30px;
    z-index: -1;
}

.sv-hero-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 15%;
    z-index: -1;
}

.sv-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 60px;
    align-items: center;
    margin-top: 30px;
}

.sv-hero-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #9e9e9e;
    font-size: 16px;
    font-weight: 500;
}

.sv-hero-label .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-hero-label .en {
    direction: ltr;
    color: #d6f345;
    font-size: 14px;
}

.sv-hero-title {
    margin: 24px 0 10px;
    color: #fff;
    font-size: 76px;
    font-weight: 700;
    line-height: 1.25;
}

.sv-hero-headline {
    margin: 0 0 18px;
    color: #d6f345;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.6;
}

.sv-hero-lead {
    max-width: 560px;
}

.sv-hero-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    margin-top: 36px;
}

.sv-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.4s ease, border-color 0.4s ease;
}

.sv-link-btn i {
    color: #d6f345;
}

.sv-link-btn:hover {
    color: #d6f345;
    border-color: #d6f345;
}

.sv-hero-bg-title {
    position: absolute;
    left: 0;
    bottom: -0.18em;
    z-index: -1;
    width: 100%;
    direction: ltr;
    text-align: center;
    white-space: nowrap;
    font-size: 12vw;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

/* ---------- hero visuals: shared ---------- */
.sv-visual {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 0.92;
}

.sv-vis {
    position: absolute;
    inset: 0;
}

.sv-chip {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 100px;
    background: rgba(23, 22, 25, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(214, 243, 69, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.sv-chip i {
    color: #d6f345;
}

.sv-toast {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(23, 22, 25, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

.sv-toast .icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-toast b {
    display: block;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}

.sv-toast small {
    display: block;
    color: #9e9e9e;
    font-size: 12px;
    white-space: nowrap;
}

@keyframes svBlink {
    50% {
        opacity: 0;
    }
}

@keyframes svSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ---------- visual: web design ---------- */
.vw-browser {
    position: absolute;
    inset: 6% 4% 8% 4%;
    overflow: hidden;
    border-radius: 22px;
    background: #171619;
    border: 1px solid rgba(214, 243, 69, 0.35);
    box-shadow: 1.782px 0.908px 32.2px 2.8px rgba(214, 243, 69, 0.2), 0 40px 80px rgba(0, 0, 0, 0.5);
}

.vw-bar {
    direction: ltr;
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vw-bar > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.vw-bar > span:first-child {
    background: #d6f345;
}

.vw-url {
    margin: 0 auto;
    padding: 4px 16px;
    border-radius: 100px;
    background: #232225;
    color: #9e9e9e;
    font-size: 11px;
}

.vw-url i {
    color: #d6f345;
    font-size: 9px;
}

.vw-page {
    height: calc(100% - 40px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vw-b {
    position: relative;
    display: block;
    font-style: normal;
    border: 1.5px dashed rgba(255, 255, 255, 0.28);
    border-radius: 8px;
}

.vw-b > b {
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vw-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vw-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.vw-logo > b,
.vw-btn > b,
.vw-cta > b {
    background: #d6f345;
}

.vw-link {
    width: 46px;
    height: 8px;
    border-radius: 4px;
}

.vw-link > b,
.vw-p > b {
    background: rgba(255, 255, 255, 0.3);
}

.vw-btn {
    width: 64px;
    height: 24px;
    margin-right: auto;
    border-radius: 100px;
}

.vw-hero {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
}

.vw-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.vw-h1 {
    width: 100%;
    height: 16px;
    border-radius: 5px;
}

.vw-h1 > b {
    background: #fff;
}

.vw-p {
    width: 100%;
    height: 8px;
    border-radius: 4px;
}

.vw-h1.short,
.vw-p.short {
    width: 70%;
}

.vw-cta {
    width: 90px;
    height: 30px;
    margin-top: 6px;
    border-radius: 100px;
}

.vw-cta > b {
    box-shadow: 0 0 20px rgba(214, 243, 69, 0.5);
}

.vw-img {
    border-radius: 14px;
}

.vw-img > b {
    background: linear-gradient(135deg, #d6f345 0%, #8EBC3F 45%, #2d2d2d 100%);
    color: #171619;
    font-size: 28px;
}

.vw-cards {
    height: 26%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.vw-card {
    border-radius: 12px;
}

.vw-card > b {
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1d 100%);
    border-top: 3px solid #d6f345;
}

.vw-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    color: #fff;
    font-size: 22px;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.sv-vis-mode {
    position: absolute;
    top: 2%;
    right: 10%;
    z-index: 4;
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    background: #d6f345;
    color: #171619;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.sv-vis-mode .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #171619;
    animation: svBlink 1.2s steps(1) infinite;
}

.vw-chip-1 {
    top: 14%;
    left: -2%;
}

.vw-chip-2 {
    bottom: 0;
    right: 6%;
}

.vw-chip-3 {
    bottom: 26%;
    left: -5%;
}

/* ---------- visual: app ---------- */
.sv-vis-app {
    display: flex;
    align-items: center;
    justify-content: center;
}

.va-rings span {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(214, 243, 69, 0.25);
    transform: translate(-50%, -50%);
    animation: svSpin 40s linear infinite;
}

.va-rings span:first-child {
    width: 72%;
}

.va-rings span:last-child {
    width: 98%;
    animation-direction: reverse;
    border-color: rgba(255, 255, 255, 0.08);
}

.va-phone {
    position: relative;
    z-index: 2;
    width: 44%;
    aspect-ratio: 9 / 18.5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 38px;
    background: #0b0b0d;
    border: 7px solid #232225;
    box-shadow: 0 0 0 1px rgba(214, 243, 69, 0.35), 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(214, 243, 69, 0.15);
}

.va-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 3;
    width: 34%;
    height: 20px;
    border-radius: 100px;
    background: #000;
    transform: translateX(-50%);
}

.va-status {
    direction: ltr;
    height: 34px;
    padding: 10px 16px 0;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 10px;
}

.va-status i {
    margin-left: 4px;
    font-size: 9px;
}

.va-screens {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.va-screen {
    position: absolute;
    inset: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.va-hello {
    display: flex;
    align-items: center;
    gap: 8px;
}

.va-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d6f345, #8EBC3F);
}

.va-hello b,
.va-title {
    display: block;
    color: #fff;
    font-size: 12px;
}

.va-title {
    font-size: 15px;
}

.va-hello small {
    display: block;
    color: #838383;
    font-size: 10px;
}

.va-banner {
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #d6f345, #a8c936);
    color: #171619;
}

.va-banner small {
    display: block;
    font-size: 10px;
    font-weight: 600;
}

.va-banner b {
    display: block;
    margin: 2px 0 8px;
    font-size: 18px;
}

.va-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 100px;
    background: #d6f345;
    color: #171619;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.va-banner .va-pill {
    background: #171619;
    color: #d6f345;
}

.va-pill.wide {
    align-self: stretch;
    padding: 9px;
}

.va-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.va-tiles i {
    aspect-ratio: 1;
    border-radius: 12px;
    background: #1c1c20;
    color: #d6f345;
    font-size: 13px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.va-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: #151518;
}

.va-row i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #2a2a2e;
}

.va-row span {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.va-product {
    height: 44%;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 40%, rgba(214, 243, 69, 0.35), #1c1c20 70%);
    color: #d6f345;
    font-size: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.va-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.va-lines span {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
}

.va-lines span:last-child {
    width: 70%;
}

.va-lines.center {
    align-items: center;
    align-self: stretch;
}

.va-buy {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.va-buy b {
    color: #fff;
    font-size: 13px;
}

.va-buy small {
    color: #838383;
    font-size: 9px;
}

.va-screen-done {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.va-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 10px rgba(214, 243, 69, 0.15), 0 0 40px rgba(214, 243, 69, 0.5);
}

.va-tap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    pointer-events: none;
}

.va-tabbar {
    display: flex;
    justify-content: space-around;
    padding: 10px 6px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #5c5c5c;
    font-size: 14px;
}

.va-tabbar .active {
    color: #d6f345;
}

.va-toast-1 {
    top: 16%;
    right: 0;
}

.va-toast-2 {
    bottom: 18%;
    left: -2%;
}

.va-chip-1 {
    top: 6%;
    left: 8%;
}

.va-chip-2 {
    bottom: 4%;
    right: 12%;
}

/* ---------- visual: SEO ---------- */
.vs-window {
    position: absolute;
    inset: 4% 2% 18% 8%;
    padding: 20px;
    border-radius: 22px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.vs-search {
    height: 50px;
    margin-bottom: 18px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 100px;
    background: #232225;
    border: 1px solid rgba(214, 243, 69, 0.3);
}

.vs-search .g {
    color: #d6f345;
    font-size: 18px;
}

.vs-search .s {
    margin-right: auto;
    color: #838383;
}

.vs-query {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}

.vs-caret,
.vc-caret {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: #d6f345;
    animation: svBlink 1s steps(1) infinite;
}

.vs-results {
    position: relative;
    height: 330px;
}

.vs-result {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #1c1c20;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.vs-result .rank {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2a2a2e;
    color: #9e9e9e;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-result .lines {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vs-result .lines i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
}

.vs-result .lines .u {
    width: 30%;
}

.vs-result .lines .t {
    width: 75%;
}

.vs-result .lines i.t {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
}

.vs-result .lines .d {
    width: 90%;
}

.vs-result.is-you {
    z-index: 2;
    background: linear-gradient(to left, rgba(214, 243, 69, 0.16), #1c1c20);
    border-color: rgba(214, 243, 69, 0.6);
}

.vs-result.is-you .rank {
    background: #d6f345;
    color: #171619;
}

.vs-result.is-you span.u {
    width: auto;
    direction: ltr;
    text-align: right;
    color: #d6f345;
    font-size: 10px;
    line-height: 1.2;
}

.vs-result.is-you span.t {
    width: auto;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.vs-up {
    color: #d6f345;
    font-size: 14px;
    animation: pdScrollBtn 1.4s ease-in-out infinite;
}

.vs-chart {
    bottom: 0;
    left: 0;
    width: 56%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 16px 10px;
}

.vs-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.vs-chart-head b {
    color: #d6f345;
    font-size: 22px;
}

/* keep "+۳۰۰٪" in reading order inside the RTL page */
.vs-chart-head b,
.vm-card-head b,
.vm-core b {
    direction: ltr;
    unicode-bidi: isolate;
}

.vs-chart svg {
    display: block;
    width: 100%;
    height: 70px;
    margin-top: 6px;
    overflow: visible;
}

.vs-chip-1 {
    top: 0;
    left: 0;
}

/* ---------- visual: marketing ---------- */
.vm-orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.vm-orbit-outer {
    width: 86%;
}

.vm-orbit-inner {
    width: 54%;
    border-color: rgba(214, 243, 69, 0.25);
}

.vm-planet {
    position: absolute;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
}

.vm-orbit-inner .vm-planet {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
}

.vm-planet-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1c1c20;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(214, 243, 69, 0.15);
}

.vm-orbit-inner .vm-planet-inner {
    font-size: 18px;
}

.vm-core {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: auto;
    width: 26%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px rgba(214, 243, 69, 0.5);
}

.vm-core small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.vm-core b {
    font-size: 24px;
    line-height: 1.2;
}

.vm-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #d6f345;
    animation: pdPlayPulse 2.4s ease-out infinite;
}

.vm-pulse + .vm-pulse {
    animation-delay: 1.2s;
}

.vm-card-1 {
    top: 4%;
    right: 0;
}

.vm-card-2 {
    bottom: 2%;
    left: 0;
    width: 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.vm-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.vm-card-head b {
    color: #d6f345;
    font-size: 16px;
}

.vm-bars {
    /* time runs left to right, like the SEO chart */
    direction: ltr;
    height: 60px;
    margin-top: 10px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.vm-bars span {
    flex: 1;
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #d6f345, #8EBC3F);
    transform-origin: bottom;
}

/* ---------- visual: content ---------- */
.vc-editor {
    position: absolute;
    inset: 4% 6% 12% 2%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}

.vc-toolbar {
    direction: ltr;
    height: 46px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vc-toolbar .dots {
    display: flex;
    gap: 7px;
}

.vc-toolbar .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.vc-toolbar .dots span:first-child {
    background: #d6f345;
}

.vc-tools {
    display: flex;
    gap: 14px;
    color: #838383;
    font-size: 13px;
}

.vc-doc {
    flex: 1;
    overflow: hidden;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(214, 243, 69, 0.12);
    color: #d6f345;
    font-size: 12px;
    font-weight: 600;
}

.vc-title {
    min-height: 1.5em;
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.vc-body {
    min-height: 5.7em;
    margin: 0;
    color: #b5b5b5;
    font-size: 15px;
    line-height: 1.9;
    text-align: right;
}

.vc-caret {
    height: 1.1em;
    margin-right: 2px;
    vertical-align: middle;
}

.vc-img {
    height: 90px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(214, 243, 69, 0.5), #2d2d2d);
    color: #171619;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: top;
    opacity: 0;
}

.vc-foot {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #838383;
    font-size: 12px;
}

.vc-words {
    color: #fff;
}

.vc-seo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d6f345;
    opacity: 0;
}

.vc-seo i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6f345;
}

.vc-toast {
    bottom: 0;
    left: 0;
    opacity: 0;
}

.vc-chip-1 {
    top: 0;
    left: 0;
}

.vc-chip-2 {
    top: 44%;
    left: -4%;
}

.vc-chip-3 {
    bottom: 20%;
    right: -2%;
}

/* ---------- stats ---------- */
.sv-stats-area {
    position: relative;
    z-index: 1;
    padding-bottom: 100px;
}

.sv-stats {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 25px;
}

/* ---------- section titles ---------- */
.sv-sec-title {
    max-width: 800px;
    margin-bottom: 60px;
}

.sv-sec-title .sec-title,
.sv-process-pin .sec-title,
.sv-faq-side .sec-title {
    font-size: 44px;
    line-height: 1.35;
}

.sv-sec-title--row {
    max-width: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

/* ---------- features ---------- */
.sv-features-area {
    position: relative;
    z-index: 1;
    padding: 110px 0;
}

.sv-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.sv-feature-inner {
    position: relative;
    height: 100%;
    padding: 36px 32px;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.5s ease;
}

/* spotlight that follows the mouse (--mx/--my set by services.js) */
.sv-feature-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(214, 243, 69, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.sv-feature-inner .num {
    position: absolute;
    top: 24px;
    left: 28px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
}

.sv-feature-inner .icon {
    width: 62px;
    height: 62px;
    margin-bottom: 26px;
    border-radius: 18px;
    background: rgba(214, 243, 69, 0.1);
    color: #d6f345;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.sv-feature-inner .title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.sv-feature-inner .disc {
    font-size: 16px;
}

.sv-feature:hover .sv-feature-inner {
    border-color: rgba(214, 243, 69, 0.4);
}

.sv-feature:hover .sv-feature-inner::before {
    opacity: 1;
}

.sv-feature:hover .icon {
    background: #d6f345;
    color: #171619;
    transform: rotate(-8deg);
}

/* ---------- process ---------- */
.sv-process-area {
    position: relative;
    z-index: 1;
    padding: 60px 0 110px;
}

.sv-process-wrap {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 80px;
    align-items: start;
}

.sv-process-side {
    align-self: stretch;
}

.sv-process-pin {
    position: sticky;
    top: 120px;
}

.sv-process-counter {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 50px;
}

.sv-process-counter .digits {
    height: 150px;
    overflow: hidden;
}

.sv-process-counter .digits-col span {
    display: block;
    height: 150px;
    color: #d6f345;
    font-size: 140px;
    font-weight: 700;
    line-height: 150px;
}

.sv-process-counter .total {
    padding-bottom: 18px;
    color: #838383;
    font-size: 28px;
    font-weight: 700;
}

.sv-process-bar {
    max-width: 320px;
    height: 3px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.sv-process-bar span {
    display: block;
    height: 100%;
    background: #d6f345;
    transform-origin: right;
}

.sv-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sv-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    padding: 32px 30px;
    border-radius: 22px;
    background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.5s ease, background 0.5s ease;
}

.sv-step-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #838383;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.sv-step .title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.sv-step .disc {
    font-size: 16px;
}

.sv-step.is-active {
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border-color: rgba(214, 243, 69, 0.45);
}

.sv-step.is-active .sv-step-num {
    background: #d6f345;
    border-color: #d6f345;
    color: #171619;
    box-shadow: 0 0 30px rgba(214, 243, 69, 0.4);
}

/* ---------- tools marquee ---------- */
.sv-tools-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 30px 0 110px;
}

.sv-tools {
    direction: ltr;
    margin-top: 20px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.sv-tools-track {
    width: max-content;
    display: flex;
}

.sv-tools-group {
    display: flex;
    gap: 18px;
    padding-right: 18px;
}

.sv-tool {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px;
    border-radius: 100px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.sv-tool i {
    color: #d6f345;
    font-size: 14px;
    font-style: normal;
}

.sv-tool:hover {
    color: #d6f345;
    border-color: rgba(214, 243, 69, 0.5);
}

/* ---------- related projects ---------- */
.sv-projects-area {
    position: relative;
    z-index: 1;
    padding: 40px 0 110px;
}

.sv-projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.sv-project-title {
    margin: 22px 0 0;
    font-size: 24px;
    font-weight: 700;
}

.sv-project-title a {
    color: #fff;
    transition: color 0.4s ease;
}

.sv-project-title a:hover {
    color: #d6f345;
}

/* ---------- faq ---------- */
.sv-faq-area {
    position: relative;
    z-index: 1;
    padding: 40px 0 110px;
}

.sv-faq-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 70px;
    align-items: start;
}

.sv-faq-contact {
    margin-top: 36px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border-right: 3px solid #d6f345;
}

.sv-faq-contact .icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sv-faq-contact .title {
    margin: 0 0 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.sv-faq-contact p {
    font-size: 15px;
}

.sv-faq-contact a {
    color: #d6f345;
    unicode-bidi: embed;
    direction: ltr;
}

/* ---------- other services ---------- */
.sv-others-area {
    position: relative;
    z-index: 1;
    padding: 110px 0 120px;
}

.sv-others {
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-other {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 64px 1fr auto 64px;
    align-items: center;
    gap: 24px;
    padding: 28px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-other::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 18px;
    background: #d6f345;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.sv-other .icon,
.sv-other .arrow {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.sv-other .title {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    transition: color 0.5s ease;
}

.sv-other .en {
    direction: ltr;
    color: #5c5c5c;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: color 0.5s ease;
}

.sv-other:hover::after {
    transform: scaleX(1);
}

.sv-other:hover .title,
.sv-other:hover .en {
    color: #171619;
}

.sv-other:hover .icon,
.sv-other:hover .arrow {
    background: #171619;
    border-color: #171619;
    color: #d6f345;
}

.sv-other:hover .arrow {
    transform: rotate(45deg);
}

.sv-other-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 260px;
    height: 170px;
    overflow: hidden;
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.sv-other-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Services list */

/* ---------- hero ---------- */
.svl-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 210px 0 100px;
}

.svl-hero-shadow-1 {
    position: absolute;
    top: 30%;
    left: -30px;
    z-index: -1;
}

.svl-hero-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 10%;
    z-index: -1;
}

.svl-hero-marquee {
    position: absolute;
    bottom: -30px;
    left: 0;
    z-index: -1;
    width: 100%;
    direction: ltr;
    pointer-events: none;
}

.svl-hero-marquee-row {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 40px;
    white-space: nowrap;
    font-size: 150px;
    font-weight: 700;
    line-height: 1.2;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
}

.svl-hero-marquee-row i {
    font-style: normal;
    font-size: 0.35em;
    color: rgba(214, 243, 69, 0.2);
    -webkit-text-stroke: 0;
}

.svl-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: end;
    margin-top: 30px;
}

.svl-hero-title {
    margin: 0;
    color: #fff;
    font-size: 78px;
    font-weight: 700;
    line-height: 1.3;
}

.svl-hero-title .accent {
    color: #d6f345;
}

.svl-hero-side {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 12px;
}

.svl-hero-count {
    display: flex;
    align-items: center;
    gap: 16px;
}

.svl-hero-count b {
    color: transparent;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    -webkit-text-stroke: 1.5px #d6f345;
}

.svl-hero-count span {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
}

.svl-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 50px;
}

.svl-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 100px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.svl-pill i {
    color: #d6f345;
    transition: color 0.4s ease;
}

.svl-pill:hover {
    background: #d6f345;
    border-color: #d6f345;
    color: #171619;
}

.svl-pill:hover i {
    color: #171619;
}

/* ---------- expanding panels ---------- */
.svl-panels-area {
    position: relative;
    z-index: 1;
    padding: 90px 0 110px;
}

.svl-panels {
    display: flex;
    gap: 14px;
    height: 620px;
}

.svl-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: flex-grow 0.8s cubic-bezier(0.55, 0.085, 0, 0.99), border-color 0.5s ease;
}

.svl-panel.is-active {
    flex-grow: 3.4;
    border-color: rgba(214, 243, 69, 0.45);
}

.svl-panel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.45);
    transform: scale(1.15);
    transition: filter 0.8s ease, transform 1.2s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.svl-panel.is-active .svl-panel-bg {
    filter: none;
    transform: scale(1);
}

.svl-panel-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.2) 100%);
}

.svl-panel-top {
    position: absolute;
    top: 24px;
    right: 24px;
    left: 24px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.svl-panel-top .num {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    font-weight: 700;
}

.svl-panel-top .icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(23, 22, 25, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, color 0.5s ease;
}

.svl-panel.is-active .svl-panel-top .icon {
    background: #d6f345;
    color: #171619;
}

.svl-panel-vtitle {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-size: 26px;
    font-weight: 700;
    transition: opacity 0.4s ease;
}

.svl-panel.is-active .svl-panel-vtitle {
    opacity: 0;
}

.svl-panel-body {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    min-width: 440px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.svl-panel.is-active .svl-panel-body {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.25s;
}

.svl-panel-body .en {
    direction: ltr;
    color: #d6f345;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.svl-panel-body .title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
}

.svl-panel-body .disc {
    max-width: 520px;
    color: #d0d0d0;
    font-size: 16px;
    line-height: 1.8;
}

.svl-panel-body .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.svl-panel-body .pd-tag {
    background: rgba(50, 50, 50, 0.75);
}

.svl-panel-body .more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-weight: 700;
}

.svl-panel-body .arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.svl-panel:hover .svl-panel-body .arrow {
    transform: rotate(45deg);
}

/* ---------- ecosystem ---------- */
.svl-eco-area {
    position: relative;
    z-index: 1;
    padding: 60px 0 110px;
}

.svl-eco-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.svl-eco-text .sec-title {
    font-size: 44px;
    line-height: 1.35;
}

.svl-eco-text > p {
    margin-top: 24px;
}

.svl-combos {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.svl-combo {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.5s ease;
}

.svl-combo:hover {
    border-color: rgba(214, 243, 69, 0.4);
}

.svl-combo .pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.svl-combo .pair b {
    color: #fff;
    font-size: 17px;
}

.svl-combo .pair i {
    color: #d6f345;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.svl-combo .result {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9e9e9e;
    font-size: 15px;
}

.svl-combo .result i {
    color: #d6f345;
    font-size: 13px;
}

.svl-eco {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 1;
}

.svl-eco-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.svl-eco-svg .ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 0.3;
    stroke-dasharray: 1 1.5;
}

.svl-eco-line {
    stroke: rgba(214, 243, 69, 0.55);
    stroke-width: 0.35;
}

.svl-eco-dot {
    fill: #d6f345;
    opacity: 0;
}

.svl-eco-core {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: auto;
    width: 30%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    box-shadow: 0 0 60px rgba(214, 243, 69, 0.45);
}

.svl-eco-core i {
    font-size: 26px;
}

.svl-eco-core b {
    font-size: 16px;
}

.svl-eco-node {
    position: absolute;
    z-index: 3;
    width: 130px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.svl-eco-node .icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #171619;
    border: 1px solid rgba(214, 243, 69, 0.5);
    color: #d6f345;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(214, 243, 69, 0.15);
    transition: background 0.4s ease, color 0.4s ease;
}

.svl-eco-node .title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.svl-eco-node:hover .icon {
    background: #d6f345;
    color: #171619;
}

.svl-cta-area {
    padding: 0 0 120px;
}

/* Order wizard */

.od-page {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 100vh;
    padding: 190px 0 130px;
}

.od-blob {
    position: absolute;
    top: 25%;
    left: 30%;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 243, 69, 0.22) 0%, rgba(214, 243, 69, 0) 65%);
    filter: blur(40px);
    pointer-events: none;
}

.od-bg-num {
    position: absolute;
    left: 3%;
    bottom: 3%;
    z-index: -1;
    overflow: hidden;
    line-height: 1;
    pointer-events: none;
}

.od-bg-num span {
    display: block;
    color: transparent;
    font-size: 320px;
    font-weight: 700;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
}

.od-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.od-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(214, 243, 69, 0.1);
    color: #d6f345;
    font-size: 14px;
    font-weight: 600;
}

.od-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 50px;
    align-items: start;
}

/* ---------- wizard ---------- */
.od-wizard {
    position: relative;
    min-height: 560px;
    padding: 44px 48px 30px;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(45, 45, 45, 0.85) 0%, rgba(6, 6, 6, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

.od-progress {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 40px;
}

.od-progress-bar {
    flex: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
}

.od-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to left, #d6f345, #8EBC3F);
    box-shadow: 0 0 12px rgba(214, 243, 69, 0.7);
    transform: scaleX(0);
    transform-origin: right;
}

.od-progress-text {
    color: #838383;
    font-size: 14px;
    white-space: nowrap;
}

.od-progress-text b {
    color: #d6f345;
    font-size: 18px;
}

.od-steps {
    flex: 1;
}

.od-step {
    display: none;
}

.od-step.is-active {
    display: block;
}

.od-q-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #d6f345;
    font-size: 16px;
    font-weight: 700;
}

.od-q-num i {
    font-size: 13px;
}

.od-q-title {
    margin: 0 0 10px;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
}

.od-q-hint {
    margin-bottom: 30px;
    color: #9e9e9e;
    font-size: 16px;
}

/* choices: services and options share the lime sweep */
.od-service,
.od-option {
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    font-family: IRANSans;
    text-align: right;
    color: #fff;
    border-radius: 18px;
    background: rgba(17, 17, 17, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

.od-service::after,
.od-option::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #d6f345;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.55s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.od-service:hover,
.od-option:hover,
.od-service:focus-visible,
.od-option:focus-visible {
    outline: none;
    background-color: #1a1a1d;
    border-color: rgba(214, 243, 69, 0.5);
}

.od-service.is-selected,
.od-option.is-selected {
    color: #171619;
    border-color: #d6f345;
}

.od-service.is-selected::after,
.od-option.is-selected::after {
    transform: scaleX(1);
}

.od-service .key,
.od-option .key {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #838383;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.od-service .check,
.od-option .check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #171619;
    color: #d6f345;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.is-selected .check {
    opacity: 1;
}

.od-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.od-service {
    min-height: 150px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.od-service .key,
.od-service .check {
    position: absolute;
    top: 14px;
    left: 14px;
}

.od-service.is-selected .key {
    opacity: 0;
}

.od-service .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: rgba(214, 243, 69, 0.12);
    color: #d6f345;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.od-service .title {
    font-size: 18px;
    font-weight: 700;
}

.od-service .en {
    direction: ltr;
    color: #838383;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: color 0.4s ease;
}

.od-service.is-selected .icon {
    background: #171619;
    color: #d6f345;
}

.od-service.is-selected .en {
    color: #3a3a3a;
}

.od-options {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.od-option {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 17px;
    font-weight: 600;
}

.od-option .check {
    margin-right: auto;
}

.od-option.is-selected .key {
    border-color: rgba(0, 0, 0, 0.25);
    color: #171619;
}

.od-ripple {
    position: absolute;
    z-index: -1;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: rgba(214, 243, 69, 0.6);
    pointer-events: none;
}

.od-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.od-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-family: IRANSans;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.od-back:hover {
    color: #d6f345;
}

.od-back:disabled {
    opacity: 0.3;
    cursor: default;
    color: #fff;
}

.od-kbd {
    color: #5c5c5c;
    font-size: 13px;
}

.od-kbd kbd {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9e9e9e;
    font-family: IRANSans;
    font-size: 12px;
    text-align: center;
}

/* ---------- contact fields ---------- */
.od-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.od-field {
    position: relative;
    display: block;
}

.od-field-notes {
    grid-column: 1 / -1;
}

.od-field input,
.od-field textarea {
    width: 100%;
    padding: 26px 50px 10px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 10, 10, 0.8);
    color: #fff;
    font-family: IRANSans;
    font-size: 17px;
    outline: none;
    resize: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.od-field textarea {
    padding-right: 18px;
}

.od-field input:focus,
.od-field textarea:focus {
    border-color: #d6f345;
    box-shadow: 0 0 0 4px rgba(214, 243, 69, 0.12);
}

.od-field-label {
    position: absolute;
    top: 19px;
    right: 50px;
    color: #838383;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.od-field-label small {
    font-size: 12px;
}

.od-field-notes .od-field-label {
    right: 18px;
}

/* floating label */
.od-field input:focus + .od-field-label,
.od-field input:not(:placeholder-shown) + .od-field-label,
.od-field textarea:focus + .od-field-label,
.od-field textarea:not(:placeholder-shown) + .od-field-label {
    top: 7px;
    color: #d6f345;
    font-size: 12px;
}

.od-field-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    color: #5c5c5c;
    font-size: 17px;
    transform: translateY(-50%);
    transition: color 0.3s ease;
}

.od-field:focus-within .od-field-icon {
    color: #d6f345;
}

/* the number is left-aligned: keep it clear of the check badge on the left */
.od-field-phone input {
    padding-left: 54px;
}

.od-field-ok {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.od-field.is-valid .od-field-ok {
    transform: translateY(-50%) scale(1);
}

.od-field.is-invalid input {
    border-color: #ff5c5c;
    box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.12);
}

.od-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.od-error {
    min-height: 1.6em;
    margin: 14px 0 0;
    color: #ff7a7a;
    font-size: 14px;
}

.od-submit-wrap {
    margin-top: 12px;
}

.od-spinner {
    display: none;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border-radius: 50%;
    border: 2px solid rgba(23, 22, 25, 0.25);
    border-top-color: #171619;
    animation: odSpin 0.7s linear infinite;
}

.od-submit.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

.od-submit.is-loading .od-spinner {
    display: inline-block;
}

@keyframes odSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- live summary ---------- */
.od-summary {
    position: sticky;
    top: 120px;
}

.od-summary-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgb(45, 45, 45) 0%, rgb(6, 6, 6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.od-summary-card::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: 160px;
    height: 160px;
    background: #d6f345;
    filter: blur(90px);
    opacity: 0.3;
    pointer-events: none;
}

.od-summary-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.od-summary-head .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    align-items: center;
    justify-content: center;
}

.od-summary-head h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
}

.od-summary-empty {
    margin: 10px 0;
    color: #838383;
    font-size: 14px;
}

.od-summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.od-summary-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label edit" "value edit";
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.od-summary-list li:hover {
    border-color: rgba(214, 243, 69, 0.4);
    background-color: rgba(214, 243, 69, 0.05);
}

.od-summary-list .label {
    grid-area: label;
    color: #838383;
    font-size: 12px;
}

.od-summary-list .value {
    grid-area: value;
    color: #fff;
    font-size: 15px;
}

.od-summary-list .edit {
    grid-area: edit;
    align-self: center;
    color: #5c5c5c;
    font-size: 12px;
    transition: color 0.3s ease;
}

.od-summary-list li:hover .edit {
    color: #d6f345;
}

.od-summary-foot {
    margin-top: 20px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #9e9e9e;
    font-size: 13px;
}

.od-summary-foot i {
    margin-left: 6px;
    color: #d6f345;
}

/* ---------- success ---------- */
.od-success {
    position: relative;
    max-width: 640px;
    margin: 20px auto 0;
    padding: 30px 20px;
    text-align: center;
}

.od-confetti {
    position: absolute;
    top: 105px;
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    pointer-events: none;
}

.od-confetti span {
    position: absolute;
    width: 10px;
    height: 6px;
    border-radius: 2px;
}

.od-success-badge {
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: #d6f345;
    box-shadow: 0 0 0 16px rgba(214, 243, 69, 0.12), 0 0 80px rgba(214, 243, 69, 0.5);
}

.od-success-badge svg {
    display: block;
    width: 100%;
    height: 100%;
}

.od-success-ring {
    fill: none;
    stroke: #171619;
    stroke-width: 2;
    opacity: 0.25;
}

.od-success-check {
    fill: none;
    stroke: #171619;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.od-success-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
}

.od-success-text {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

.od-code {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
    padding: 12px 14px 12px 22px;
    border-radius: 18px;
    background: #171619;
    border: 1px dashed rgba(214, 243, 69, 0.5);
}

.od-code-label {
    color: #838383;
    font-size: 14px;
}

.od-code-value {
    min-width: 150px;
    color: #d6f345;
    font-size: 28px;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

.od-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 12px;
    background: rgba(214, 243, 69, 0.12);
    color: #d6f345;
    font-family: IRANSans;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.od-code-copy.is-done {
    background: #d6f345;
    color: #171619;
}

.od-success-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 40px;
}

/* =====================================================================
   BLOG LIST (Views/Blog/Index.cshtml)
   ===================================================================== */
.bl-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 210px 0 90px;
}

.bl-hero-shadow-1 {
    position: absolute;
    top: 25%;
    left: 10%;
    z-index: -1;
}

.bl-hero-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 30%;
    z-index: -1;
}

.bl-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 30px;
}

.bl-hero-title {
    margin: 0;
    color: #fff;
    font-size: 66px;
    font-weight: 700;
    line-height: 1.35;
}

.bl-hero-title .accent {
    color: #d6f345;
}

.bl-hero-text {
    max-width: 560px;
    margin: 26px 0 0;
    color: #a5a5a5;
    font-size: 18px;
    line-height: 1.9;
}

.bl-search {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 520px;
    margin-top: 36px;
    padding: 8px 22px;
    border-radius: 100px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: text;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.bl-search:focus-within {
    border-color: #d6f345;
    box-shadow: 0 0 0 5px rgba(214, 243, 69, 0.1);
}

.bl-search > i {
    color: #d6f345;
    font-size: 18px;
}

.bl-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: IRANSans;
    font-size: 17px;
}

.bl-search input::placeholder {
    color: #6f6f6f;
}

.bl-search input::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: 0.5;
}

.bl-search kbd {
    min-width: 30px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #838383;
    font-family: IRANSans;
    font-size: 14px;
    text-align: center;
}

/* fanned covers */
.bl-hero-stack {
    position: relative;
    height: 480px;
}

.bl-stack-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 290px;
    height: 390px;
    margin: -195px 0 0 -145px;
    border-radius: 26px;
    overflow: hidden;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    will-change: transform;
}

.bl-stack-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bl-stack-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.88) 100%);
}

.bl-stack-cat {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    padding: 6px 14px;
    border-radius: 100px;
    background: #d6f345;
    color: #171619;
    font-size: 13px;
    font-weight: 700;
}

.bl-stack-title {
    position: absolute;
    right: 22px;
    left: 22px;
    bottom: 22px;
    z-index: 1;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.bl-stack-badge {
    position: absolute;
    left: 4%;
    bottom: 2%;
    z-index: 5;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 20px 40px rgba(214, 243, 69, 0.25);
}

.bl-stack-badge b {
    font-size: 36px;
    line-height: 1.1;
}

.bl-stack-badge span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* shared meta + author */
.bl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #838383;
    font-size: 14px;
}

.bl-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bl-meta i {
    color: #d6f345;
}

.bl-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.bl-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d6f345;
}

.bl-author span {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.bl-author b {
    color: #fff;
    font-size: 16px;
}

.bl-author small {
    color: #838383;
    font-size: 13px;
}

/* ---------- featured ---------- */
.bl-featured-area {
    position: relative;
    z-index: 1;
    padding: 20px 0 60px;
}

.bl-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 34px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.5s ease;
}

.bl-featured:hover {
    border-color: rgba(214, 243, 69, 0.4);
}

.bl-featured-img {
    position: relative;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
}

.bl-featured-img img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
}

.bl-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 30px 40px;
}

.bl-featured-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 14px;
    font-weight: 700;
}

.bl-featured-tag .pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6f345;
}

.bl-featured-tag .pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid #d6f345;
    animation: blPulse 1.6s ease-out infinite;
}

@keyframes blPulse {
    from {
        transform: scale(0.4);
        opacity: 1;
    }

    to {
        transform: scale(1.6);
        opacity: 0;
    }
}

.bl-featured-title {
    margin: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    transition: color 0.4s ease;
}

.bl-featured:hover .bl-featured-title {
    color: #d6f345;
}

.bl-featured-excerpt {
    margin: 0;
    color: #a5a5a5;
    font-size: 17px;
    line-height: 1.9;
}

.bl-featured-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bl-featured-go {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d6f345;
    color: #171619;
    font-size: 22px;
    transition: transform 0.5s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.bl-featured:hover .bl-featured-go {
    transform: rotate(45deg);
}

/* ---------- list ---------- */
.bl-list-area {
    position: relative;
    z-index: 1;
    padding: 60px 0 110px;
}

.bl-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 50px;
}

.bl-list-title {
    margin: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
}

.bl-filters {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 100px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.bl-filters::-webkit-scrollbar {
    display: none;
}

.bl-filter-pill {
    position: absolute;
    top: 6px;
    left: 0;
    height: calc(100% - 12px);
    width: 0;
    border-radius: 100px;
    background: #d6f345;
    pointer-events: none;
}

.bl-filter {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 10px 20px;
    border-radius: 100px;
    color: #bdbdbd;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.35s ease;
}

.bl-filter sup {
    margin-right: 2px;
    font-size: 11px;
    opacity: 0.7;
}

.bl-filter:hover {
    color: #fff;
}

.bl-filter.is-active {
    color: #171619;
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 30px;
}

/* card */
.bl-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.bl-card.is-hidden {
    display: none;
}

.bl-card-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden;
    background: #171619;
}

.bl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s ease;
}

.bl-card:hover .bl-card-img img {
    transform: scale(1.08);
    filter: brightness(0.75);
}

.bl-card-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
}

.bl-card-cat {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.bl-card-cat i {
    color: #d6f345;
}

.bl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 14px;
    padding-top: 24px;
}

.bl-card-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
}

.bl-card-title a {
    color: #fff;
    background: linear-gradient(#d6f345, #d6f345) no-repeat right bottom / 0 2px;
    transition: background-size 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease;
}

.bl-card:hover .bl-card-title a {
    color: #d6f345;
    background-size: 100% 2px;
}

.bl-card-excerpt {
    margin: 0;
    color: #8f8f8f;
    font-size: 15px;
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bl-card-more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.bl-card-more i {
    color: #d6f345;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.bl-card:hover .bl-card-more i {
    transform: translateX(-8px);
}

.bl-empty {
    padding: 70px 20px;
    text-align: center;
    border-radius: 30px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.bl-empty .icon {
    font-size: 44px;
    color: #d6f345;
}

.bl-empty h3 {
    margin: 16px 0 8px;
    color: #fff;
    font-size: 24px;
}

.bl-empty p {
    margin: 0 0 22px;
    color: #8f8f8f;
}

.bl-empty .sv-link-btn {
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: IRANSans;
    font-size: 16px;
    cursor: pointer;
}

/* ---------- cta ---------- */
.bl-cta-area {
    padding: 0 0 120px;
}

.bl-cta {
    position: relative;
    overflow: hidden;
    padding: 110px 40px;
    border-radius: 40px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.bl-cta-marquee {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    direction: ltr;
    transform: translateY(-50%);
    pointer-events: none;
}

.bl-cta-marquee-row {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 40px;
    white-space: nowrap;
    font-size: 170px;
    font-weight: 700;
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
}

.bl-cta-marquee-row i {
    font-style: normal;
    font-size: 0.3em;
    color: rgba(214, 243, 69, 0.25);
    -webkit-text-stroke: 0;
}

.bl-cta-content {
    position: relative;
    z-index: 1;
}

.bl-cta-content h2 {
    margin: 0;
    color: #fff;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.5;
}

.bl-cta-content h2 .accent {
    color: #d6f345;
}

.bl-cta-content p {
    margin: 16px 0 36px;
    color: #a5a5a5;
    font-size: 18px;
}

.bl-cta-btn {
    display: inline-block;
}

/* =====================================================================
   ARTICLE (Views/Blog/Details.cshtml)
   ===================================================================== */
.ar-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: 4px;
    pointer-events: none;
}

.ar-progress span {
    display: block;
    height: 100%;
    background: #d6f345;
    box-shadow: 0 0 12px rgba(214, 243, 69, 0.6);
    transform: scaleX(0);
    transform-origin: right center;
}

.ar-hero {
    position: relative;
    z-index: 1;
    padding: 200px 0 0;
}

.ar-hero-shadow {
    position: absolute;
    top: 20%;
    left: 20%;
    z-index: -1;
}

.ar-hero-inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ar-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #d6f345;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.4s ease, color 0.4s ease;
}

.ar-cat:hover {
    background: #d6f345;
    color: #171619;
}

.ar-title {
    margin: 26px 0 0;
    color: #fff;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.45;
}

.ar-excerpt {
    max-width: 780px;
    margin: 24px 0 0;
    color: #a5a5a5;
    font-size: 19px;
    line-height: 1.9;
}

.ar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 30px;
    margin-top: 36px;
}

.ar-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a5a5a5;
    font-size: 15px;
}

.ar-meta-item i {
    color: #d6f345;
}

.ar-cover {
    margin-top: 70px;
}

.ar-cover-inner {
    position: relative;
    height: 640px;
    border-radius: 40px;
    overflow: hidden;
    background: #171619;
}

.ar-cover-inner img {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
}

/* ---------- body ---------- */
.ar-body-area {
    padding: 100px 0 80px;
}

.ar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 90px;
    align-items: start;
}

.ar-content {
    max-width: 800px;
    color: #cfcfcf;
    font-size: 18px;
    line-height: 2.1;
}

.ar-content > p:first-child {
    color: #fff;
    font-size: 21px;
    line-height: 2;
}

.ar-content p {
    margin: 0 0 24px;
}

.ar-content strong {
    color: #fff;
}

.ar-content h2 {
    --bar: 1;
    position: relative;
    margin: 64px 0 22px;
    padding-right: 24px;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.6;
    scroll-margin-top: 130px;
}

.ar-content h2::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 6px;
    height: calc(100% - 16px);
    border-radius: 6px;
    background: #d6f345;
    transform: scaleY(var(--bar));
    transform-origin: top center;
}

.ar-content h3 {
    margin: 40px 0 14px;
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.7;
}

.ar-content ul,
.ar-content ol {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ar-content ul li,
.ar-content ol li {
    position: relative;
    padding-right: 40px;
}

.ar-content ul li::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d6f345;
    box-shadow: 0 0 0 5px rgba(214, 243, 69, 0.12);
}

.ar-content ol {
    counter-reset: ar-ol;
}

.ar-content ol li {
    counter-increment: ar-ol;
}

.ar-content ol li::before {
    content: counter(ar-ol, persian);
    position: absolute;
    top: 4px;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}

.ar-content blockquote {
    position: relative;
    margin: 50px 0;
    padding: 46px 100px 46px 46px;
    border-radius: 30px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.9;
    overflow: hidden;
}

.ar-content blockquote::before {
    content: "\201D";
    position: absolute;
    top: 30px;
    right: 26px;
    color: #d6f345;
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: 1;
    height: 60px;
}

.ar-content blockquote::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(214, 243, 69, 0.12);
    filter: blur(40px);
}

.ar-callout {
    position: relative;
    margin: 34px 0;
    padding: 24px 74px 24px 28px;
    border-radius: 20px;
    border: 1px dashed rgba(214, 243, 69, 0.45);
    background: rgba(214, 243, 69, 0.05);
    font-size: 17px;
    line-height: 2;
}

.ar-callout::before {
    content: "\f0eb";
    position: absolute;
    top: 24px;
    right: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
}

.ar-callout strong {
    color: #d6f345;
}

.ar-content figure {
    margin: 44px 0;
}

.ar-content figure img {
    width: 100%;
    border-radius: 24px;
}

.ar-content figcaption {
    margin-top: 12px;
    color: #838383;
    font-size: 14px;
    text-align: center;
}

.ar-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 60px;
    padding-top: 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ar-tags .label {
    margin-left: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.ar-tags .label i {
    color: #d6f345;
}

.ar-tag {
    padding: 6px 16px;
    border-radius: 100px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #bdbdbd;
    font-size: 14px;
    line-height: 1.8;
}

.ar-author-box {
    display: flex;
    gap: 28px;
    margin-top: 40px;
    padding: 30px;
    border-radius: 30px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ar-author-box img {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 24px;
    object-fit: cover;
}

.ar-author-label {
    color: #d6f345;
    font-size: 14px;
    font-weight: 600;
}

.ar-author-box h3 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 22px;
}

.ar-author-box small {
    color: #838383;
    font-size: 14px;
}

.ar-author-box p {
    margin: 12px 0 0;
    color: #a5a5a5;
    font-size: 15px;
    line-height: 1.9;
}

/* sidebar */
.ar-side {
    position: sticky;
    top: 120px;
}

.ar-side-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ar-toc,
.ar-share {
    padding: 26px;
    border-radius: 26px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ar-side-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.ar-side-title i {
    color: #d6f345;
}

.ar-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ar-toc-list a {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    overflow: hidden;
    color: #8f8f8f;
    font-size: 14px;
    line-height: 1.8;
    transition: color 0.35s ease, background 0.35s ease;
}

.ar-toc-list a .n {
    flex: 0 0 auto;
    color: #5c5c5c;
    font-weight: 700;
    transition: color 0.35s ease;
}

.ar-toc-list a .fill {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #d6f345;
    transform: scaleX(0);
    transform-origin: right center;
}

.ar-toc-list a:hover {
    color: #fff;
}

.ar-toc-list a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.ar-toc-list a.is-active .n,
.ar-toc-list a.is-done .n {
    color: #d6f345;
}

.ar-share-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ar-share-btns a,
.ar-copy {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.ar-share-btns a:hover,
.ar-copy:hover,
.ar-copy.is-copied {
    background: #d6f345;
    border-color: #d6f345;
    color: #171619;
}

.ar-copy-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    padding: 4px 10px;
    border-radius: 8px;
    background: #d6f345;
    color: #171619;
    font-family: IRANSans;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.ar-copy.is-copied .ar-copy-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ar-service {
    position: relative;
    overflow: hidden;
    padding: 28px 26px;
    border-radius: 26px;
    background: #d6f345;
    color: #171619;
}

.ar-service .icon {
    position: absolute;
    left: -14px;
    bottom: -20px;
    font-size: 110px;
    opacity: 0.12;
    transform: rotate(-12deg);
}

.ar-service p {
    position: relative;
    margin: 0 0 18px;
    color: #171619;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
}

.ar-service p b {
    color: #171619;
    font-weight: 800;
}

.ar-service-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 100px;
    background: #171619;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: gap 0.4s ease;
}

.ar-service-btn:hover {
    gap: 16px;
}

/* ---------- prev / next ---------- */
.ar-nav-area {
    padding: 0 0 40px;
}

.ar-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ar-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    min-height: 230px;
    padding: 34px;
    border-radius: 30px;
    overflow: hidden;
    isolation: isolate;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ar-nav-item.next {
    text-align: left;
}

.ar-nav-item.is-empty {
    visibility: hidden;
}

.ar-nav-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    transform: scale(1.15);
    transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.ar-nav-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.ar-nav-item:hover .ar-nav-bg {
    opacity: 0.6;
    transform: scale(1);
}

.ar-nav-label {
    color: #d6f345;
    font-size: 15px;
    font-weight: 700;
}

.ar-nav-label i {
    margin: 0 4px;
}

.ar-nav-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.7;
}

/* ---------- related ---------- */
.ar-related-area {
    padding: 80px 0 120px;
}

.ar-related-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 44px;
}

.ar-related-title {
    margin: 0;
    color: #fff;
    font-size: 44px;
    font-weight: 700;
}

.ar-related-grid .bl-card-excerpt {
    display: none;
}

/* header: account button next to the CTA */
.ActionBtnWrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.TopBar-account {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(214, 243, 69, 0.4);
    color: #fff;
    font-size: 18px;
    transition: background 0.3s ease, color 0.3s ease;
}

.TopBar-account:hover {
    background: #d6f345;
    color: #171619;
}

/* signed in: a small lime dot */
.TopBar-account.is-in::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d6f345;
    border: 2px solid #171619;
}

.Menu .menu-account {
    display: none;
}

/* =====================================================================
   RESPONSIVE
   Breakpoints: 1399 / 1199 / 991 (tablet) / 767 (mobile) / 575 / 400
   ===================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

/* safety net: clip stray decorative elements without breaking position:sticky */
.Main {
    overflow-x: clip;
}

/* room for the tilted prev/next team cards (was accidental extra height in quirks mode) */
.team-slider {
    padding-bottom: 110px;
}

@media (max-width: 767px) {
    .team-slider {
        padding-bottom: 20px;
    }
}

/* ---------- mobile menu elements (hidden on desktop) ---------- */
.menu-toggle,
.menu-overlay,
.Menu .menu-cta {
    display: none;
}

.menu-toggle {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #d6f345;
    cursor: pointer;
    position: relative;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #171619;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0, 0.99);
}

.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle span:nth-child(3) { top: 28px; }

.TopBar.menu-open .menu-toggle span:nth-child(1) {
    top: 22px;
    transform: translateX(-50%) rotate(45deg);
}

.TopBar.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.TopBar.menu-open .menu-toggle span:nth-child(3) {
    top: 22px;
    transform: translateX(-50%) rotate(-45deg);
}

/* touch devices have no hover: keep card action buttons reachable */
@media (hover: none) {
    .portfolio-card .card-btn {
        transform: translate(-50%, -50%) scale(0.6);
    }
}

/* ===================== <= 1399px ===================== */
@media (max-width: 1399px) {
    .Menu .main-nav {
        gap: 34px;
    }

    .hero-content h1 {
        font-size: 90px;
    }

    .sec-title {
        font-size: 48px;
    }

    .blog-item:is(.active) {
        width: 540px;
    }

    /* project details */
    .pd-hero-title {
        font-size: 76px;
    }

    .pd-next-title {
        font-size: 64px;
    }

    /* about */
    .ab-hero-title {
        font-size: 66px;
    }

    .ab-photo-title {
        font-size: 54px;
    }

    .ab-statement {
        font-size: 34px;
    }

    /* services */
    .sv-hero-title {
        font-size: 64px;
    }

    .sv-other .title {
        font-size: 34px;
    }

    /* services list */
    .svl-hero-title {
        font-size: 66px;
    }

    .svl-panel-body .title {
        font-size: 30px;
    }

    /* blog */
    .bl-hero-title {
        font-size: 58px;
    }

    .ar-layout {
        gap: 60px;
    }
}

/* ===================== <= 1199px ===================== */
@media (max-width: 1199px) {

    /* header */
    .TopBar {
        padding: 0 25px 0 10px;
        gap: 20px;
    }

    .Menu .main-nav {
        gap: 22px;
    }

    .Menu li a {
        font-size: 15px;
    }

    .TopBar .ActionBtn {
        font-size: 16px;
        padding-left: 20px;
        gap: 10px;
    }

    .TopBar .ActionBtn .icon {
        width: 44px;
        height: 44px;
    }

    /* hero */
    .hero-content h1 {
        font-size: 80px;
        margin-left: 0;
    }

    .hero-content h2 {
        margin-left: 0;
    }

    .hero-social-position {
        transform: scale(0.75);
        transform-origin: left top;
    }

    /* about */
    .about-wrap {
        gap: 40px;
    }

    .sec-title {
        font-size: 42px;
        line-height: 1.2;
    }

    /* services */
    .services-sec-title {
        padding: 0;
        flex-wrap: wrap;
        gap: 20px 40px;
    }

    .services-sec-title .sec-title {
        font-size: 30px;
    }

    .services-wrap {
        grid-template-columns: 250px 1fr;
    }

    .services-tabs-btn .nav-link {
        font-size: 18px;
        padding: 26px 24px;
    }

    .services-tabs-pane-single .content-wrap {
        padding: 40px 30px;
    }

    .services-tabs-pane-single .item-img {
        height: 480px;
    }

    .services-tabs-btn-scrollbar {
        height: 480px;
    }

    /* portfolio */
    .portfolio-item-wrap {
        gap: 30px;
    }

    .portfolio-card {
        height: 360px;
    }

    /* team */
    .team-bg-title .title-elm {
        font-size: 14em;
    }

    /* faqs */
    .faqs-wrap {
        gap: 40px;
    }

    /* blog */
    .blog-wrap {
        gap: 25px;
    }

    .blog-item:is(.active) {
        width: 46%;
    }

    /* footer */
    .footer-main {
        gap: 40px 30px;
    }

    /* contact page */
    .contact-img .earth {
        width: 100%;
        max-width: 475px;
    }

    .contact-info {
        gap: 30px;
    }

    /* project details */
    .pd-hero-title {
        font-size: 64px;
    }

    .pd-hero-cover {
        height: 560px;
    }

    .pd-about-wrap {
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
    }

    .pd-about-content .sec-title,
    .pd-video-sec-title .sec-title,
    .pd-gallery-head .sec-title {
        font-size: 38px;
    }

    .pd-specs-card {
        padding: 28px;
    }

    .pd-video-marquee-text {
        font-size: 140px;
    }

    /* about */
    .ab-hero-title {
        font-size: 56px;
    }

    .ab-hero-grid {
        grid-template-columns: 1fr 260px;
        gap: 40px;
    }

    .ab-hero-badge {
        width: 150px;
        height: 150px;
    }

    .ab-hero-badge .core {
        width: 92px;
        height: 92px;
    }

    .ab-hero-badge .core b {
        font-size: 28px;
    }

    .ab-statement {
        font-size: 30px;
    }

    .ab-mission-wrap {
        gap: 50px;
    }

    .ab-mission-title .sec-title,
    .ab-goals-sec-title .sec-title,
    .ab-history-sec-title .sec-title {
        font-size: 38px;
    }

    .ab-goal-card {
        gap: 36px;
        padding: 36px;
    }

    .ab-goal-content .title {
        font-size: 30px;
    }

    .ab-tl-year {
        font-size: 76px;
    }

    .ab-founders-wrap {
        gap: 50px;
    }

    .ab-founders-quote {
        font-size: 27px;
    }

    .ab-ribbon-track {
        font-size: 46px;
    }

    /* services */
    .sv-hero-title {
        font-size: 54px;
    }

    .sv-hero-grid {
        gap: 40px;
    }

    .sv-sec-title .sec-title,
    .sv-process-pin .sec-title,
    .sv-faq-side .sec-title {
        font-size: 38px;
    }

    .sv-features {
        gap: 18px;
    }

    .sv-feature-inner {
        padding: 30px 24px;
    }

    .sv-process-wrap {
        gap: 50px;
    }

    .sv-process-counter .digits,
    .sv-process-counter .digits-col span {
        height: 120px;
        line-height: 120px;
    }

    .sv-process-counter .digits-col span {
        font-size: 110px;
    }

    .sv-faq-wrap {
        gap: 40px;
    }

    .sv-tool {
        padding: 14px 24px;
        font-size: 18px;
    }

    /* services list */
    .svl-hero-title {
        font-size: 56px;
    }

    .svl-hero-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
    }

    .svl-hero-marquee-row {
        font-size: 120px;
    }

    .svl-panels {
        height: 560px;
    }

    .svl-panel-body {
        padding: 28px;
    }

    .svl-eco-wrap {
        gap: 40px;
    }

    .svl-eco-text .sec-title {
        font-size: 38px;
    }

    /* order */
    .od-layout {
        grid-template-columns: 1fr 320px;
        gap: 30px;
    }

    .od-q-title {
        font-size: 34px;
    }

    /* blog */
    .bl-hero-title {
        font-size: 50px;
    }

    .bl-featured-title {
        font-size: 32px;
    }

    .bl-featured-img {
        height: 440px;
    }

    .bl-grid {
        gap: 44px 24px;
    }

    .bl-card-title {
        font-size: 20px;
    }

    .bl-cta-content h2 {
        font-size: 44px;
    }

    .ar-title {
        font-size: 48px;
    }

    .ar-cover-inner {
        height: 540px;
    }

    .ar-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 50px;
    }
}

/* ===================== <= 991px (tablet) ===================== */
@media (max-width: 991px) {

    p {
        font-size: 16px;
        line-height: 1.8;
    }

    /* ---------- header / mobile menu ---------- */
    .wa_sticky_header:is(.TopBar) {
        top: 16px;
    }

    .wa_sticky_header:is(.TopBar):is(.wa_sticky_show) {
        top: 10px;
    }

    .TopBar {
        padding: 8px 16px 8px 8px;
        gap: 12px;
    }

    .TopBar .Logo {
        margin-left: auto;
        gap: 10px;
    }

    .TopBar .Logo img {
        width: 42px;
    }

    .TopBar .Logo h1 {
        font-size: 19px;
        margin: 0;
    }

    .menu-toggle {
        display: block;
    }

    .TopBar .ActionBtn {
        font-size: 14px;
        padding: 4px 16px 4px 4px;
    }

    .TopBar .ActionBtn .icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .Menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        left: 0;
        background: #171619;
        border: 1px solid rgba(214, 243, 69, 0.4);
        box-shadow: 1.782px 0.908px 32.2px 2.8px rgba(214, 243, 69, 0.23);
        border-radius: 24px;
        padding: 8px 22px;
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: all 0.4s cubic-bezier(0.55, 0.085, 0, 0.99);
    }

    .TopBar.menu-open .Menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .Menu .main-nav {
        flex-direction: column;
        gap: 0;
    }

    .Menu .main-nav > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .Menu .main-nav > li:last-child {
        border-bottom: none;
    }

    .Menu li a {
        display: flex;
        width: 100%;
        padding: 15px 0;
        font-size: 16px;
        justify-content: flex-start;
        gap: 0 0.3em; /* SplitText wraps each word separately */
    }

    .Menu li a i {
        margin-right: auto;
        transition: transform 0.4s ease;
    }

    .Menu li.sub-open > a i {
        transform: rotate(180deg);
    }

    .dropdown-menu,
    .Menu li:hover > .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
        min-width: 0;
        padding: 0 14px 10px 0;
    }

    .Menu li.sub-open > .dropdown-menu {
        display: block;
    }

    .dropdown-menu li a {
        padding: 10px 0;
        font-size: 15px;
        font-weight: 500;
        color: #b5b5b5;
    }

    .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 7;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* ---------- hero ---------- */
    .Hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to top, rgba(17, 17, 17, 0.95) 0%, rgba(17, 17, 17, 0.55) 45%, rgba(17, 17, 17, 0.15) 100%);
    }

    .hero-content {
        padding-top: 190px;
        padding-bottom: 40px;
    }

    .hero-content h1 {
        font-size: clamp(46px, 13vw, 90px);
    }

    .hero-content h2 {
        font-size: 16px;
        margin-top: 0;
    }

    .hero-content-2 {
        position: relative;
        bottom: auto;
        padding-bottom: 70px;
    }

    .hero-content-2-wrap {
        flex-wrap: wrap;
        gap: 20px 24px;
        padding-top: 10vh;
    }

    .hero-disc {
        flex: 1 1 300px;
        max-width: 100%;
    }

    .Hero-ActionBtn {
        margin-right: 0;
    }

    .hero-main-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 35% center;
        margin: 0;
    }

    .hero-social-position {
        display: none;
    }

    /* ---------- partners ---------- */
    .partner-wrap {
        gap: 25px;
    }

    .partner-logo-wrap {
        gap: 50px;
        margin-right: 50px;
    }

    .partner-area {
        margin-bottom: 50px;
    }

    /* ---------- about ---------- */
    .about-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-left {
        min-height: 0;
        padding-bottom: 20px;
    }

    .about-left-content {
        position: static;
    }

    .about-left-bg-shape {
        width: 45%;
        opacity: 0.5;
    }

    .about-card-wrap {
        gap: 24px;
        padding-top: 0;
        padding-bottom: 60px;
    }

    .about-card-wrap .a1_card_trigger_elm {
        top: 90px;
    }

    .about-card .title {
        font-size: 24px;
    }

    .Firefly-ani {
        max-width: 45%;
        opacity: 0.6;
    }

    /* ---------- services ---------- */
    .services-area {
        padding: 70px 0;
    }

    .services-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .services-tabs-btn-scrollbar {
        height: auto;
        border-right: none;
        border-bottom: 3px solid #8EBC3F;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .services-tabs-btn-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .services-tabs-btn {
        display: flex;
        gap: 6px;
        width: max-content;
    }

    .services-tabs-btn .nav-link {
        width: auto;
        white-space: nowrap;
        font-size: 16px;
        padding: 14px 20px;
        border-radius: 14px 14px 0 0;
    }

    .services-tabs-pane-single .item-img {
        height: auto;
        min-height: 380px;
    }

    /* ---------- gravity ---------- */
    .gravitySectionArea {
        padding-top: 70px;
    }

    .gravitySectionArea .sec-title {
        font-size: 18px;
        line-height: 1.7;
    }

    /* ---------- portfolio ---------- */
    .portfolio-area {
        padding-top: 60px;
    }

    .portfolio-top {
        padding-bottom: 70px;
        background-size: cover;
    }

    .portfolio-top-wrap {
        max-width: 100%;
    }

    .portfolio-sec-title-2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 40px;
    }

    .portfolio-sec-title-2 h2 {
        font-size: 26px;
    }

    .portfolio-card {
        height: 300px;
    }

    /* ---------- testimonials ---------- */
    .testimonial-sec-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .testimonial-sec-title .left {
        max-width: 100%;
    }

    .testimonial-sec-title h2 {
        font-size: 22px;
    }

    /* ---------- steps ---------- */
    .steps-area {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    /* ---------- team ---------- */
    .team-area {
        padding-top: 70px;
    }

    .team-sec-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 50px;
    }

    .team-sec-title h2 {
        font-size: 26px;
    }

    .team-member {
        margin: 0 auto;
    }

    .team-bg-title .title-elm {
        font-size: 10em;
    }

    .team-bg-shadow-1 {
        right: 0;
    }

    /* ---------- faqs ---------- */
    .faqs-area {
        padding: 70px 0;
    }

    .faqs-container {
        width: 95%;
        padding: 0;
    }

    .faqs-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .faqs-right {
        order: -1;
    }

    .team-faqs-title .sec-title {
        font-size: 28px;
    }

    /* ---------- blog ---------- */
    .blog-area {
        padding: 70px 0;
    }

    .blog-sec-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 35px;
    }

    .blog-sec-title .left {
        width: 100%;
    }

    .blog-sec-title h2 {
        font-size: 26px;
    }

    .wa_height_set {
        height: auto !important;
    }

    .blog-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .blog-item,
    .blog-item:is(.active) {
        width: auto;
    }

    .blog-item:nth-child(3) {
        grid-column: 1 / -1;
    }

    .blog-item .item-img,
    .blog-item:is(.active) .item-img {
        height: 260px;
        margin-bottom: 18px;
        border-radius: 22px;
    }

    .blog-all-btn {
        margin-top: 35px;
    }

    /* ---------- footer ---------- */
    .footer-area {
        padding-top: 80px;
    }

    .footer-main {
        flex-wrap: wrap;
        margin-bottom: 40px;
    }

    .footer-widget {
        flex: 1 1 40%;
    }

    .footer-widget:first-child {
        flex-basis: 100%;
    }

    .footer-disc {
        max-width: 420px;
    }

    .footer-hire {
        margin-top: 25px;
    }

    .footer-widget .widget-title {
        font-size: 20px;
    }

    /* ---------- contact page ---------- */
    .breadcrumb-area {
        padding-top: 200px;
        padding-bottom: 90px;
    }

    .breadcrumb-title {
        font-size: 46px;
    }

    .contact-area {
        padding: 70px 0;
    }

    .contact-sec-title {
        height: auto;
        gap: 20px 40px;
    }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-img {
        position: relative;
        margin: 0 auto;
        width: fit-content;
        max-width: 100%;
    }

    .contact-img::after {
        right: 30%;
    }

    .contact-img .earth {
        width: 400px;
        max-width: 100%;
        display: block;
    }

    .contact-img-location {
        right: 22%;
        top: 4%;
    }

    .contact-info {
        grid-template-columns: 1fr 1fr;
        margin-top: 50px;
    }

    /* ---------- project details ---------- */
    .pd-hero {
        padding-top: 180px;
    }

    .pd-hero-title {
        font-size: 52px;
    }

    .pd-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .pd-hero-cover-wrap {
        margin-top: 70px;
    }

    .pd-hero-cover {
        height: 440px;
    }

    .pd-about-area {
        padding: 90px 0;
    }

    .pd-about-wrap {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pd-specs {
        position: static;
    }

    .pd-video-area {
        padding: 90px 0 100px;
    }

    .pd-video-sec-title {
        margin-bottom: 40px;
    }

    .pd-video-play-inner {
        width: 150px;
        height: 150px;
    }

    .pd-video-play .core {
        width: 88px;
        height: 88px;
        font-size: 22px;
    }

    .pd-gallery-area {
        padding: 90px 0;
    }

    .pd-gallery-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 45px;
    }

    .pd-gallery-track {
        gap: 40px 24px;
    }

    .pd-next-area {
        padding: 90px 0 100px;
    }

    .pd-next-title {
        font-size: 48px;
    }

    .pd-next-arrow {
        width: 80px;
        height: 80px;
        font-size: 26px;
    }

    .pd-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px;
    }

    /* ---------- about ---------- */
    .ab-hero {
        padding: 180px 0 60px;
    }

    .ab-hero-grid {
        grid-template-columns: 1fr;
    }

    .ab-hero-title {
        font-size: 48px;
    }

    .ab-hero-pill {
        width: 120px;
    }

    .ab-hero-side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .ab-hero-side p {
        max-width: 480px;
    }

    .ab-photo-area {
        height: auto;
    }

    .ab-photo {
        width: 95%;
        height: 520px;
        margin: 0 auto;
    }

    .ab-photo-caption {
        right: 30px;
        left: 30px;
        bottom: 30px;
        width: auto;
    }

    .ab-photo-title {
        font-size: 40px;
    }

    .ab-intro-area {
        padding: 90px 0 80px;
    }

    .ab-statement {
        font-size: 26px;
    }

    .ab-stats {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 50px;
    }

    .ab-mission-area {
        padding: 40px 0 90px;
    }

    .ab-mission-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ab-mission-title-pin {
        position: static;
    }

    .ab-ribbons {
        padding: 70px 0;
    }

    .ab-ribbon-track {
        font-size: 38px;
    }

    .ab-goals-area {
        padding: 90px 0 40px;
    }

    .ab-goal-card {
        position: relative;
        top: auto;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ab-goal-img {
        min-height: 0;
        height: 320px;
    }

    .ab-history-area {
        padding: 90px 0;
    }

    .ab-tl-item {
        grid-template-columns: 1fr 60px 1fr;
    }

    .ab-tl-year {
        font-size: 60px;
    }

    .ab-founders-area {
        padding: 90px 0;
    }

    .ab-founders-wrap {
        grid-template-columns: 1fr;
    }

    .ab-founders-imgs {
        width: 100%;
        max-width: 520px;
        height: 460px;
        margin: 0 auto;
    }

    .ab-founders-quote {
        font-size: 24px;
    }

    .ab-cta-area {
        padding: 0 0 100px;
    }

    /* ---------- services ---------- */
    .sv-hero {
        padding: 170px 0 90px;
    }

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

    .sv-hero-title {
        font-size: 48px;
    }

    .sv-visual {
        max-width: 540px;
    }

    .sv-stats {
        gap: 14px;
    }

    .sv-features-area {
        padding: 90px 0;
    }

    .sv-features {
        grid-template-columns: 1fr 1fr;
    }

    .sv-process-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sv-process-pin {
        position: static;
    }

    .sv-process-counter {
        display: none;
    }

    .sv-process-bar {
        display: none;
    }

    .sv-sec-title--row {
        flex-direction: column;
        align-items: flex-start;
    }

    .sv-projects {
        gap: 24px;
    }

    .sv-faq-wrap {
        grid-template-columns: 1fr;
    }

    .sv-others-area {
        padding: 90px 0 100px;
    }

    .sv-other {
        grid-template-columns: 52px 1fr 52px;
    }

    .sv-other .en {
        display: none;
    }

    .sv-other .icon,
    .sv-other .arrow {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    .sv-other .title {
        font-size: 28px;
    }

    /* ---------- services list ---------- */
    .svl-hero {
        padding: 180px 0 80px;
    }

    .svl-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .svl-hero-title {
        font-size: 48px;
    }

    /* panels: all open, stacked */
    .svl-panels {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }

    .svl-panel,
    .svl-panel.is-active {
        flex: none;
        height: 460px;
    }

    .svl-panel-bg {
        filter: none;
        transform: none;
    }

    .svl-panel-vtitle {
        display: none;
    }

    .svl-panel-body {
        min-width: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .svl-panel-top .icon {
        background: #d6f345;
        color: #171619;
    }

    .svl-eco-area {
        padding: 40px 0 90px;
    }

    .svl-eco-wrap {
        grid-template-columns: 1fr;
    }

    .svl-eco {
        max-width: 520px;
    }

    /* ---------- order ---------- */
    .od-page {
        padding: 170px 0 90px;
    }

    .od-layout {
        grid-template-columns: 1fr;
    }

    .od-summary {
        position: static;
    }

    .od-wizard {
        padding: 34px 30px 26px;
    }

    .od-kbd {
        display: none;
    }

    .od-bg-num span {
        font-size: 220px;
    }

    /* blog */
    .bl-hero {
        padding: 180px 0 60px;
    }

    .bl-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bl-hero-title {
        font-size: 46px;
    }

    .bl-hero-stack {
        height: 440px;
    }

    .bl-featured {
        grid-template-columns: 1fr;
    }

    .bl-featured-img {
        height: 400px;
    }

    .bl-featured-body {
        padding: 24px 20px 14px;
    }

    .bl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ar-hero {
        padding-top: 180px;
    }

    .ar-title {
        font-size: 42px;
    }

    .ar-cover-inner {
        height: 440px;
        border-radius: 30px;
    }

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

    .ar-content {
        max-width: none;
    }

    /* the table of contents only helps next to the text */
    .ar-side {
        position: static;
    }

    .ar-toc {
        display: none;
    }

    .ar-side-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .ar-related-grid .bl-card:nth-child(3) {
        display: none;
    }
}

/* ===================== <= 767px (mobile) ===================== */
@media (max-width: 767px) {

    .section {
        width: calc(100% - 32px);
    }

    .faqs-container {
        width: calc(100% - 32px);
    }

    .hero-container {
        padding-inline: 16px;
    }

    p {
        font-size: 15px;
    }

    .sec-title {
        font-size: 30px;
        line-height: 1.35;
    }

    .subtitle {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* hero */
    .hero-content {
        padding-top: 150px;
    }

    .hero-content h2 {
        font-size: 14px;
    }

    .hero-plybtn {
        width: 80px;
        height: 80px;
        font-size: 16px;
    }

    .hero-disc {
        font-size: 14px;
        text-align: justify;
    }

    /* partners */
    .partner-area {
        padding: 30px 0;
    }

    .partner-wrap {
        flex-direction: column;
        gap: 18px;
    }

    .partner-title {
        max-width: none;
        text-align: center;
        font-size: 15px;
    }

    .partner-logo-mask {
        width: 100%;
    }

    .partner-logo-wrap {
        gap: 40px;
        margin-right: 40px;
        height: 44px;
    }

    .partner-logo img {
        max-height: 34px;
        width: auto;
    }

    /* about */
    .about-area {
        padding-top: 60px;
    }

    .about-sec-title .sec-disc {
        margin-top: 20px;
    }

    .about-left .inner-div {
        gap: 20px;
    }

    .about-author-img img {
        width: 62px;
        height: 62px;
    }

    .about-author-content .author-name {
        font-size: 16px;
    }

    .about-card {
        padding: 26px 20px;
        border-radius: 18px;
    }

    .about-card .icon {
        font-size: 36px;
    }

    .about-card .title {
        font-size: 22px;
    }

    .about-card .disc {
        font-size: 14px;
    }

    /* services */
    .services-sec-title .sec-title {
        font-size: 24px;
    }

    .services-tabs-pane-single {
        grid-template-columns: 1fr;
    }

    .services-tabs-pane-single .content-wrap {
        padding: 30px 22px;
        border-radius: 18px;
        transform-origin: 50% 0%;
        transform: rotateX(-90deg);
    }

    .services-tabs-pane .tab-pane.show .services-tabs-pane-single .content-wrap {
        transform: rotateX(0deg);
    }

    .services-tabs-pane-single .disc {
        margin-top: 10px;
    }

    .services-tabs-pane-single .features-list {
        margin: 22px 0 28px;
        gap: 10px 16px;
    }

    .services-tabs-pane-single .features-list li {
        font-size: 14px;
    }

    .services-tabs-pane-single .item-img {
        height: 240px;
        min-height: 0;
        border-radius: 18px;
        transform: translateY(40px);
    }

    .services-tabs-pane-single .item-icon {
        font-size: 56px;
    }

    /* gravity */
    .gravitySectionArea {
        padding-top: 55px;
    }

    .gravitySectionArea .sec-title {
        font-size: 16px;
    }

    .gravity-section {
        height: 260px;
    }

    .hint {
        font-size: 12px;
        white-space: nowrap;
    }

    /* portfolio */
    .portfolio-top .sec-title {
        font-size: 16px;
    }

    .portfolio-top-features {
        gap: 10px;
    }

    .portfolio-top-features-single {
        padding: 18px 8px;
        border-radius: 16px;
    }

    .portfolio-top-features-single .title {
        font-size: 28px;
    }

    .portfolio-top-features-single .disc {
        font-size: 13px;
        margin-top: 8px;
    }

    .portfolio-sec-title-2 h2 {
        font-size: 22px;
    }

    .portfolio-item-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-card {
        height: 250px;
        border-radius: 18px;
    }

    .portfolio-card .card-categories {
        top: 14px;
        right: 14px;
    }

    .portfolio-card .card-categories .link-elm {
        font-size: 12px;
        padding: 4px 12px;
    }

    .portfolio-all-btn {
        gap: 20px;
    }

    .bg-shadow {
        width: 70px;
        height: 70px;
    }

    .portfolio-bg-shadow-1 {
        left: 0;
    }

    .portfolio-bg-shadow-2 {
        right: 0;
    }

    /* testimonials: circle becomes a horizontal avatar strip */
    .testimonial-area {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .testimonial-sec-title h2 {
        font-size: 20px;
    }

    .testimonial-wrap {
        height: auto;
        padding-top: 30px;
        background-size: cover;
    }

    .testimonial-preview-slider .swiper-wrapper {
        max-width: none;
        height: auto;
    }

    .testimonial-preview-slider .swiper-wrapper .swiper-slide {
        position: relative;
        width: 64px;
        height: 64px;
    }

    .testimonial-preview-slider {
        padding: 10px 0 20px;
    }

    .testimonial-preview-slider-item {
        width: 64px;
        height: 64px;
        border-width: 4px;
    }

    .testimonial-preview-slider .swiper-wrapper .swiper-slide:is(.swiper-slide-thumb-active) .testimonial-preview-slider-item {
        box-shadow: 0 4px 20px 0 rgba(214, 243, 69, 0.45);
    }

    .testimonial-main-slider {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: 100%;
        margin-top: 10px;
    }

    .testimonial-main-slider-single .icon {
        font-size: 48px;
    }

    .testimonial-main-slider-single .comment {
        font-size: 15px;
        line-height: 30px;
    }

    .testimonial-bg-blur {
        display: none;
    }

    /* steps */
    .steps-area {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .steps-sec-title {
        margin-bottom: 30px;
    }

    .steps-sec-title .sec-title div {
        font-size: 24px;
    }

    .steps-card,
    .steps-card:nth-child(2n+1),
    .steps-card:nth-child(2n) {
        max-width: 100%;
        margin: 0;
        gap: 14px;
        flex-direction: row;
    }

    .steps-card:nth-child(2n) .content {
        transform-origin: 100% 50%;
        transform: rotateY(-45deg);
    }

    .steps-card .number {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .steps-card .number-line {
        width: 5px;
    }

    .steps-card .content {
        flex: 1 1 auto;
        min-width: 0;
        padding: 58px 20px 26px;
        margin: 22px 0;
        border-radius: 18px;
    }

    .steps-card .content .date {
        top: 16px;
        left: 14px;
        font-size: 13px;
        padding: 3px 14px;
        margin: 0;
    }

    .steps-card .content .title {
        font-size: 18px;
        gap: 10px;
    }

    /* team */
    .team-sec-title h2 {
        font-size: 22px;
    }

    .team-member {
        height: 470px;
        border-radius: 24px;
    }

    .team-member .content-1 {
        padding: 16px 22px;
    }

    .team-member .member-name {
        font-size: 20px;
    }

    .team-member .content-2 {
        padding: 70px 24px 28px;
        border-radius: 24px;
    }

    .team-member .disc {
        margin: 20px 0;
    }

    .slider-btn-1 {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .team-slider-btn-1,
    .team-slider-btn-2 {
        top: 42%;
    }

    .team-bg-title {
        top: -10px;
    }

    .team-bg-title .title-elm {
        font-size: 6.5em;
    }

    /* faqs */
    .faqs-area {
        padding: 55px 0;
    }

    .faqs-contact {
        padding: 30px 20px;
        border-radius: 22px;
    }

    .faqs-contact .title {
        font-size: 21px;
        line-height: 1.5;
    }

    .team-faqs-title {
        margin-bottom: 25px;
    }

    .team-faqs-title .sec-title {
        font-size: 24px;
    }

    .faqs-tabs-btn .nav-link {
        font-size: 16px;
        padding: 10px 6px;
    }

    .faqs-tabs-pane {
        margin-top: 25px;
    }

    .accordion-item {
        border-radius: 16px;
    }

    .accordion-item .item-title {
        font-size: 15px;
        line-height: 1.7;
        padding: 16px;
        border-radius: 16px 16px 0 0;
    }

    .accordion-item .item-title .icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .accordion-item .item-disc {
        padding: 16px 16px 20px;
        font-size: 14px;
    }

    /* blog */
    .blog-area {
        padding: 55px 0;
    }

    .blog-sec-title h2 {
        font-size: 22px;
    }

    .blog-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .blog-item .item-img,
    .blog-item:is(.active) .item-img {
        height: 220px;
        border-radius: 18px;
    }

    .blog-item .item-img .card-btn {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }

    .blog-item .item-img .card-categories {
        top: 14px;
        right: 14px;
    }

    .blog-item .item-img .card-categories .link-elm {
        font-size: 13px;
    }

    .blog-item .item-title {
        font-size: 16px;
        line-height: 1.7;
    }

    /* footer */
    .footer-area {
        padding-top: 60px;
    }

    .footer-menu li a {
        font-size: 15px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 30px 0;
    }

    .footer-bottom p {
        margin: 0;
        text-align: center;
    }

    /* contact page */
    .breadcrumb-area {
        padding-top: 160px;
        padding-bottom: 70px;
    }

    .breadcrumb-title {
        font-size: 36px;
    }

    .breadcrumb-list a,
    .breadcrumb-list span {
        font-size: 16px;
    }

    .contact-area {
        padding: 55px 0;
    }

    .contact-sec-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 30px;
    }

    .contact-sec-title h2 {
        font-size: 21px;
        margin-top: 0;
    }

    .contact-img .earth {
        width: 300px;
    }

    .contact-img-location .icon {
        width: 54px;
        height: 54px;
    }

    .contact-img-location .dot-icon {
        width: 36px;
        height: 36px;
    }

    .contact-social {
        gap: 12px;
    }

    .contact-social .link-elm {
        flex: 1 1 calc(50% - 12px);
        justify-content: space-between;
        gap: 12px;
        font-size: 16px;
        padding: 12px 14px;
    }

    .contact-info-single .title {
        font-size: 20px;
    }

    .contact-wrap::after {
        height: 60%;
    }

    /* project details */
    .pd-hero {
        padding-top: 150px;
    }

    .pd-hero-top {
        gap: 16px;
    }

    .pd-hero-title {
        font-size: 36px;
        line-height: 1.4;
    }

    .pd-hero-en {
        font-size: 15px;
        margin-top: -4px;
    }

    .pd-hero-meta {
        padding-top: 22px;
    }

    .pd-scroll-btn {
        width: 54px;
        height: 54px;
        font-size: 16px;
    }

    .pd-tag {
        font-size: 13px;
        padding: 5px 14px;
    }

    .pd-hero-cover-wrap {
        margin-top: 50px;
        padding-bottom: 20px;
    }

    .pd-hero-bg-title {
        font-size: 20vw;
    }

    .pd-hero-cover {
        height: 300px;
        border-radius: 20px;
    }

    .pd-about-area {
        padding: 70px 0;
    }

    .pd-about-content .sec-title,
    .pd-video-sec-title .sec-title,
    .pd-gallery-head .sec-title {
        font-size: 26px;
    }

    .pd-about-text p {
        margin-top: 18px;
    }

    .pd-tech {
        margin-top: 32px;
        padding-top: 24px;
    }

    .pd-tech-title {
        font-size: 18px;
    }

    .pd-specs-card {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .pd-specs-head .title {
        font-size: 20px;
    }

    .pd-specs-head .icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .pd-specs-row {
        padding: 14px 8px;
    }

    .pd-specs-row dt,
    .pd-specs-row dd {
        font-size: 14px;
    }

    .pd-video-area {
        padding: 70px 0 80px;
    }

    .pd-video-marquee-text {
        font-size: 90px;
        gap: 30px;
    }

    .pd-video-frame {
        padding: 0 6px 6px;
        border-radius: 16px;
    }

    .pd-browser-bar {
        height: 38px;
        gap: 10px;
        padding: 0 6px;
    }

    .pd-browser-bar .dots span {
        width: 8px;
        height: 8px;
    }

    .pd-browser-bar .url {
        height: 24px;
        font-size: 11px;
    }

    .pd-browser-bar .live {
        display: none;
    }

    .pd-video-screen {
        border-radius: 11px;
    }

    .pd-video-play-inner {
        width: 118px;
        height: 118px;
    }

    .pd-video-play .core {
        width: 64px;
        height: 64px;
        font-size: 18px;
        box-shadow: 0 0 0 8px rgba(214, 243, 69, 0.15), 0 0 30px rgba(214, 243, 69, 0.5);
    }

    .pd-video-play .ring text {
        font-size: 20px;
    }

    .pd-video-controls {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 8px;
        padding: 5px 8px;
    }

    .pd-vc-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .pd-vc-time {
        min-width: 36px;
        font-size: 11px;
    }

    .pd-gallery-area {
        padding: 70px 0;
    }

    .pd-gallery-track {
        grid-template-columns: 1fr;
        width: calc(100% - 32px);
        gap: 36px;
    }

    .pd-gallery-frame {
        border-radius: 16px;
        padding: 0 6px 6px;
    }

    .pd-gallery-bar {
        height: 24px;
    }

    .pd-gallery-img {
        border-radius: 10px;
    }

    .pd-gallery-info {
        margin-top: 14px;
    }

    .pd-gallery-info .caption {
        font-size: 18px;
    }

    .pd-next-area {
        padding: 70px 0 80px;
    }

    .pd-next-link {
        gap: 10px 20px;
        padding-bottom: 36px;
    }

    .pd-next-label {
        font-size: 16px;
    }

    .pd-next-title {
        font-size: 32px;
    }

    .pd-next-arrow {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .pd-cta {
        margin-top: 40px;
        padding: 28px 22px;
        border-radius: 20px;
    }

    .pd-cta-title {
        font-size: 24px;
    }

    /* about */
    .ab-hero {
        padding: 150px 0 50px;
    }

    .ab-hero-title {
        font-size: 34px;
        line-height: 1.45;
    }

    .ab-hero-pill {
        width: 90px;
        margin: 0 6px;
    }

    .ab-hero-side {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .ab-hero-badge {
        width: 130px;
        height: 130px;
    }

    .ab-hero-badge .core {
        width: 78px;
        height: 78px;
    }

    .ab-hero-badge .core b {
        font-size: 24px;
    }

    .ab-hero-badge .core small {
        font-size: 11px;
    }

    .ab-photo {
        width: calc(100% - 32px);
        height: 420px;
    }

    .ab-photo-caption {
        right: 20px;
        left: 20px;
        bottom: 20px;
        gap: 12px;
    }

    .ab-photo-chip {
        font-size: 12px;
        padding: 6px 14px;
    }

    .ab-photo-title {
        font-size: 28px;
    }

    .ab-intro-area {
        padding: 70px 0 60px;
    }

    .ab-statement {
        font-size: 20px;
        line-height: 1.8;
    }

    .ab-stats {
        gap: 12px;
        margin-top: 36px;
    }

    .ab-mission-title .sec-title,
    .ab-goals-sec-title .sec-title,
    .ab-history-sec-title .sec-title {
        font-size: 26px;
    }

    .ab-mission-quote {
        margin-top: 28px;
        padding: 22px;
    }

    .ab-mission-quote p {
        font-size: 17px;
    }

    .ab-mission-row {
        grid-template-columns: 44px 1fr;
        gap: 16px;
        padding: 22px 12px;
    }

    .ab-mission-row .arrow {
        display: none;
    }

    .ab-mission-row .num {
        font-size: 30px;
    }

    .ab-mission-row .title {
        font-size: 20px;
    }

    .ab-mission-row .disc {
        font-size: 14px;
    }

    .ab-mission-img {
        height: 260px;
    }

    .ab-ribbons {
        padding: 50px 0;
    }

    .ab-ribbon {
        padding: 14px 0;
    }

    .ab-ribbon-track {
        font-size: 28px;
        gap: 20px;
    }

    .ab-goals-area {
        padding: 70px 0 30px;
    }

    .ab-goals-sec-title {
        margin-bottom: 40px;
    }

    .ab-goals-list {
        gap: 24px;
    }

    .ab-goal-card {
        gap: 22px;
        padding: 22px;
        border-radius: 20px;
    }

    .ab-goal-head {
        margin-bottom: 20px;
    }

    .ab-goal-head .icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .ab-goal-head .num {
        font-size: 60px;
    }

    .ab-goal-content .title {
        font-size: 24px;
    }

    .ab-goal-content .disc {
        font-size: 15px;
    }

    .ab-goal-content .features-list li {
        font-size: 14px;
    }

    .ab-goal-img {
        height: 220px;
    }

    .ab-history-area {
        padding: 70px 0;
    }

    .ab-history-sec-title {
        margin-bottom: 50px;
    }

    /* timeline: line on the right, cards stacked */
    .ab-tl-line {
        left: auto;
        right: 11px;
        transform: none;
    }

    .ab-tl-item,
    .ab-tl-item:nth-child(odd) {
        grid-template-columns: 24px 1fr;
        gap: 20px;
        padding: 16px 0;
        align-items: start;
    }

    .ab-tl-year {
        display: none;
    }

    .ab-tl-dot,
    .ab-tl-item:nth-child(odd) .ab-tl-dot {
        grid-column: 1;
        padding-top: 30px;
    }

    .ab-tl-card,
    .ab-tl-item:nth-child(odd) .ab-tl-card {
        grid-column: 2;
        padding: 22px;
    }

    .ab-tl-card-year {
        display: block;
    }

    .ab-tl-card .title {
        font-size: 20px;
    }

    .ab-tl-card .disc {
        font-size: 14px;
    }

    .ab-founders-area {
        padding: 70px 0;
    }

    .ab-founders-imgs {
        height: 340px;
    }

    .ab-founders-quote {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .ab-cta-area {
        padding: 0 0 80px;
    }

    /* services */
    .sv-hero {
        padding: 150px 0 70px;
    }

    .sv-hero-label {
        font-size: 14px;
        gap: 10px;
    }

    .sv-hero-label .icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .sv-hero-title {
        margin-top: 18px;
        font-size: 36px;
    }

    .sv-hero-headline {
        font-size: 20px;
    }

    .sv-hero-btns {
        gap: 20px;
        margin-top: 28px;
    }

    .sv-hero-bg-title {
        font-size: 20vw;
    }

    .sv-visual {
        aspect-ratio: 1 / 1.05;
    }

    .sv-chip {
        padding: 6px 12px;
        font-size: 12px;
    }

    .sv-toast {
        gap: 8px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .sv-toast .icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .sv-toast b {
        font-size: 12px;
    }

    .sv-toast small {
        font-size: 10px;
    }

    .vw-bar {
        height: 32px;
        padding: 0 10px;
    }

    .vw-bar > span {
        width: 8px;
        height: 8px;
    }

    .vw-page {
        height: calc(100% - 32px);
        padding: 12px;
        gap: 12px;
    }

    .vw-nav {
        gap: 6px;
    }

    .vw-logo {
        width: 20px;
        height: 20px;
    }

    .vw-link {
        width: 28px;
        height: 6px;
    }

    .vw-btn {
        width: 44px;
        height: 18px;
    }

    .vw-h1 {
        height: 11px;
    }

    .vw-p {
        height: 6px;
    }

    .vw-cta {
        width: 60px;
        height: 22px;
    }

    .vw-img > b {
        font-size: 20px;
    }

    .vw-cards {
        gap: 8px;
    }

    .va-phone {
        width: 58%;
        border-width: 5px;
        border-radius: 30px;
    }

    .va-screen {
        padding: 10px;
        gap: 9px;
    }

    .va-banner {
        padding: 10px;
    }

    .va-banner b {
        font-size: 14px;
    }

    .vs-window {
        inset: 8% 0 0 0;
        padding: 14px;
        border-radius: 18px;
    }

    /* no room for the chart next to five results on a phone */
    .vs-chart {
        display: none;
    }

    .sv-hero--seo .sv-visual {
        aspect-ratio: 1 / 1.25;
    }

    .vc-chip-2 {
        top: 0;
        left: auto;
        right: 0;
    }

    .vs-search {
        height: 40px;
        margin-bottom: 12px;
        padding: 0 12px;
    }

    .vs-query {
        font-size: 12px;
    }

    .vs-result {
        gap: 8px;
        padding: 7px 10px;
    }

    .vs-result .rank {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .vs-result.is-you span.t {
        font-size: 11px;
    }

    .vm-planet {
        width: 42px;
        height: 42px;
        margin: -21px 0 0 -21px;
    }

    .vm-orbit-inner .vm-planet {
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
    }

    .vm-planet-inner {
        font-size: 16px;
    }

    .vm-orbit-inner .vm-planet-inner {
        font-size: 14px;
    }

    .vm-core small {
        font-size: 10px;
    }

    .vm-core b {
        font-size: 17px;
    }

    .vm-card-2 {
        width: 150px;
    }

    .vm-bars {
        height: 40px;
    }

    .vc-editor {
        inset: 8% 2% 14% 0;
        border-radius: 18px;
    }

    .vc-toolbar {
        height: 38px;
    }

    .vc-doc {
        padding: 14px 16px;
        gap: 8px;
    }

    .vc-title {
        font-size: 16px;
    }

    .vc-body {
        font-size: 12px;
    }

    .vc-img {
        height: 56px;
    }

    .vc-foot {
        padding: 8px 14px;
        font-size: 11px;
    }

    .sv-stats-area {
        padding-bottom: 70px;
    }

    .sv-stats {
        gap: 10px;
    }

    .sv-features-area {
        padding: 70px 0;
    }

    .sv-sec-title {
        margin-bottom: 36px;
    }

    .sv-sec-title .sec-title,
    .sv-process-pin .sec-title,
    .sv-faq-side .sec-title {
        font-size: 26px;
    }

    .sv-features {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sv-feature-inner {
        padding: 26px 22px;
        border-radius: 20px;
    }

    .sv-feature-inner .icon {
        width: 52px;
        height: 52px;
        margin-bottom: 18px;
        font-size: 20px;
    }

    .sv-feature-inner .num {
        font-size: 38px;
    }

    .sv-feature-inner .title {
        font-size: 19px;
    }

    .sv-feature-inner .disc {
        font-size: 15px;
    }

    .sv-process-area {
        padding: 40px 0 70px;
    }

    .sv-step {
        grid-template-columns: 46px 1fr;
        gap: 14px;
        padding: 22px 18px;
        border-radius: 18px;
    }

    .sv-step-num {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

    .sv-step .title {
        font-size: 19px;
    }

    .sv-step .disc {
        font-size: 14px;
    }

    .sv-tools-area {
        padding: 20px 0 70px;
    }

    .sv-tool {
        padding: 10px 18px;
        font-size: 15px;
        gap: 10px;
    }

    .sv-projects-area {
        padding: 20px 0 70px;
    }

    .sv-projects {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sv-project-title {
        margin-top: 14px;
        font-size: 20px;
    }

    .sv-faq-area {
        padding: 20px 0 70px;
    }

    .sv-faq-contact {
        padding: 18px;
    }

    .sv-others-area {
        padding: 70px 0 80px;
    }

    .sv-other {
        grid-template-columns: 44px 1fr 44px;
        gap: 14px;
        padding: 20px 6px;
    }

    .sv-other .icon,
    .sv-other .arrow {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .sv-other .title {
        font-size: 20px;
    }

    /* services list */
    .svl-hero {
        padding: 150px 0 60px;
    }

    .svl-hero-title {
        font-size: 34px;
        line-height: 1.45;
    }

    .svl-hero-count b {
        font-size: 56px;
    }

    .svl-hero-count span {
        font-size: 15px;
    }

    .svl-hero-pills {
        gap: 8px;
        margin-top: 34px;
    }

    .svl-pill {
        padding: 9px 16px;
        font-size: 14px;
    }

    .svl-hero-marquee-row {
        font-size: 80px;
    }

    .svl-panels-area {
        padding: 60px 0 70px;
    }

    .svl-panel,
    .svl-panel.is-active {
        height: 440px;
        border-radius: 20px;
    }

    .svl-panel-top {
        top: 18px;
        right: 18px;
        left: 18px;
    }

    .svl-panel-top .icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .svl-panel-body {
        padding: 22px;
        gap: 10px;
    }

    .svl-panel-body .title {
        font-size: 24px;
    }

    .svl-panel-body .disc {
        font-size: 14px;
    }

    .svl-eco-text .sec-title {
        font-size: 26px;
    }

    .svl-combo {
        padding: 14px 16px;
    }

    .svl-combo .pair b {
        font-size: 15px;
    }

    .svl-combo .result {
        font-size: 13px;
    }

    .svl-eco-node {
        width: 90px;
        gap: 6px;
    }

    .svl-eco-node .icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .svl-eco-node .title {
        font-size: 11px;
    }

    .svl-eco-core i {
        font-size: 18px;
    }

    .svl-eco-core b {
        font-size: 12px;
    }

    .svl-cta-area {
        padding: 0 0 80px;
    }

    /* order */
    .od-page {
        padding: 140px 0 70px;
    }

    .od-head {
        margin-bottom: 24px;
    }

    .od-time {
        font-size: 12px;
        padding: 6px 12px;
    }

    .od-wizard {
        min-height: 0;
        padding: 24px 18px 18px;
        border-radius: 22px;
    }

    .od-progress {
        margin-bottom: 26px;
    }

    .od-q-title {
        font-size: 25px;
    }

    .od-q-hint {
        margin-bottom: 22px;
        font-size: 14px;
    }

    .od-services {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .od-service {
        min-height: 120px;
        padding: 16px 14px;
        border-radius: 16px;
    }

    .od-service .icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .od-service .title {
        font-size: 15px;
    }

    .od-service .en {
        font-size: 9px;
    }

    .od-option {
        gap: 12px;
        padding: 15px 16px;
        font-size: 15px;
        border-radius: 16px;
    }

    .od-fields {
        grid-template-columns: 1fr;
    }

    .od-nav {
        margin-top: 26px;
        padding-top: 16px;
    }

    .od-summary-card {
        padding: 22px;
        border-radius: 20px;
    }

    .od-bg-num span {
        font-size: 150px;
    }

    .od-blob {
        width: 320px;
        height: 320px;
    }

    .od-success-badge {
        width: 120px;
        height: 120px;
    }

    .od-confetti {
        top: 90px;
    }

    .od-success-title {
        font-size: 28px;
    }

    .od-code {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .od-code-value {
        font-size: 22px;
    }

    /* blog */
    .bl-hero {
        padding: 150px 0 50px;
    }

    .bl-hero-title {
        font-size: 34px;
        line-height: 1.5;
    }

    .bl-hero-text {
        font-size: 16px;
    }

    .bl-search {
        margin-top: 28px;
        padding: 4px 18px;
    }

    .bl-search kbd {
        display: none;
    }

    .bl-hero-stack {
        height: 340px;
    }

    .bl-stack-card {
        width: 210px;
        height: 280px;
        margin: -140px 0 0 -105px;
        border-radius: 20px;
    }

    .bl-stack-title {
        font-size: 15px;
        right: 16px;
        left: 16px;
        bottom: 16px;
    }

    .bl-stack-badge {
        width: 96px;
        height: 96px;
        left: 0;
    }

    .bl-stack-badge b {
        font-size: 26px;
    }

    .bl-stack-badge span {
        font-size: 11px;
    }

    .bl-featured-area {
        padding: 10px 0 40px;
    }

    .bl-featured {
        padding: 10px;
        border-radius: 26px;
    }

    .bl-featured-img {
        height: 250px;
        border-radius: 18px;
    }

    .bl-featured-body {
        gap: 16px;
        padding: 18px 10px 10px;
    }

    .bl-featured-title {
        font-size: 24px;
    }

    .bl-featured-excerpt {
        font-size: 15px;
    }

    .bl-featured-go {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    .bl-list-area {
        padding: 40px 0 80px;
    }

    .bl-list-head {
        margin-bottom: 34px;
    }

    .bl-list-title {
        font-size: 30px;
    }

    .bl-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .bl-card-cursor {
        display: none;
    }

    .bl-cta-area {
        padding-bottom: 80px;
    }

    .bl-cta {
        padding: 70px 20px;
        border-radius: 28px;
    }

    .bl-cta-marquee-row {
        font-size: 100px;
    }

    .bl-cta-content h2 {
        font-size: 30px;
    }

    .bl-cta-content p {
        font-size: 16px;
    }

    .ar-hero {
        padding-top: 150px;
    }

    .ar-cat {
        margin-top: 26px;
    }

    .ar-title {
        font-size: 30px;
        line-height: 1.6;
    }

    .ar-excerpt {
        font-size: 16px;
    }

    .ar-meta {
        gap: 12px 20px;
    }

    .ar-cover {
        margin-top: 40px;
    }

    .ar-cover-inner {
        height: 280px;
        border-radius: 22px;
    }

    .ar-body-area {
        padding: 50px 0 50px;
    }

    .ar-content {
        font-size: 16px;
        line-height: 2.05;
    }

    .ar-content > p:first-child {
        font-size: 18px;
    }

    .ar-content h2 {
        margin-top: 46px;
        padding-right: 18px;
        font-size: 24px;
    }

    .ar-content h3 {
        font-size: 19px;
    }

    .ar-content blockquote {
        margin: 36px 0;
        padding: 74px 24px 28px;
        border-radius: 22px;
        font-size: 19px;
    }

    .ar-content blockquote::before {
        top: 20px;
        right: 22px;
        font-size: 90px;
    }

    .ar-callout {
        padding: 70px 20px 20px;
        font-size: 15px;
    }

    .ar-callout::before {
        top: 20px;
        right: 20px;
    }

    .ar-author-box {
        flex-direction: column;
        gap: 18px;
        padding: 24px;
    }

    .ar-author-box img {
        width: 90px;
        height: 90px;
        border-radius: 20px;
    }

    .ar-side-inner {
        grid-template-columns: 1fr;
    }

    .ar-nav {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ar-nav-item {
        min-height: 170px;
        padding: 24px;
    }

    .ar-nav-item.is-empty {
        display: none;
    }

    .ar-nav-title {
        font-size: 18px;
    }

    .ar-related-area {
        padding: 50px 0 80px;
    }

    .ar-related-title {
        font-size: 30px;
    }

    .ar-related-grid .bl-card:nth-child(3) {
        display: flex;
    }
}

/* ===================== <= 575px ===================== */
@media (max-width: 575px) {

    /* header: CTA moves into the menu */
    .TopBar .ActionBtnWrapper {
        display: none;
    }

    .Menu .menu-account {
        display: block;
    }

    .Menu .menu-cta {
        display: block;
        padding: 12px 0 8px;
    }

    .Menu .menu-cta a {
        background: #d6f345;
        color: #171619;
        border-radius: 100px;
        padding: 12px 22px;
        justify-content: center;
    }

    .Menu .menu-cta a i {
        background: transparent;
        width: auto;
        height: auto;
        font-size: 16px;
        margin-right: 8px;
    }

    .Menu .menu-cta a:hover {
        color: #171619;
    }

    .TopBar .Logo h1 {
        font-size: 18px;
    }

    .TopBar .Logo img {
        width: 38px;
    }

    .ActionBtn {
        font-size: 15px;
        gap: 12px;
        padding-left: 22px;
    }

    .ActionBtn .icon {
        width: 44px;
        height: 44px;
    }

    .ActionBtn:is(.has-v2) {
        font-size: 15px;
    }

    .sec-title {
        font-size: 26px;
    }

    .hero-content-2-wrap {
        padding-top: 6vh;
    }

    .about-card-wrap .a1_card_trigger_elm {
        position: static;
    }

    .faqs-contact-form input,
    .faqs-contact-form textarea {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 0 8px;
    }

    .faqs-contact-form textarea {
        padding-top: 11px;
    }

    .footer-widget {
        flex: 1 1 45%;
    }

    .contact-info {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* project details */
    .pd-hero-title {
        font-size: 32px;
    }

    .pd-scroll-btn {
        display: none;
    }

    .pd-hero-cover {
        height: 240px;
    }

    .pd-vc-time {
        display: none;
    }

    .pd-cta .ActionBtn {
        font-size: 16px;
    }

    /* about */
    .ab-hero-title {
        font-size: 30px;
    }

    .ab-photo {
        height: 340px;
    }

    .ab-goal-head .num {
        font-size: 48px;
    }

    .ab-founders-imgs {
        height: 290px;
    }

    /* services */
    .sv-hero-title {
        font-size: 32px;
    }

    .sv-other .title {
        font-size: 18px;
    }

    /* services list */
    .svl-hero-title {
        font-size: 30px;
    }

    .svl-panel,
    .svl-panel.is-active {
        height: 480px;
    }

    .svl-eco-node .title {
        font-size: 10px;
    }

    /* blog */
    .bl-hero-title {
        font-size: 30px;
    }

    .bl-hero-stack {
        height: 300px;
    }

    .bl-stack-card {
        width: 180px;
        height: 240px;
        margin: -120px 0 0 -90px;
    }

    .bl-stack-title {
        display: none;
    }

    .ar-title {
        font-size: 26px;
    }
}

/* ===================== <= 400px ===================== */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 44px;
    }

    .sec-title {
        font-size: 24px;
    }

    .portfolio-top-features-single .title {
        font-size: 24px;
    }

    .portfolio-top-features-single .disc {
        font-size: 12px;
    }

    .contact-social .link-elm {
        flex-basis: 100%;
    }

    .footer-widget {
        flex-basis: 100%;
    }

    .pd-hero-title {
        font-size: 28px;
    }

    .pd-next-title {
        font-size: 26px;
    }

    .pd-specs-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .pd-specs-row dd {
        text-align: right;
    }

    .ab-hero-title {
        font-size: 26px;
    }

    .ab-statement {
        font-size: 18px;
    }

    .ab-ribbon-track {
        font-size: 24px;
    }

    .sv-hero-title {
        font-size: 28px;
    }

    .svl-hero-title {
        font-size: 26px;
    }

    .od-q-title {
        font-size: 22px;
    }
}

/* article links and the admin preview bar */
.ar-content a {
    color: #d6f345;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.ar-preview-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 20px;
    border-radius: 100px;
    background: #d6f345;
    color: #171619;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ar-preview-bar a {
    padding: 6px 14px;
    border-radius: 100px;
    background: #171619;
    color: #d6f345;
}

/* ===============================================================
   portfolio list (/projects)
   =============================================================== */
.pf-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 210px 0 0;
}

.pf-hero-shadow-1 {
    position: absolute;
    top: 20%;
    left: 8%;
    z-index: -1;
}

.pf-hero-shadow-2 {
    position: absolute;
    right: -60px;
    bottom: 10%;
    z-index: -1;
}

.pf-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: end;
    margin-top: 30px;
}

.pf-hero-title {
    margin: 18px 0 0;
    color: #fff;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.3;
}

.pf-hero-title .accent {
    color: #d6f345;
}

.pf-hero-side {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-bottom: 14px;
}

.pf-hero-text {
    margin: 0;
    color: #a5a5a5;
    font-size: 18px;
    line-height: 1.9;
}

.pf-hero-count {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pf-hero-count b {
    color: #d6f345;
    font-size: 84px;
    font-weight: 700;
    line-height: 1;
}

.pf-hero-count span {
    color: #cfcfcf;
    font-size: 16px;
    line-height: 1.6;
}

.pf-marquee {
    margin-top: 90px;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    direction: ltr;
}

.pf-marquee-row {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    white-space: nowrap;
    color: transparent;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
}

.pf-marquee-row i {
    color: #d6f345;
    font-size: 0.4em;
    font-style: normal;
    -webkit-text-stroke: 0;
}

.pf-list-area {
    padding: 90px 0 120px;
}

.pf-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
}

.pf-list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.pf-list-title h2 {
    margin: 0;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
}

.pf-list-title sup {
    color: #d6f345;
    font-size: 18px;
}

.pf-service-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(214, 243, 69, 0.4);
    background: rgba(214, 243, 69, 0.08);
    color: #d6f345;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

.pf-service-chip:hover {
    background: #d6f345;
    color: #171619;
}

.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.pf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #171619;
    transition: border-color 0.5s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.6s ease;
}

.pf-card:hover {
    border-color: rgba(214, 243, 69, 0.35);
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -30px rgba(214, 243, 69, 0.25);
}

.pf-card.is-hidden {
    display: none;
}

.pf-card-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    background: #0c0c0d;
    cursor: none;
}

.pf-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

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

.pf-card-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #d6f345;
    color: #171619;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
}

.pf-card-type,
.pf-card-year {
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
}

.pf-card-type {
    right: 14px;
    background: #d6f345;
    color: #171619;
}

.pf-card-year {
    left: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(23, 22, 25, 0.7);
    backdrop-filter: blur(8px);
    color: #fff;
}

.pf-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 10px 6px;
}

.pf-card-title {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
}

.pf-card-title a {
    color: inherit;
    transition: color 0.3s ease;
}

.pf-card:hover .pf-card-title a {
    color: #d6f345;
}

.pf-card-summary {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: #a5a5a5;
    font-size: 15px;
    line-height: 1.9;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pf-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

.pf-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.pf-card-tags span {
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #bdbdbd;
    font-size: 12px;
    white-space: nowrap;
}

.pf-card-go {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 17px;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.pf-card:hover .pf-card-go {
    border-color: #d6f345;
    background: #d6f345;
    color: #171619;
    transform: rotate(-45deg);
}

@media (max-width: 1199px) {
    .pf-hero-title {
        font-size: 56px;
    }

    .pf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 991px) {
    .pf-hero {
        padding-top: 170px;
    }

    .pf-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .pf-hero-title {
        font-size: 46px;
    }

    .pf-marquee {
        margin-top: 60px;
    }

    .pf-marquee-row {
        font-size: 44px;
    }

    .pf-list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-list-title h2 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .pf-hero {
        padding-top: 140px;
    }

    .pf-hero-title {
        font-size: 36px;
    }

    .pf-hero-text {
        font-size: 16px;
    }

    .pf-hero-count b {
        font-size: 60px;
    }

    .pf-marquee {
        padding: 16px 0;
    }

    .pf-marquee-row {
        gap: 24px;
        font-size: 32px;
    }

    .pf-list-area {
        padding: 60px 0 80px;
    }

    .pf-list-head {
        margin-bottom: 28px;
    }

    .pf-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pf-card {
        border-radius: 24px;
    }

    .pf-card:hover {
        transform: none;
    }

    .pf-card-img {
        border-radius: 18px;
        cursor: pointer;
    }

    .pf-card-cursor {
        display: none;
    }

    .pf-card-title {
        font-size: 20px;
    }
}

/* contact form next to the questions (_FaqContact) */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.faqs-contact-form .is-invalid {
    border-color: #ff6b6b !important;
}

.cf-status {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.8;
}

.cf-status.is-ok {
    background: rgba(214, 243, 69, 0.12);
    color: #d6f345;
}

.cf-status.is-error {
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
}

.faqs-contact-form .ActionBtn.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* ===============================================================
   error / not found (Views/Shared/Error.cshtml)
   =============================================================== */
.nf-area {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 220px 0 140px;
    text-align: center;
}

.nf-shadow-1 {
    position: absolute;
    top: 20%;
    left: -30px;
    z-index: -1;
}

.nf-shadow-2 {
    position: absolute;
    right: -40px;
    bottom: 5%;
    z-index: -1;
}

.nf-wrap {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nf-code {
    font-size: clamp(120px, 22vw, 260px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #d6f345;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}

.nf-title {
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    margin-bottom: 16px;
}

.nf-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 2;
    margin-bottom: 36px;
}

.nf-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 44px;
}

.nf-ref {
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

@media (max-width: 767px) {
    .nf-area {
        padding: 150px 0 90px;
    }

    .nf-text {
        font-size: 15px;
    }

    .nf-links {
        gap: 8px;
        margin-top: 32px;
    }
}

/* ===============================================================
   text pages: terms, privacy (Views/Pages/Legal.cshtml)
   =============================================================== */
.lg-area {
    padding: 90px 0 120px;
}

.lg-wrap {
    max-width: 860px;
    margin: 0 auto;
}

.lg-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
    padding: 30px 34px;
    border-radius: 24px;
    background: #171619;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lg-intro {
    margin: 0;
    color: #fff;
    font-size: 19px;
    line-height: 2;
}

.lg-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

.lg-updated i {
    color: #d6f345;
}

.lg-content {
    max-width: none;
}

.lg-content > p:first-child {
    color: #cfcfcf;
    font-size: 18px;
}

.lg-content h2:first-child {
    margin-top: 20px;
}

/* the trust badges (e-namad, samandehi) under the footer text */
.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.footer-badges a {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
}

.footer-badges img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 767px) {
    .lg-area {
        padding: 60px 0 80px;
    }

    .lg-head {
        padding: 22px 20px;
    }

    .lg-intro {
        font-size: 16px;
    }
}