/* =========================================
   VAZIRMATN
========================================= */

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn/Vazirmatn-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   INTER
========================================= */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter_18pt-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter_18pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter_18pt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter_18pt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Vazirmatn", sans-serif !important;
  background-color: #f5f5f3;
  color: #0f4c45;
  overflow-x: hidden;
  width: 100%;
}

img {
  max-width: 100%;
  display: block;
}

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

button,
input,
textarea {
  font-family: inherit;
}
:root {
  --green: #0f4c45;

  --gold: #c9a24a;

  --background: #f5f5f3;

  --white: #f7f8fa;

  --gray: #d9d9d9;

  --blue: #3086ff;
}

main {
  position: relative;
  width: 100%;
  background: #f5f5f3;
  isolation: isolate;
  z-index: 2;
}
.site-decorations {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 0;
  overflow: hidden;
}

main > section {
  position: relative;
  z-index: 1;
}

/* دایره / نیم‌دایره طلایی */
.gold-arc {
  position: absolute;

  display: block;

  border: 1px solid rgba(201, 162, 74, 0.5);
  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   GLOBAL GOLD ARC 01
   ========================================================= */

.gold-arc-1 {
  width: 430px;
  height: 430px;

  left: -360px;
  top: 570px;
}
/* 02 — سمت راست بعد از Why */
.gold-arc-2 {
  width: 260px;
  height: 260px;

  right: -190px;
  top: 1050px;
}

/* 03 — سمت چپ Services */
.gold-arc-3 {
  width: 520px;
  height: 520px;

  left: -455px;
  top: 1550px;
}

/* 04 — سمت راست Works */
.gold-arc-4 {
  width: 360px;
  height: 360px;

  right: -270px;
  top: 2300px;
}

/* 05 — سمت چپ Digital Products */
.gold-arc-5 {
  width: 100px;
  height: 100px;

  left: -70px;
  top: 3246px;
}

/* 06 — سمت راست Content Studio */
.gold-arc-6 {
  width: 430px;
  height: 430px;

  right: -330px;
  top: 3750px;
}

/* 07 — سمت چپ Pricing */
.gold-arc-7 {
  width: 500px;
  height: 500px;

  left: -390px;
  top: 4450px;
}

/* 08 — سمت راست Store Banner */
.gold-arc-8 {
  width: 300px;
  height: 300px;

  right: -220px;
  top: 5150px;
}

/* 09 — سمت چپ Question */
.gold-arc-9 {
  width: 560px;
  height: 560px;

  left: -460px;
  top: 5700px;
}

/* 10 — سمت راست Investment */
.gold-arc-10 {
  width: 390px;
  height: 390px;

  right: -300px;
  top: 6350px;
}
/* =========================================================
   SERVICES HERO
   ========================================================= */

.services-hero {
  --services-green: #0b5b54;
  --services-green-dark: #07463f;

  --services-gold: #c89e4d;

  --services-text: #182426;

  --services-surface: #eef0ec;

  --neu-light: rgba(255, 255, 255, 0.92);
  --neu-dark: rgba(86, 103, 98, 0.28);

  position: relative;

  width: 100%;
  /* height: 570px; */

  overflow: hidden;

  direction: rtl;

  isolation: isolate;

  background: #eef0ec;
}

/* =========================================================
   HERO BACKGROUND IMAGE
   ========================================================= */

.services-hero__background {
  position: absolute;

  inset: 0;

  z-index: -3;

  background-image:
    linear-gradient(
      90deg,
      rgba(11, 91, 84, 0.04) 0%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(255, 255, 255, 0.18) 100%
    ),
    var(--service-hero-image, url("/assets/images/service-baner-hero.svg"));

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  transform: scale(1.015);
}

/* =========================================================
   SOFT OVERLAY
   ========================================================= */

.services-hero::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(236, 240, 236, 0.03) 0%,
    rgba(245, 245, 241, 0.02) 40%,
    rgba(245, 245, 241, 0.12) 100%
  );
}

/* =========================================================
   HEADER
   ========================================================= */

.services-header {
  position: relative;

  width: 100%;
  height: 76px;

  display: grid;

  /*
        RTL STRUCTURE

        RIGHT  = LOGO
        CENTER = NAV
        LEFT   = ICONS
    */

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  direction: rtl;

  z-index: 20;

  padding: 0 38px;
}

/* =========================================================
   BROKEN SHAPE
   ========================================================= */

.services-header::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 38%;
  height: 76px;

  background: rgba(255, 255, 255, 0.78);

  /*
       این همان شکستگی قبلی است
    */

  clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);

  z-index: -1;

  pointer-events: none;

  /*
       کمی شیشه‌ای شدن سطح
    */

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   LOGO
   ========================================================= */

.services-logo {
  grid-column: 1;

  justify-self: start;

  display: flex;
  align-items: center;

  width: 78px;

  text-decoration: none;

  z-index: 5;
  padding-top: 5px;
}

.services-logo img {
  display: block;

  width: 78px;

  height: auto;

  object-fit: contain;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.services-nav {
  grid-column: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  white-space: nowrap;

  direction: rtl;
  padding-left: 115px;
}

.services-nav a {
  position: relative;

  display: inline-flex;

  align-items: center;

  height: 76px;

  color: #0f4c45;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

/* =========================================================
   MENU HOVER
   ========================================================= */

.services-nav a::after {
  content: "";

  position: absolute;

  right: 50%;

  bottom: 13px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--services-gold);

  transform: translateX(50%) scale(0);

  opacity: 0;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* متن طلایی */

.services-nav a:hover {
  color: var(--services-gold);

  transform: translateY(-1px);
}

/* نقطه همزمان با هاور */

.services-nav a:hover::after {
  opacity: 1;

  transform: translateX(50%) scale(1);
}

/* =========================================================
   ACTIVE MENU
   ========================================================= */

.services-nav a.is-active {
  color: var(--services-gold);
}

.services-nav a.is-active::after {
  opacity: 1;

  transform: translateX(50%) scale(1);
}

/* =========================================================
   ACTIONS
   ========================================================= */

.services-actions {
  grid-column: 3;

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 12px;

  direction: ltr;
}

/* =========================================================
   NEUMORPHIC ICON BUTTON
   ========================================================= */

.services-action {
  position: relative;

  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;

  border-radius: 15px;

  background: rgba(237, 240, 237, 0.88);

  color: var(--services-green);

  text-decoration: none;

  cursor: pointer;

  /*
       3D NEUMORPHIC
    */

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 13px rgba(69, 86, 81, 0.27);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* لایه داخلی */

.services-action::before {
  content: "";

  position: absolute;

  inset: 3px;

  border-radius: 12px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.65),
    inset -1px -1px 2px rgba(80, 98, 93, 0.08);

  pointer-events: none;
}

/* =========================================================
   PHOSPHOR ICON
   ========================================================= */

.services-action i {
  position: relative;

  z-index: 2;

  font-size: 20px;

  line-height: 1;

  color: currentColor;

  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

/* =========================================================
   ICON HOVER
   ========================================================= */

.services-action:hover {
  color: var(--services-gold);

  transform: translateY(-2px);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.98),
    8px 8px 15px rgba(69, 86, 81, 0.32);
}

.services-action:hover i {
  transform: scale(1.06);
}

/* =========================================================
   ICON ACTIVE / PRESS
   ========================================================= */

.services-action:active {
  transform: translateY(0);

  box-shadow:
    inset 4px 4px 8px rgba(69, 86, 81, 0.28),
    inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.services-hero__content {
  position: relative;

  width: 100%;
  height: calc(100% - 76px);

  display: flex;

  align-items: center;

  justify-content: flex-start;

  direction: rtl;

  padding: 20px 82px 40px;

  box-sizing: border-box;

  z-index: 5;
}

/* =========================================================
   TEXT
   ========================================================= */

.services-hero__text {
  width: 520px;

  max-width: 520px;

  text-align: right;

  padding-top: 5px;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.services-hero__eyebrow {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  margin-bottom: 17px;

  color: var(--services-gold);

  font-size: 14px;

  font-weight: 700;
}

.services-hero__eyebrow::before {
  content: "";

  width: 40px;

  height: 1px;

  background: var(--services-gold);

  opacity: 0.75;
}

/* =========================================================
   TITLE
   ========================================================= */

.services-hero__text h1 {
  margin: 0;

  color: #0f4c45;

  font-size: 44px;

  line-height: 1.55;

  font-weight: 800;

  letter-spacing: -1.4px;
}

.services-hero__text h1 span {
  position: relative;

  color: var(--services-gold);

  display: inline-block;
}

/* طلایی زیر کلمه شما */

.services-hero__text h1 span::after {
  content: "";

  position: absolute;

  right: 0;

  bottom: 3px;

  width: 100%;

  height: 5px;

  border-radius: 50%;

  background: rgba(200, 158, 77, 0.12);

  transform: rotate(-2deg);

  z-index: -1;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.services-hero__text p {
  margin: 16px 0 28px;

  width: 470px;

  color: #687577;

  font-size: 12px;

  line-height: 2.15;

  font-weight: 400;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.services-hero__buttons {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 15px;

  direction: rtl;
}

/* =========================================================
   BUTTON BASE
   ========================================================= */

.services-hero__button {
  position: relative;

  width: 175px;

  height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border-radius: 16px;

  text-decoration: none;

  font-family: inherit;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;

  box-sizing: border-box;
}

/* =========================================================
   BUTTON ICON
   ========================================================= */

.services-hero__button i {
  font-size: 18px;

  line-height: 1;

  transition: transform 0.2s ease;
}

.services-hero__button--primary {
  position: relative;

  width: 175px;
  height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  border: none;
  border-radius: 16px;

  color: #ffffff;

  /*
       رنگ سطح دکمه
    */
  background: #0b5b54;

  text-decoration: none;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  /*
       ================================
       NEUMORPHIC 3D
       ================================

       نور بالا / چپ
       سایه پایین / راست
    */

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.72),
    8px 8px 16px rgba(4, 55, 49, 0.48);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

/* =========================================================
   لایه برجسته خیلی ظریف روی سطح دکمه
   ========================================================= */

.services-hero__button--primary::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 14px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.16),
    inset -2px -2px 4px rgba(0, 40, 35, 0.12);
}

/* =========================================================
   متن و آیکن بالای لایه
   ========================================================= */

.services-hero__button--primary span,
.services-hero__button--primary i {
  position: relative;

  z-index: 2;
}

/* =========================================================
   آیکن
   ========================================================= */

.services-hero__button--primary i {
  font-size: 18px;

  line-height: 1;

  transition: transform 0.2s ease;
}

/* =========================================================
   HOVER
   دکمه کمی از سطح بلند می‌شود
   ========================================================= */

.services-hero__button--primary:hover {
  transform: translateY(-2px);

  background: #0c6159;
  color: #c9a24a;
  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.78),
    10px 10px 19px rgba(4, 55, 49, 0.52);
}

.services-hero__button--primary:hover i {
  transform: translateX(-3px);
  color: #c9a24a;
}

/* =========================================================
   ACTIVE
   دکمه واقعاً داخل سطح فرو می‌رود
   ========================================================= */

.services-hero__button--primary:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(3, 48, 43, 0.48),
    inset -5px -5px 10px rgba(79, 142, 134, 0.32);
}

/* =========================================================
   FOCUS
   ========================================================= */

.services-hero__button--primary:focus-visible {
  outline: 2px solid #c89e4d;

  outline-offset: 4px;
}
/* =========================================================
   SECONDARY
   ========================================================= */

.services-hero__button--secondary {
  color: var(--services-green);

  background: rgba(239, 241, 238, 0.9);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.96),
    7px 7px 14px rgba(76, 91, 87, 0.27);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.services-hero__button--secondary:hover {
  color: var(--services-gold);

  transform: translateY(-2px);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.98),
    8px 8px 16px rgba(76, 91, 87, 0.32);
}

.services-hero__button--secondary:active {
  transform: translateY(0);

  box-shadow:
    inset 4px 4px 8px rgba(76, 91, 87, 0.26),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95);
}

/* =========================================================
   BUTTON ARROW HOVER
   ========================================================= */

.services-hero__button:hover i {
  transform: translateX(-3px);
}

/* =========================================================
   FOCUS
   ========================================================= */

.services-hero__button:focus-visible {
  outline: 2px solid var(--services-gold);

  outline-offset: 4px;
}
/* =========================================
   FOUR MAIN SERVICE AXES
========================================= */

.service-axes {
  --axes-bg: #eef1ef;
  --axes-green: #0f5b54;
  --axes-green-dark: #084840;
  --axes-gold: #c9a24a;

  --axes-light: rgba(255, 255, 255, 0.92);
  --axes-shadow: rgba(91, 106, 102, 0.24);

  position: relative;

  width: 100%;

  padding: 26px 0 24px;

  direction: rtl;

  overflow: hidden;
}

/* =========================================
   CONTAINER
========================================= */

.service-axes__container {
  width: 100%;

  max-width: 1160px;

  margin: 0 auto;

  padding: 0 35px;

  box-sizing: border-box;
}

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

.service-axes__heading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  margin-bottom: 25px;
}

/* خطوط طلایی دو طرف عنوان */

.service-axes__line {
  width: 48px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--axes-gold));

  opacity: 0.8;
}

.service-axes__line:last-child {
  background: linear-gradient(90deg, var(--axes-gold), transparent);
}

/* عنوان */

.service-axes__heading h2 {
  margin: 0;

  color: var(--axes-green);

  font-family: "Vazirmatn", sans-serif;

  font-size: 22px;

  line-height: 1.5;

  font-weight: 800;

  text-align: center;

  white-space: nowrap;
}

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

.service-axes__grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 35px;

  align-items: center;
}

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

.service-axis-card {
  position: relative;

  height: 100px;
  min-width: 0;

  padding: 14px 20px 13px 30px;

  box-sizing: border-box;

  display: flex;
  align-items: flex-start;

  text-decoration: none;

  color: inherit;

  background: var(--axes-bg);

  clip-path: polygon(
    14px 0%,
    100% 0%,
    100% 100%,
    14px 100%,

    10px 98%,
    7px 94%,
    4px 88%,
    2px 80%,
    1px 70%,

    1px 62%,
    3px 57%,
    7px 53%,
    10px 50%,
    7px 47%,
    3px 43%,
    1px 38%,

    1px 30%,
    2px 20%,
    4px 12%,
    7px 6%,
    10px 2%
  );

  filter: drop-shadow(-8px -8px 10px rgba(255, 255, 255, 0.9))
    drop-shadow(8px 8px 12px rgba(91, 106, 102, 0.24));

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}
/* =========================================
   LEFT CONCAVE NOTCH
========================================= */

.service-axis-card::after {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 34px;
  height: 34px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: var(--axes-bg);

  z-index: 3;

  box-shadow:
    inset 5px 5px 9px rgba(91, 106, 102, 0.22),
    inset -5px -5px 9px rgba(255, 255, 255, 0.9);
}
/* =========================================
   CARD INNER HIGHLIGHT
========================================= */

.service-axis-card::before {
  content: "";

  position: absolute;

  inset: 1px;

  border-radius: 13px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.55),
    inset -1px -1px 2px rgba(78, 95, 90, 0.05);
}

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

.service-axis-card__content {
  position: relative;

  z-index: 2;

  width: 100%;

  text-align: right;

  direction: rtl;
}

/* =========================================
   TITLE
========================================= */

.service-axis-card h3 {
  margin: 0;

  color: #263536;

  font-family: "Vazirmatn", sans-serif;

  font-size: 15px;

  line-height: 1.3;

  font-weight: 800;
}

/* =========================================
   ENGLISH LABEL
========================================= */

.service-axis-card__english {
  display: block;

  margin-top: 2px;

  color: #8b989a;

  font-family: "Inter", sans-serif;

  font-size: 9px;

  line-height: 1.4;

  font-weight: 400;

  direction: ltr;

  text-align: right;
}

/* =========================================
   DESCRIPTION
========================================= */

.service-axis-card p {
  margin: 7px 0 0;

  max-width: 170px;

  color: #6f7c7e;

  font-family: "Vazirmatn", sans-serif;

  font-size: 8.5px;

  line-height: 1.7;

  font-weight: 400;

  text-align: right;
}

/* =========================================
   ARROW CIRCLE
========================================= */

.service-axis-card__arrow {
  position: absolute;

  left: 10px;
  top: 50%;

  width: 14px;
  height: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #0f5b54;

  color: #fff;

  transform: translate(-50%, -50%);

  z-index: 5;

  box-shadow:
    -2px -2px 4px rgba(255, 255, 255, 0.75),
    3px 3px 6px rgba(50, 70, 66, 0.28);
}

.service-axis-card__arrow i {
  font-size: 8px;
  line-height: 1;
}

.service-axis-card__arrow i {
  font-size: 8px;
}

/* فلش */

.service-axis-card__arrow i {
  font-size: 8px;

  line-height: 1;

  transition: transform 0.22s ease;
}

/* =========================================
   HOVER — CARD LIFTS
========================================= */

.service-axis-card:hover {
  transform: translateY(-4px);

  box-shadow:
    -10px -10px 19px rgba(255, 255, 255, 0.96),
    11px 11px 21px rgba(79, 96, 91, 0.29);
}

/* فلش در Hover */

.service-axis-card:hover .service-axis-card__arrow {
  background: var(--axes-gold);

  transform: translateY(-50%) translateX(-2px);

  box-shadow:
    -2px -2px 4px rgba(255, 255, 255, 0.85),
    3px 3px 7px rgba(79, 96, 91, 0.3);
}

.service-axis-card:hover .service-axis-card__arrow i {
  transform: translateX(-2px);
}

/* =========================================
   ACTIVE / CLICK
========================================= */

.service-axis-card:active {
  transform: translateY(-1px);

  box-shadow:
    inset 5px 5px 10px rgba(79, 96, 91, 0.18),
    inset -5px -5px 10px rgba(255, 255, 255, 0.9);
}

/* =========================================
   ACCESSIBILITY
========================================= */

.service-axis-card:focus-visible {
  outline: 2px solid var(--axes-gold);

  outline-offset: 4px;
}

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

.magazine-card-footer {
  margin-top: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  direction: rtl;
}

/* =========================================
   DATE
========================================= */

.magazine-card-footer time {
  color: #a3a9ae;

  font-family: "Vazirmatn", sans-serif;

  font-size: 9px;

  font-weight: 300;

  direction: ltr;

  white-space: nowrap;
}

/* =========================================
   READ MORE
========================================= */

.magazine-read-more {
  display: flex;

  align-items: center;

  gap: 5px;

  color: #c9a24a;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  font-weight: 500;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.magazine-read-more i {
  font-size: 14px;

  line-height: 1;

  transition: transform 0.25s ease;
}

.magazine-read-more:hover {
  color: #0f4c45;
}

.magazine-read-more:hover i {
  transform: translateX(-3px);
}

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

.magazine-card-featured {
  position: relative;
}

/* المان تزئینی طلایی بالای کارت وسط */

.magazine-card-featured::before {
  content: "✦";

  position: absolute;

  top: -17px;

  right: 50%;

  z-index: 10;

  transform: translateX(50%);

  color: #c9a24a;

  font-family: "Inter", sans-serif;

  font-size: 21px;

  line-height: 1;

  text-shadow: 0 1px 2px rgba(15, 76, 69, 0.15);
}
/* =========================================================
   12. FINAL CTA
   ========================================================= */

/*
  نکته:
  این سکشن عمداً width: 100% نیست.
  Footer بعد از آن می‌تواند تمام عرض صفحه را بگیرد.
*/

.final-cta {
  position: relative;

  width: 100%;

  padding: 28px 0 0;

  background: transparent;

  overflow: visible;

  direction: rtl;

  z-index: 5;
  margin-bottom: 0;
}

/* =========================================================
   CTA CONTAINER
   ========================================================= */

.final-cta__container {
  position: relative;
  width: 87%;
  max-width: 1200px;
  height: 340px;
  margin: 0 auto;

  overflow: visible;

  border-radius: 13px;

  background: #0f4c45;
  isolation: isolate;
}

/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.final-cta__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px 13px 0 0;
  z-index: 1;
  pointer-events: none;
  -webkit-border-radius: 13px 13px 0 0;
  -moz-border-radius: 13px 13px 0 0;
  -ms-border-radius: 13px 13px 0 0;
  -o-border-radius: 13px 13px 0 0;
}

/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.final-cta__overlay {
  position: absolute;

  inset: 0;

  border-radius: 13px;

  z-index: 2;

  pointer-events: none;
}

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

.final-cta__content {
  position: absolute;

  top: 19px;

  right: 26px;

  width: 48%;

  z-index: 10;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  text-align: right;

  direction: rtl;
}

/* =========================================================
   TITLE
   ========================================================= */

.final-cta__title {
  margin: 0;

  padding: 0;

  color: #f7f8fa;

  font-family: "Vazirmatn", sans-serif;

  font-size: 23px;

  line-height: 1.65;

  font-weight: 800;

  text-align: right;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.final-cta__description {
  margin: 20px 270px 0 0;

  color: rgba(247, 248, 250, 0.9);

  font-family: "Vazirmatn", sans-serif;

  font-size: 9px;

  line-height: 1.9;

  font-weight: 400;

  text-align: center;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.final-cta__buttons {
  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 9px;

  direction: rtl;

  margin: 72px 250px 0 0;
}

/* =========================================================
   BASE BUTTON
   ========================================================= */

.final-cta__button {
  position: relative;

  height: 28px;

  padding: 0 13px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border-radius: 11px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  font-weight: 500;

  white-space: nowrap;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;

  overflow: hidden;
}

/* =========================================================
   BUTTON ARROW
   ========================================================= */

.final-cta__button i {
  font-size: 13px;

  line-height: 1;

  transition: transform 0.25s ease;
}

/* =========================================================
   CONSULTATION BUTTON
   ========================================================= */

.final-cta__button--consult {
  color: #f7f8fa;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.14),
    rgba(201, 162, 74, 0.65)
  );

  /*
    Neumorphism
  */

  box-shadow:
    5px 5px 9px rgba(0, 0, 0, 0.28),
    -3px -3px 8px rgba(255, 255, 255, 0.14),
    inset 1px 1px 2px rgba(255, 255, 255, 0.22),
    inset -2px -2px 3px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   CONTACT BUTTON
   ========================================================= */

.final-cta__button--contact {
  color: #c9a24a;

  background: linear-gradient(
    145deg,
    rgba(15, 76, 69, 0.82),
    rgba(7, 49, 44, 0.92)
  );

  border-color: rgba(201, 162, 74, 0.65);

  box-shadow:
    5px 5px 10px rgba(0, 0, 0, 0.3),
    -3px -3px 8px rgba(255, 255, 255, 0.1),
    inset 1px 1px 3px rgba(255, 255, 255, 0.14),
    inset -2px -2px 4px rgba(0, 0, 0, 0.26);
}

/* =========================================================
   BUTTON HOVER
   ========================================================= */

.final-cta__button:hover {
  transform: translateY(-2px);
}

.final-cta__button:hover i {
  transform: translateX(-3px);
}

.final-cta__button--consult:hover {
  color: #c9a24a;

  border-color: rgba(201, 162, 74, 0.55);

  box-shadow:
    7px 7px 13px rgba(0, 0, 0, 0.3),
    -4px -4px 10px rgba(255, 255, 255, 0.15),
    inset 1px 1px 3px rgba(255, 255, 255, 0.25),
    inset -2px -2px 4px rgba(0, 0, 0, 0.18);
}

.final-cta__button--contact:hover {
  color: #f7f8fa;

  box-shadow:
    7px 7px 13px rgba(0, 0, 0, 0.32),
    -4px -4px 10px rgba(255, 255, 255, 0.12),
    inset 1px 1px 3px rgba(255, 255, 255, 0.18),
    inset -2px -2px 4px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   BUTTON ACTIVE
   ========================================================= */

.final-cta__button:active {
  transform: translateY(1px);

  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.28),
    inset -2px -2px 5px rgba(255, 255, 255, 0.12);
}

/* =========================================================
   FORM
   ========================================================= */

.final-cta__form {
  position: absolute;
  z-index: 20;
  top: 110px;
  right: 25px;
  width: 230px;
  min-height: 150px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  direction: rtl;
  border-radius: 12px 12px 12px 0px;
  background: linear-gradient(145deg, #f8f9fa, #e9ecef);
  box-shadow:
    8px 9px 17px rgba(0, 0, 0, 0.28),
    0px 0px 15px rgb(0 0 0 / 28%),
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -1px -1px 2px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.78);
  transform: translateZ(0);
  -webkit-border-radius: 12px 12px 12px 0px;
  -moz-border-radius: 12px 12px 12px 0px;
  -ms-border-radius: 12px 12px 12px 0px;
  -o-border-radius: 12px 12px 12px 0px;
}

/* =========================================================
   FORM FIELD
   ========================================================= */

.final-cta__field {
  position: relative;

  width: 100%;

  height: 40px;

  display: flex;

  align-items: center;

  direction: rtl;

  border-radius: 7px;

  background: linear-gradient(145deg, #edf0f2, #f8f9fa);

  border: 1px solid rgba(15, 76, 69, 0.07);

  box-shadow:
    inset 2px 2px 4px rgba(15, 76, 69, 0.1),
    inset -2px -2px 4px rgba(255, 255, 255, 0.9);

  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

/* =========================================================
   FIELD ICON
   ========================================================= */

.final-cta__field i {
  position: absolute;

  right: 7px;

  top: 50%;

  transform: translateY(-50%);

  color: #9aa4ab;

  font-size: 10px;

  pointer-events: none;

  z-index: 2;
}

/* =========================================================
   INPUT
   ========================================================= */

.final-cta__field input,
.final-cta__field select {
  width: 100%;

  height: 100%;

  padding: 0 24px 0 7px;

  border: none;

  outline: none;

  background: transparent;

  color: #68747c;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  font-weight: 400;

  text-align: right;

  direction: rtl;
}

/* Placeholder */

.final-cta__field input::placeholder {
  color: #b0b8be;

  opacity: 1;
}

/* =========================================================
   SELECT
   ========================================================= */

.final-cta__field select {
  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  cursor: pointer;

  color: #a0a9af;
}

.final-cta__field select:valid {
  color: #68747c;
}

/* =========================================================
   FIELD FOCUS
   ========================================================= */

.final-cta__field:focus-within {
  border-color: rgba(201, 162, 74, 0.48);

  transform: translateY(-1px);

  box-shadow:
    inset 2px 2px 4px rgba(15, 76, 69, 0.12),
    inset -2px -2px 4px rgba(255, 255, 255, 0.9),
    0 0 0 2px rgba(201, 162, 74, 0.08);
}

/* =========================================================
   SUBMIT
   ========================================================= */

.final-cta__submit {
  width: 100%;

  height: 35px;

  margin-top: 5px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  outline: none;

  border-radius: 7px;

  cursor: pointer;

  color: #f7f8fa;

  background: linear-gradient(145deg, #15584f, #0a403a);

  font-family: "Vazirmatn", sans-serif;

  font-size: 14px;

  font-weight: 500;

  /*
    سه بعدی
  */

  box-shadow:
    4px 4px 7px rgba(15, 76, 69, 0.27),
    -2px -2px 5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 2px rgba(255, 255, 255, 0.16),
    inset -2px -2px 3px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

/* =========================================================
   SUBMIT HOVER
   ========================================================= */

.final-cta__submit:hover {
  color: #c9a24a;

  transform: translateY(-1px);

  box-shadow:
    5px 5px 9px rgba(15, 76, 69, 0.3),
    -3px -3px 6px rgba(255, 255, 255, 0.9),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -2px -2px 3px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   SUBMIT ACTIVE
   ========================================================= */

.final-cta__submit:active {
  transform: translateY(1px);

  box-shadow:
    inset 3px 3px 5px rgba(0, 0, 0, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.1);
}
/* =========================================================
   CUSTOM SUBJECT DROPDOWN
========================================================= */

.final-cta__dropdown {
  position: relative;

  overflow: visible !important;

  z-index: 100;
}

/* وقتی dropdown باز است */

.final-cta__dropdown.is-open {
  z-index: 100;
}

/* دکمه اصلی */

.final-cta__dropdown-trigger {
  width: 100%;
  height: 100%;

  padding: 0 24px 0 8px;

  border: none;
  outline: none;

  background: transparent;

  color: #a0a9af;

  font-family: "Vazirmatn", sans-serif;
  font-size: 10px;
  font-weight: 400;

  text-align: right;

  cursor: pointer;
}

/* وقتی یک گزینه انتخاب شده */

.final-cta__dropdown.has-value .final-cta__dropdown-trigger {
  color: #68747c;
}

/* فلش */

.final-cta__dropdown-icon {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s ease;

  z-index: 5;
}

/* چرخش فلش */

.final-cta__dropdown.is-open .final-cta__dropdown-icon {
  transform: translateY(-50%) rotate(180deg);

  color: #0f4c45;
}

/* =========================================================
   DROPDOWN MENU
========================================================= */

.final-cta__dropdown-menu {
  position: absolute;

  top: calc(100% + 6px);

  right: 0;

  width: 100%;

  /*
    ارتفاع بر اساس تعداد آیتم‌ها
    تا همه کامل دیده شوند
  */

  height: auto;

  min-height: 0;

  padding: 5px;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  gap: 3px;

  border: none;

  border-radius: 9px;

  background: linear-gradient(
    145deg,
    rgba(248, 249, 250, 0.98),
    rgba(231, 235, 237, 0.98)
  );

  /*
    خیلی مهم:
    منو روی عکس قرار می‌گیرد
  */

  z-index: 9999;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(-5px) scale(0.97);

  transform-origin: top center;

  transition:
    opacity 0.18s ease,
    transform 0.22s ease,
    visibility 0.22s ease;

  /*
    Neumorphism
  */

  box-shadow:
    7px 8px 15px rgba(0, 0, 0, 0.25),
    -5px -5px 12px rgba(255, 255, 255, 0.85),
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -1px -1px 2px rgba(0, 0, 0, 0.06);
}

/* وقتی باز است */

.final-cta__dropdown.is-open .final-cta__dropdown-menu {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0) scale(1);
}

/* dropdown باز */

.final-cta__dropdown.is-open .final-cta__dropdown-menu {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0) scale(1);
}

/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.final-cta__dropdown-menu button {
  position: relative;

  flex: 0 0 auto;

  width: 100%;

  height: 24px;

  min-height: 24px;

  padding: 3px 9px;

  box-sizing: border-box;

  border: none !important;

  outline: none;

  border-radius: 6px;

  background: transparent;

  color: #778187;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  font-weight: 400;

  text-align: right;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* =========================================================
   HOVER ITEM
========================================================= */

.final-cta__dropdown-menu button:hover {
  background: rgba(15, 76, 69, 0.11);

  color: #0f4c45;

  transform: translateX(-3px);

  box-shadow: inset 2px 0 0 rgba(15, 76, 69, 0.3);
}

/* =========================================================
   ACTIVE / CLICK
========================================================= */

.final-cta__dropdown-menu button:active {
  transform: translateX(-2px) scale(0.98);

  background: rgba(15, 76, 69, 0.16);
}

/* =========================================================
   SELECTED ITEM
========================================================= */

.final-cta__dropdown-menu button.is-selected {
  background: rgba(15, 76, 69, 0.08);

  color: #0f4c45;

  font-weight: 500;
}

/* =========================================================
   SMALL GREEN INDICATOR
========================================================= */

.final-cta__dropdown-menu button::before {
  content: "";

  position: absolute;

  right: 3px;

  top: 50%;

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: #0f4c45;

  opacity: 0;

  transform: translateY(-50%) scale(0);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.final-cta__dropdown-menu button:hover::before,
.final-cta__dropdown-menu button.is-selected::before {
  opacity: 0.55;

  transform: translateY(-50%) scale(1);
}
/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;

  width: 100%;

  padding: 0;

  margin: 0;

  direction: rtl;

  overflow: hidden;
  z-index: 1;
  background: #f5f5f3;
}

/* =========================================================
   FOOTER CONTAINER
========================================================= */

.footer__container {
  position: relative;

  width: 100%;
  max-width: none;
  min-height: 400px;
  margin: 0;
  padding: 0;
  overflow: hidden;

  /* border-radius: 12px; */

  background: #002d2d;

  isolation: isolate;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.footer__background {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  z-index: 1;

  pointer-events: none;

  user-select: none;
}

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

.footer__content {
  position: relative;

  z-index: 10;

  width: 100%;

  max-width: 1120px;

  min-height: 205px;

  margin: 0 auto;

  padding: 27px 38px 0;

  display: grid;

  grid-template-columns:
    0.95fr
    1.25fr
    1.15fr
    1.55fr;

  gap: 25px;

  direction: ltr;
}

/* =========================================================
   GENERAL COLUMN
========================================================= */

.footer__brand,
.footer__contact,
.footer__links,
.footer__about {
  direction: rtl;

  text-align: center;
}
.footer__contact {
  border-right: 1px solid rgba(201, 162, 74, 0.28);
  padding-right: 25px;
}
/* =========================================================
   BRAND
========================================================= */

.footer__brand {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  border-right: 1px solid rgba(201, 162, 74, 0.28);
  padding-right: 25px;
  direction: ltr;
}

/* =========================================================
   LOGO
========================================================= */

.footer__logo {
  width: 58px;

  height: 58px;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.25));
  margin-left: -70px;
}
/* =========================================================
   TRUST / ENAMAD
========================================================= */

.footer__trust {
  margin-top: 27px;

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 18px;

  direction: ltr;
}

/* =========================================================
   TRUST ITEM
========================================================= */

.footer__trust-item {
  position: relative;

  width: 54px;

  height: 66px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  border-radius: 8px;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

/* =========================================================
   TRUST IMAGE
========================================================= */

.footer__trust-image {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  /*
    عکس خودش باید ظاهر اصلی‌اش را حفظ کند
  */

  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));

  user-select: none;

  -webkit-user-drag: none;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

/* =========================================================
   HOVER
========================================================= */

.footer__trust-item:hover {
  transform: translateY(-2px);
}

.footer__trust-item:hover .footer__trust-image {
  transform: scale(1.04);

  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.28));
}

/* =========================================================
   ACTIVE
========================================================= */

.footer__trust-item:active {
  transform: translateY(0) scale(0.98);
}
/* =========================================================
   HEADINGS
========================================================= */

.footer__heading {
  margin: 0 0 40px;

  color: #c9a24a;

  font-family: "Vazirmatn", sans-serif;

  font-size: 13px;

  line-height: 1.5;

  font-weight: 700;

  white-space: nowrap;
}

/* =========================================================
   CONTACT / SUBSCRIBE
========================================================= */

.footer__subscribe {
  position: relative;

  width: 220px;

  height: 30px;

  margin-top: 12px;

  display: flex;

  align-items: center;

  direction: rtl;

  border-radius: 8px;

  background: linear-gradient(145deg, #e9edef, #f8f9fa);

  border: none;

  /*
    Neumorphic فرو رفته
  */

  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.13),
    inset -3px -3px 6px rgba(255, 255, 255, 0.95),
    2px 2px 5px rgba(0, 0, 0, 0.12),
    -2px -2px 5px rgba(255, 255, 255, 0.55);

  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* =========================================================
   SUBSCRIBE INPUT
========================================================= */

.footer__subscribe input {
  width: 100%;

  height: 100%;

  padding: 0 10px 0 25px;

  border: none;

  outline: none;

  background: transparent;

  color: #69757b;

  font-family: "Vazirmatn", sans-serif;

  font-size: 12px;

  text-align: right;

  direction: rtl;
}

.footer__subscribe input::placeholder {
  color: #aeb7bc;

  opacity: 1;
}

/* =========================================================
   INPUT FOCUS
========================================================= */

.footer__subscribe:focus-within {
  transform: translateY(-1px);

  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.14),
    inset -3px -3px 6px rgba(255, 255, 255, 0.95),
    0 0 0 2px rgba(201, 162, 74, 0.12);
}

/* =========================================================
   SUBSCRIBE BUTTON
========================================================= */

.footer__subscribe button {
  position: absolute;

  left: 3px;

  top: 50%;

  width: 19px;

  height: 19px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  outline: none;

  border-radius: 6px;

  cursor: pointer;

  color: #f4f6f6;

  background: linear-gradient(145deg, #176057, #0b403a);

  /*
    سه بعدی
  */

  box-shadow:
    3px 3px 5px rgba(0, 0, 0, 0.25),
    -2px -2px 4px rgba(255, 255, 255, 0.75),
    inset 1px 1px 2px rgba(255, 255, 255, 0.16),
    inset -1px -1px 2px rgba(0, 0, 0, 0.3);

  transform: translateY(-50%);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.footer__subscribe button i {
  font-size: 10px;

  line-height: 1;
}

/* =========================================================
   BUTTON HOVER
========================================================= */

.footer__subscribe button:hover {
  color: #c9a24a;

  transform: translateY(calc(-50% - 1px));

  box-shadow:
    4px 4px 7px rgba(0, 0, 0, 0.28),
    -2px -2px 5px rgba(255, 255, 255, 0.8),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.28);
}

.footer__subscribe button:active {
  transform: translateY(-50%) scale(0.94);

  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
    inset -1px -1px 2px rgba(255, 255, 255, 0.1);
}

/* =========================================================
   CONTACT INFO
========================================================= */

.footer__contact-info {
  margin: 27px 0 0 25px;

  display: flex;

  flex-direction: column;

  gap: 2px;

  direction: ltr;

  align-items: flex-start;
}

.footer__contact-info a {
  color: #e2e8e8;

  font-family: "Vazirmatn", sans-serif;

  font-size: 13px;

  line-height: 1.7;

  text-decoration: none;

  transition: color 0.2s ease;
}

.footer__contact-info a:hover {
  color: #c9a24a;
}

/* =========================================================
   QUICK LINKS
========================================================= */

.footer__links {
  border-right: 1px solid rgba(201, 162, 74, 0.28);

  padding-right: 25px;
}

.footer__nav {
  display: flex;

  flex-direction: row;

  gap: 30px;
  margin-right: 43px;
  margin-top: 27px;
}

.footer__nav-column {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

.footer__nav a {
  color: #edf1f1;

  font-family: "Vazirmatn", sans-serif;

  font-size: 11px;

  font-weight: 500;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer__nav a:hover {
  color: #c9a24a;

  transform: translateX(-3px);
}

/* =========================================================
   ABOUT
========================================================= */

.footer__about {
  padding-right: 0;

  text-align: right;
}

.footer__about-text {
  max-width: 285px;

  margin: 27px 0 0;

  color: #e5ebeb;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  line-height: 2;

  font-weight: 400;
}

/* =========================================================
   ABOUT LINK
========================================================= */

.footer__about-link {
  margin-top: 16px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #c9a24a;

  font-family: "Vazirmatn", sans-serif;

  font-size: 11px;

  font-weight: 500;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.footer__about-link i {
  font-size: 14px;

  transition: transform 0.2s ease;
}

.footer__about-link:hover {
  transform: translateX(-3px);
}

.footer__about-link:hover i {
  transform: translateX(-3px);
}

/* =========================================================
   SOCIAL
========================================================= */

.footer__socials {
  margin-top: 28px;

  display: flex;

  align-items: center;

  gap: 20px;

  direction: rtl;
}

.footer__socials a {
  width: 17px;

  height: 17px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #e5ebeb;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer__socials a i {
  font-size: 15px;
}

.footer__socials a:hover {
  color: #c9a24a;

  transform: translateY(-2px);
}

/* =========================================================
   GIANT ZHIURA
========================================================= */

.footer__giant-text {
  position: absolute;

  z-index: 5;

  left: 50%;

  bottom: 29px;

  transform: translateX(-50%);

  width: 100%;

  text-align: center;

  color: transparent;

  font-family: Arial, sans-serif;

  font-size: 112px;

  line-height: 1;

  font-weight: 500;

  letter-spacing: 18px;

  -webkit-text-stroke: 1px rgba(201, 162, 74, 0.62);

  text-shadow: 0 0 1px rgba(201, 162, 74, 0.15);

  direction: ltr;

  pointer-events: none;

  user-select: none;
}

/* =========================================================
   GOLDEN LINE
========================================================= */

.footer__line {
  position: absolute;

  z-index: 8;

  left: 0;

  right: 0;

  bottom: 76px;

  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(201, 162, 74, 0.8),
    rgba(201, 162, 74, 0.35),
    rgba(201, 162, 74, 0.75)
  );

  transform: rotate(-0.15deg);
}

/* نقطه روی خط */

.footer__line-dot {
  position: absolute;

  right: 11%;

  top: 50%;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #f1d28a;

  box-shadow: 0 0 7px rgba(241, 210, 138, 0.65);

  transform: translateY(-50%);
}

/* =========================================================
   COPYRIGHT
========================================================= */

.footer__copyright {
  position: absolute;

  z-index: 10;

  left: 50%;

  bottom: 6px;

  transform: translateX(-50%);

  width: 100%;

  text-align: center;

  color: rgba(201, 162, 74, 0.85);

  font-family: "Vazirmatn", sans-serif;

  font-size: 8px;

  line-height: 1.5;
}
@keyframes footerSpinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
/* =========================================================
   SPECIALIZED SERVICES
========================================================= */

.specialized-services {
  --specialized-bg: #eef2f0;

  --specialized-card: #edf1ef;

  --specialized-green: #075b54;

  --specialized-green-dark: #064941;

  --specialized-gold: #c9a24a;

  --specialized-text: #0d514c;

  --specialized-muted: #8ca0a2;

  width: 100%;

  padding: 42px 0 50px;

  direction: rtl;

  overflow: hidden;

  box-sizing: border-box;
}

/* =========================================================
   CONTAINER
========================================================= */

.specialized-services__container {
  width: 100%;

  max-width: 1160px;

  margin: 0 auto;

  padding: 0 24px;

  box-sizing: border-box;
}
.specialized-axes__line {
  width: 48px;

  height: 1.3px;

  background: linear-gradient(90deg, transparent, var(--specialized-gold));

  opacity: 0.8;
}

.specialized-axes__line:last-child {
  background: linear-gradient(90deg, var(--specialized-gold), transparent);
}
/* =========================================================
   HEADING
========================================================= */

.specialized-services__heading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  margin-bottom: 34px;
}

.specialized-services__heading h2 {
  margin: 0;

  color: var(--specialized-green);

  font-family: "Vazirmatn", sans-serif;

  font-size: 25px;

  line-height: 1.5;

  font-weight: 800;

  white-space: nowrap;

  letter-spacing: -0.4px;
}

/* خطوط طلایی */

/* .specialized-services__line {
  position: relative;

  width: 68px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--specialized-gold));

  opacity: 0.9;
}

.specialized-services__line::after {
  content: "";

  position: absolute;

  width: 4px;

  height: 4px;

  top: 50%;

  border-radius: 50%;

  background: var(--specialized-gold);

  transform: translateY(-50%);
}

.specialized-services__line:first-child::after {
  right: 0;
}

.specialized-services__line:last-child {
  background: linear-gradient(90deg, var(--specialized-gold), transparent);
}

.specialized-services__line:last-child::after {
  left: 0;
} */

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

.specialized-services__grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 26px;

  align-items: stretch;
}

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

.specialized-card {
  position: relative;

  height: 620px;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  box-sizing: border-box;

  overflow: hidden;

  border-radius: 25px;

  border: 1px solid rgba(255, 255, 255, 0.72);

  background: linear-gradient(145deg, #f5f8f6 0%, #edf2ef 48%, #e8eeeb 100%);

  box-shadow:

        /* نور بیرونی بالا چپ */
    -12px -12px 25px rgba(255, 255, 255, 0.98),
    /* سایه بیرونی پایین راست */ 14px 16px 30px rgba(74, 96, 91, 0.2),
    /* برجستگی داخلی */ inset 2px 2px 5px rgba(255, 255, 255, 0.82),
    inset -2px -2px 5px rgba(87, 105, 101, 0.08);

  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;

  isolation: isolate;
}

/* =========================================================
   CARD INNER GLOW
========================================================= */

.specialized-card::before {
  content: "";

  position: absolute;

  inset: 7px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.58);

  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.55),
    inset -2px -2px 5px rgba(91, 111, 106, 0.04);

  pointer-events: none;

  z-index: 0;
}

/* نور بالای کارت */

.specialized-card::after {
  content: "";

  position: absolute;

  top: 8px;

  left: 14%;

  right: 14%;

  height: 40px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.72),
    transparent 70%
  );

  filter: blur(8px);

  opacity: 0.75;

  pointer-events: none;

  z-index: 0;
}

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

.specialized-card:hover {
  transform: translateY(-8px);

  box-shadow:
    -15px -15px 30px rgba(255, 255, 255, 1),
    18px 21px 35px rgba(67, 89, 84, 0.25),
    inset 2px 2px 6px rgba(255, 255, 255, 0.9),
    inset -2px -2px 5px rgba(87, 105, 101, 0.07);
}

/* =========================================================
   ICON
========================================================= */

.specialized-card__icon {
  position: relative;

  width: 108px;

  height: 108px;

  flex-shrink: 0;

  margin-top: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: linear-gradient(145deg, #f7faf8, #e9eeec);

  box-shadow:
    -8px -8px 17px rgba(255, 255, 255, 0.98),
    9px 10px 18px rgba(76, 96, 92, 0.19),
    inset 1px 1px 3px rgba(255, 255, 255, 0.9),
    inset -2px -2px 4px rgba(81, 100, 96, 0.08);

  z-index: 4;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* حلقه طلایی */

.specialized-card__icon-ring {
  position: absolute;

  inset: 10px;

  border-radius: 50%;

  border: 1.5px solid rgba(201, 162, 74, 0.85);

  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8);

  pointer-events: none;
}

/* آیکن */

.specialized-card__icon i {
  position: relative;

  z-index: 2;

  color: var(--specialized-green);

  font-size: 39px;

  line-height: 1;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

/* Hover icon */

.specialized-card:hover .specialized-card__icon {
  transform: translateY(-3px);

  box-shadow:
    -10px -10px 20px rgba(255, 255, 255, 1),
    11px 12px 21px rgba(70, 91, 87, 0.23),
    inset 1px 1px 3px rgba(255, 255, 255, 0.9);
}

.specialized-card:hover .specialized-card__icon i {
  transform: scale(1.06);

  color: var(--specialized-gold);
}

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

.specialized-card__content {
  position: relative;

  z-index: 3;

  width: 100%;

  padding: 20px 20px 0;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

/* =========================================================
   TITLE
========================================================= */

.specialized-card__content h3 {
  width: 100%;

  min-height: 30px;

  margin: 0 0 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--specialized-green);

  font-family: "Vazirmatn", sans-serif;

  font-size: 20px;

  line-height: 1.5;

  font-weight: 800;

  text-align: center;

  white-space: nowrap;

  transition: color 0.25s ease;
}

.specialized-card:hover .specialized-card__content h3 {
  color: var(--specialized-green-dark);
}

/* =========================================================
   LIST
========================================================= */

.specialized-card__list {
  width: 100%;

  min-height: 145px;

  margin: 0;

  padding: 0 22px 0 0;

  box-sizing: border-box;

  list-style-type: disc;

  list-style-position: outside;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: flex-start;

  gap: 7px;

  color: var(--specialized-gold);

  direction: rtl;
}

/* آیتم */

.specialized-card__list li {
  width: 100%;

  margin: 0;

  padding: 0;

  color: var(--specialized-muted);

  font-family: "Vazirmatn", sans-serif;

  font-size: 11px;

  line-height: 1.8;

  font-weight: 500;

  text-align: right;

  white-space: nowrap;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

/* نقطه طلایی واقعی UL */

.specialized-card__list li::marker {
  color: var(--specialized-gold);

  font-size: 0.75em;
}

.specialized-card:hover .specialized-card__list li {
  color: #718688;
}

/* =========================================================
   BUTTON
========================================================= */

.specialized-card__button {
  position: relative;

  z-index: 5;

  width: calc(100% - 40px);

  height: 54px;

  flex-shrink: 0;

  margin-top: auto;

  margin-bottom: 17px;

  padding: 0 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

  border-radius: 30px;

  color: var(--specialized-green);

  background: linear-gradient(145deg, #f6faf8, #e9efec);

  border: 1px solid rgba(255, 255, 255, 0.75);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.96),
    8px 9px 16px rgba(71, 91, 87, 0.17),
    inset 1px 1px 2px rgba(255, 255, 255, 0.8),
    inset -1px -1px 2px rgba(77, 97, 92, 0.06);

  font-family: "Vazirmatn", sans-serif;

  font-size: 11px;

  font-weight: 800;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* متن */

.specialized-card__button span {
  flex: 1;
  font-size: 14px;
  text-align: center;
}

/* آیکن */

.specialized-card__button i {
  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--specialized-green);

  font-size: 17px;

  line-height: 1;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

/* Hover */

.specialized-card__button:hover {
  color: var(--specialized-gold);

  transform: translateY(-2px);

  box-shadow:
    -9px -9px 17px rgba(255, 255, 255, 1),
    10px 11px 19px rgba(70, 90, 86, 0.21),
    inset 1px 1px 2px rgba(255, 255, 255, 0.85);
}

.specialized-card__button:hover i {
  color: var(--specialized-gold);

  transform: translateX(-4px);
}

/* کلیک */

.specialized-card__button:active {
  transform: translateY(1px);

  box-shadow:
    inset 4px 4px 8px rgba(72, 91, 87, 0.14),
    inset -4px -4px 8px rgba(255, 255, 255, 0.92);
}

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

.specialized-card__image {
  position: relative;

  width: calc(100% - 28px);

  height: 185px;

  flex-shrink: 0;

  margin: 0 14px 10px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  overflow: visible;

  z-index: 2;
}

/* نور زیر تصویر */

.specialized-card__image::before {
  content: "";

  position: absolute;

  left: 7%;

  right: 7%;

  bottom: 3px;

  height: 48px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(102, 129, 124, 0.16),
    transparent 70%
  );

  filter: blur(8px);

  pointer-events: none;
}

/* تصویر */

.specialized-card__image img {
  position: relative;

  z-index: 2;

  display: block;

  width: auto;

  max-width: 100%;

  height: 175px;

  object-fit: contain;

  object-position: center bottom;

  filter: drop-shadow(0 9px 10px rgba(40, 61, 57, 0.16));

  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.4s ease;
}

/* Hover تصویر */

.specialized-card:hover .specialized-card__image img {
  transform: translateY(-5px) scale(1.035);

  filter: drop-shadow(0 13px 14px rgba(37, 58, 54, 0.22));
}

/* =========================================================
   COOPERATION PROCESS
   فرآیند همکاری با ژیورا
========================================================= */

.cooperation-process {
  --process-bg: #f3f5f4;
  --process-green: #0f5b54;
  --process-green-dark: #083f3a;
  --process-gold: #c9a24a;
  --process-text: #25403e;
  --process-muted: #9ba5a5;

  width: 100%;

  padding: 32px 0 42px;

  background: var(--process-bg);

  direction: rtl;

  overflow: hidden;

  box-sizing: border-box;
}

/* =========================================================
   CONTAINER
========================================================= */

.cooperation-process__container {
  width: 100%;

  max-width: 1080px;

  margin: 0 auto;

  padding: 0 28px;

  box-sizing: border-box;
}

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

.cooperation-process__heading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 22px;

  margin-bottom: 34px;
}

.cooperation-process__heading-content {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.cooperation-process__heading h2 {
  margin: 0;

  color: var(--process-green);

  font-family: "Vazirmatn", sans-serif;

  font-size: 22px;

  line-height: 1.5;

  font-weight: 800;

  white-space: nowrap;
}

.cooperation-process__heading p {
  margin: 2px 0 0;

  color: #9aa3a3;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  line-height: 1.8;

  font-weight: 400;
}

/* خطوط طلایی کنار عنوان */

.cooperation-process__heading-line {
  width: 64px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--process-gold));

  opacity: 0.8;
}

.cooperation-process__heading-line:last-child {
  background: linear-gradient(90deg, var(--process-gold), transparent);
}

/* =========================================================
   TRACK
========================================================= */

.cooperation-process__track {
  position: relative;

  width: 80%;

  height: 155px;
  margin-right: 40px;
  direction: rtl;
}

/* =========================================================
   مسیر اصلی
========================================================= */

.cooperation-route {
  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;
}

/* =========================================================
   نقطه شروع
========================================================= */

.cooperation-route__start {
  position: absolute;

  right: -2%;

  top: 74px;

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: var(--process-gold);

  box-shadow:
    0 0 0 5px rgba(201, 162, 74, 0.08),
    0 0 0 10px rgba(201, 162, 74, 0.035),
    0 3px 8px rgba(201, 162, 74, 0.25);

  z-index: 5;
}

/* حلقه‌ی متحرک دور نقطه شروع */

.cooperation-route__start::after {
  content: "";

  position: absolute;

  inset: -5px;

  border: 1px solid rgba(201, 162, 74, 0.25);

  border-radius: 50%;

  animation: processPulse 2.5s ease-in-out infinite;
}

@keyframes processPulse {
  0%,
  100% {
    transform: scale(0.9);

    opacity: 0.3;
  }

  50% {
    transform: scale(1.25);

    opacity: 0.8;
  }
}

/* =========================================================
   خطوط مسیر
========================================================= */

.cooperation-route__line {
  position: absolute;

  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(201, 162, 74, 0.08),
    rgba(15, 91, 84, 0.22),
    rgba(15, 91, 84, 0.12)
  );

  transform-origin: right center;

  z-index: 1;
}

/* خط 01 → 02 */

.cooperation-route__line--01 {
  top: 79px;

  right: 0%;

  width: 8%;
}
.cooperation-route__line--1 {
  top: 79px;

  right: 11%;

  width: 12%;
}

/* خط 02 → 03 */

.cooperation-route__line--2 {
  top: 79px;

  right: 26%;

  width: 12%;
}

/* خط 03 → 04 */

.cooperation-route__line--3 {
  top: 79px;

  right: 41%;

  width: 12%;
}

/* خط 04 → 05 */

.cooperation-route__line--4 {
  top: 79px;

  right: 56%;

  width: 12%;
}

/* خط 05 → 06 */

.cooperation-route__line--5 {
  top: 79px;

  right: 71%;

  width: 12%;
}

/* خط 06 → 07 */

.cooperation-route__line--6 {
  top: 79px;

  right: 88%;

  width: 9%;
}
.cooperation-route__line--7 {
  top: 79px;

  right: 102%;

  width: 9%;
}

/* =========================================================
   اتصال هندسی وسط مسیر
========================================================= */
/* 
.cooperation-route__line::before {
  content: "";

  position: absolute;

  right: 50%;

  top: -5px;

  width: 10px;

  height: 10px;

  border-right: 1px solid rgba(15, 91, 84, 0.18);

  border-bottom: 1px solid rgba(15, 91, 84, 0.18);

  transform: translateX(50%) rotate(45deg);

  background: var(--process-bg);
} */

/* نقطه‌ی کوچک روی اتصال */

.cooperation-route__line::after {
  content: "";

  position: absolute;

  right: 50%;

  top: 50%;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #c9a24a;

  border: 1px solid #c9a34a7e;

  transform: translate(50%, -50%);
}
.cooperation-route__line--01::after {
  display: none;
}
/* =========================================================
   STEP
========================================================= */

.cooperation-step {
  position: absolute;

  top: 15px;

  width: 96px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  z-index: 5;
}

/* =========================================================
   شماره مرحله
========================================================= */

.cooperation-step__number {
  position: absolute;

  top: -4px;

  color: var(--axes-green);

  font-family: Arial, sans-serif;

  font-size: 8px;

  line-height: 1;

  font-weight: 400;
}

/* =========================================================
   دایره مرحله
========================================================= */

.cooperation-step__circle {
  position: relative;

  width: 70px;

  height: 70px;

  margin-top: 17px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--process-bg);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.96),
    8px 8px 16px rgba(75, 94, 90, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

  z-index: 5;
}

/* حلقه داخلی */

.cooperation-step__circle::before {
  content: "";

  position: absolute;

  inset: 5px;

  border-radius: 50%;

  box-shadow:
    inset 1px 1px 3px rgba(255, 255, 255, 0.8),
    inset -2px -2px 4px rgba(87, 104, 101, 0.06);

  pointer-events: none;
}

/* حاشیه بسیار ظریف */

.cooperation-step__circle::after {
  content: "";

  position: absolute;

  inset: -3px;

  border-radius: 50%;

  border: 1px solid rgba(15, 91, 84, 0.06);

  pointer-events: none;
}

/* آیکون */

.cooperation-step__circle i {
  position: relative;

  z-index: 2;

  color: var(--process-green);

  font-size: 29px;

  line-height: 1;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

/* عنوان مرحله */

.cooperation-step h3 {
  margin: 8px 0 0;

  color: var(--process-green);

  font-family: "Vazirmatn", sans-serif;

  font-size: 12px;

  line-height: 1.5;

  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
   موقعیت 7 مرحله
========================================================= */

/* 01 - آشنایی */

.cooperation-step--01 {
  right: 4%;
}

/* 02 - تحلیل */

.cooperation-step--02 {
  right: 19%;
}

/* 03 - استراتژی */

.cooperation-step--03 {
  right: 34%;
}

/* 04 - طراحی */

.cooperation-step--04 {
  right: 49%;
}

/* 05 - توسعه */

.cooperation-step--05 {
  right: 64%;
}

/* 06 - راه‌اندازی */

.cooperation-step--06 {
  right: 79%;
}

/* 07 - رشد */

.cooperation-step--07 {
  right: 94%;
}

/* =========================================================
   HOVER
========================================================= */

.cooperation-step:hover {
  z-index: 10;
}

.cooperation-step:hover .cooperation-step__circle {
  transform: translateY(-4px);

  box-shadow:
    -9px -9px 18px rgba(255, 255, 255, 0.98),
    10px 10px 19px rgba(75, 94, 90, 0.23);
}

.cooperation-step:hover .cooperation-step__circle i {
  color: var(--process-gold);

  transform: scale(1.07);
}

.cooperation-step:hover h3 {
  color: var(--process-gold);
}

/* =========================================================
   CTA پایان مسیر
========================================================= */

.cooperation-finish {
  position: absolute;
  left: -225px;
  top: 46px;
  width: 150px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 30px;
  background: rgba(243, 245, 244, 0.96);
  border: 1px solid rgba(15, 91, 84, 0.08);
  text-decoration: none;
  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(75, 94, 90, 0.16);
  z-index: 999;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  -webkit-transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  -moz-transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  -ms-transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  -o-transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* اتصال آخر مسیر به CTA */

/* .cooperation-finish::after {
  content: "";

  position: absolute;

  left: 97%;

  top: 56%;

  width: 40px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(15, 91, 84, 0.25));
} */

/* =========================================================
   آیکون CTA
========================================================= */

.cooperation-finish__icon {
  width: 38px;

  height: 38px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background: var(--process-green);

  box-shadow:
    -3px -3px 6px rgba(255, 255, 255, 0.8),
    4px 4px 8px rgba(48, 69, 65, 0.25);

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.cooperation-finish__icon i {
  font-size: 16px;

  line-height: 1;
}

/* =========================================================
   متن CTA
========================================================= */

.cooperation-finish__text {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  color: var(--process-green);

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  line-height: 1.5;

  font-weight: 800;

  white-space: nowrap;
}

.cooperation-finish__text small {
  color: #9ba5a5;

  font-size: 7px;

  line-height: 1.5;

  font-weight: 500;
}

/* =========================================================
   CTA HOVER
========================================================= */

.cooperation-finish:hover {
  transform: translateY(-3px);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.98),
    9px 9px 18px rgba(75, 94, 90, 0.22);
}

.cooperation-finish:hover .cooperation-finish__icon {
  background: var(--process-gold);

  transform: translateX(-3px);
}
/* =========================================================
   FUTURE CTA
========================================================= */

.future-cta {
  --cta-green: #0f5b54;
  --cta-green-dark: #07453f;
  --cta-gold: #c9a24a;

  --cta-text: #173330;
  --cta-muted: #71817f;

  position: relative;

  width: 100%;

  min-height: 190px;

  overflow: hidden;

  direction: rtl;

  isolation: isolate;

  box-sizing: border-box;

  border-radius: 18px;

  background: #edf1ef;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.future-cta__background {
  position: absolute;

  inset: 0;

  z-index: -1;

  background-image: var(--service-final-image, url("/assets/images/FUTURE\ CTA.png"));

  background-size: cover;

  background-position: center center;

  background-repeat: no-repeat;

  transform: scale(1.01);
}

/* =========================================================
   OVERLAY
========================================================= */

.future-cta__overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(255, 255, 255, 0.16) 100%
  );
}

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

.future-cta__content {
  position: relative;

  z-index: 3;
  width: 100%;
  min-height: 190px;
  padding: 28px 7%;
  box-sizing: border-box;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 40px;
  flex-direction: column;
}

/* =========================================================
   TEXT
========================================================= */

.future-cta__text {
  max-width: 610px;

  text-align: right;

  direction: rtl;
}

/* Eyebrow */

.future-cta__eyebrow {
  display: block;

  margin-bottom: 5px;

  color: var(--cta-gold);

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  line-height: 1.6;

  font-weight: 700;
}

/* Title */

.future-cta__text h2 {
  margin: 0;

  color: var(--cta-text);

  font-family: "Vazirmatn", sans-serif;

  font-size: 27px;

  line-height: 1.55;

  font-weight: 800;

  letter-spacing: -0.5px;
}

/* Description */

.future-cta__text p {
  margin: 5px 0 0;

  color: var(--cta-muted);

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  line-height: 1.9;

  font-weight: 500;
}

/* =========================================================
   BUTTONS CONTAINER
========================================================= */

.future-cta__actions {
  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  direction: rtl;
}

/* =========================================================
   BASE BUTTON
========================================================= */

.future-cta__button {
  position: relative;

  width: 158px;

  height: 52px;

  padding: 0 18px;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  border-radius: 16px;

  font-family: "Vazirmatn", sans-serif;

  font-size: 11px;

  line-height: 1;

  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

/* =========================================================
   INNER HIGHLIGHT
========================================================= */

.future-cta__button::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 14px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.65),
    inset -2px -2px 4px rgba(30, 55, 51, 0.1);
}

/* Keep content above pseudo */

.future-cta__button span,
.future-cta__button i {
  position: relative;

  z-index: 2;
}

/* =========================================================
   PRIMARY GREEN BUTTON
========================================================= */

.future-cta__button--primary {
  color: #ffffff;

  background: linear-gradient(145deg, #12665e 0%, #0f5b54 45%, #0b504a 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:

        /* نور بالا و چپ */
    -8px -8px 16px rgba(255, 255, 255, 0.78),
    /* سایه پایین و راست */ 9px 10px 19px rgba(31, 66, 61, 0.38),
    /* عمق داخلی */ inset 1px 1px 2px rgba(255, 255, 255, 0.18),
    inset -2px -2px 4px rgba(0, 45, 40, 0.15);
}

/* Primary Hover */

.future-cta__button--primary:hover {
  transform: translateY(-3px);
  color: var(--cta-gold);
  background: linear-gradient(145deg, #146c63, #0f5f57, #0b514b);

  box-shadow:
    -10px -10px 19px rgba(255, 255, 255, 0.86),
    12px 14px 23px rgba(31, 66, 61, 0.44),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -2px -2px 4px rgba(0, 45, 40, 0.15);
}

/* Primary Active */

.future-cta__button--primary:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(2, 43, 38, 0.42),
    inset -5px -5px 10px rgba(83, 145, 137, 0.27);
}

/* Primary Arrow */

.future-cta__button--primary i {
  font-size: 17px;

  line-height: 1;

  transition: transform 0.2s ease;
}

.future-cta__button--primary:hover i {
  transform: translateX(-4px);
}

/* =========================================================
   SECONDARY BUTTON
========================================================= */

.future-cta__button--secondary {
  color: var(--cta-green);

  background: linear-gradient(
    145deg,
    rgba(249, 251, 250, 0.97),
    rgba(232, 238, 235, 0.92)
  );

  border: 1px solid #c9a24a80;

  box-shadow:

        /* نور بالا */
    -8px -8px 16px rgba(255, 255, 255, 0.98),
    /* سایه پایین */ 9px 10px 18px rgba(67, 88, 84, 0.23),
    /* عمق داخلی */ inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -2px -2px 4px rgba(75, 95, 90, 0.07);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);
}

/* Secondary Hover */

.future-cta__button--secondary:hover {
  color: var(--cta-gold);

  transform: translateY(-3px);

  box-shadow:
    -10px -10px 19px rgba(255, 255, 255, 1),
    12px 13px 22px rgba(67, 88, 84, 0.28),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(75, 95, 90, 0.06);
}

/* Secondary Active */

.future-cta__button--secondary:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(70, 89, 85, 0.2),
    inset -5px -5px 10px rgba(255, 255, 255, 0.96);
}

/* Phone Icon */

.future-cta__button--secondary i {
  width: 25px;

  height: 25px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-size: 14px;

  line-height: 1;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.future-cta__button--secondary:hover i {
  transform: scale(1.08);
}

/* =========================================================
   FOCUS
========================================================= */

.future-cta__button:focus-visible {
  outline: 2px solid var(--cta-gold);

  outline-offset: 4px;
}
/* ////////////////////////////////////صفحه جزئیات خدمات//////////////////////////////////////////////// */
/* =========================================================
   SERVICE DETAIL HERO
========================================================= */

.service-detail-hero {
  --sd-green: #075b54;
  --sd-green-dark: #043f3a;
  --sd-green-light: #0b6b62;

  --sd-gold: #c9a24a;

  --sd-text: #f5f8f6;

  position: relative;

  width: 100%;

  height: 520px;

  overflow: hidden;

  direction: rtl;

  background: #064b45;

  border-radius: 0 0 18px 18px;

  isolation: isolate;

  box-sizing: border-box;
}

/* =========================================================
   BACKGROUND
========================================================= */

.service-detail-hero__background {
  position: absolute;

  inset: 0;

  z-index: -4;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transform: scale(1.01);
}

/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.service-detail-hero__overlay {
  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 25% 55%,
      rgba(24, 116, 105, 0.28),
      transparent 35%
    ),
    linear-gradient(
      90deg,
      rgba(2, 48, 44, 0.12),
      rgba(2, 48, 44, 0.04) 48%,
      rgba(2, 48, 44, 0.2)
    );
}

/* =========================================================
   HEADER
========================================================= */

.service-detail-header {
  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  height: 74px;

  padding: 0 34px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  box-sizing: border-box;

  z-index: 20;
}

/* =========================================================
   LOGO
========================================================= */

.service-detail-logo {
  grid-column: 1;

  justify-self: start;

  width: 78px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;
}

.service-detail-logo img {
  display: block;

  width: 108px;

  height: auto;

  object-fit: contain;
}

/* =========================================================
   NAVIGATION
========================================================= */

.service-detail-nav {
  grid-column: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 32px;

  direction: rtl;

  white-space: nowrap;
}

.service-detail-nav a {
  position: relative;

  height: 74px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: rgba(255, 255, 255, 0.84);

  font-family: "Vazirmatn", sans-serif;

  font-size: 11px;

  font-weight: 500;

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

/* نقطه زیر منو */

.service-detail-nav a::after {
  content: "";

  position: absolute;

  right: 50%;

  bottom: 13px;

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--sd-gold);

  opacity: 0;

  transform: translateX(50%) scale(0);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Hover */

.service-detail-nav a:hover {
  color: var(--sd-gold);

  transform: translateY(-1px);
}

.service-detail-nav a:hover::after {
  opacity: 1;

  transform: translateX(50%) scale(1);
}

/* Active */

.service-detail-nav a.is-active {
  color: var(--sd-gold);
}

.service-detail-nav a.is-active::after {
  opacity: 1;

  transform: translateX(50%) scale(1);
}

/* =========================================================
   ACTIONS
========================================================= */

.service-detail-actions {
  grid-column: 3;

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 10px;

  direction: ltr;
}

/* =========================================================
   NEUMORPHIC ICON BUTTON
========================================================= */

.service-detail-action {
  position: relative;

  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  color: rgba(255, 255, 255, 0.92);

  background: linear-gradient(
    145deg,
    rgba(20, 102, 94, 0.9),
    rgba(5, 66, 60, 0.94)
  );

  border: 1px solid rgba(255, 255, 255, 0.09);

  text-decoration: none;

  box-shadow:

        /* نور بالا چپ */
    -5px -5px 10px rgba(44, 135, 125, 0.28),
    /* سایه پایین راست */ 6px 7px 12px rgba(0, 30, 27, 0.42),
    /* عمق داخلی */ inset 1px 1px 2px rgba(255, 255, 255, 0.13),
    inset -2px -2px 4px rgba(0, 30, 27, 0.15);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

/* Highlight داخلی */

.service-detail-action::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 11px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.12),
    inset -1px -1px 2px rgba(0, 30, 27, 0.14);

  pointer-events: none;
}

/* Icon */

.service-detail-action i {
  position: relative;

  z-index: 2;

  font-size: 17px;

  line-height: 1;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

/* Hover */

.service-detail-action:hover {
  color: var(--sd-gold);

  transform: translateY(-2px);

  box-shadow:
    -6px -6px 12px rgba(44, 135, 125, 0.34),
    8px 9px 15px rgba(0, 30, 27, 0.48),
    inset 1px 1px 2px rgba(255, 255, 255, 0.14);
}

.service-detail-action:hover i {
  transform: scale(1.08);
}

/* Active */

.service-detail-action:active {
  transform: translateY(1px);

  box-shadow:
    inset 4px 4px 8px rgba(0, 30, 27, 0.4),
    inset -4px -4px 8px rgba(35, 120, 111, 0.22);
}

/* =========================================================
   HERO CONTENT
========================================================= */

.service-detail-hero__content {
  position: relative;

  z-index: 5;

  width: 100%;

  height: 100%;

  padding: 74px 7% 30px 7%;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;
}

/* =========================================================
   TEXT SIDE
========================================================= */

.service-detail-hero__text {
  position: relative;

  z-index: 8;

  width: 48%;

  max-width: 510px;

  margin-right: 0;

  text-align: right;
}

/* =========================================================
   EYEBROW
========================================================= */

.service-detail-hero__eyebrow {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 7px;

  margin-bottom: 13px;

  color: var(--sd-gold);

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  line-height: 1.5;

  font-weight: 700;
}

.service-detail-hero__eyebrow-dot {
  width: 5px;

  height: 5px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--sd-gold);

  box-shadow: 0 0 7px rgba(201, 162, 74, 0.55);
}

/* =========================================================
   TITLE
========================================================= */

.service-detail-hero__text h1 {
  margin: 0;

  color: #ffffff;

  font-family: "Vazirmatn", sans-serif;

  font-size: 43px;

  line-height: 1.45;

  font-weight: 800;

  letter-spacing: -1.3px;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.service-detail-hero__text p {
  width: 430px;

  max-width: 100%;

  margin: 12px 0 27px;

  color: rgba(239, 247, 245, 0.83);

  font-family: "Vazirmatn", sans-serif;

  font-size: 12px;

  line-height: 2.05;

  font-weight: 400;
}

/* =========================================================
   BUTTONS
========================================================= */

.service-detail-hero__buttons {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 14px;

  direction: rtl;
}

/* =========================================================
   BASE BUTTON
========================================================= */

.service-detail-button {
  position: relative;

  width: 166px;

  height: 49px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  box-sizing: border-box;

  border-radius: 16px;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;

  font-weight: 800;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background 0.2s ease;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.service-detail-button--primary {
  color: #ffffff;

  background: linear-gradient(145deg, #117066, #0b5d55 55%, #084c46);

  border: 1px solid rgba(116, 214, 201, 0.16);

  box-shadow:

        /* برجستگی نور */
    -7px -7px 14px rgba(53, 157, 145, 0.25),
    /* سایه */ 9px 10px 18px rgba(0, 29, 26, 0.42),
    /* عمق داخلی */ inset 1px 1px 2px rgba(255, 255, 255, 0.18),
    inset -2px -2px 4px rgba(0, 35, 31, 0.18);
}

/* Inner */

.service-detail-button--primary::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 14px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.14),
    inset -2px -2px 4px rgba(0, 30, 27, 0.12);

  pointer-events: none;
}

.service-detail-button--primary span,
.service-detail-button--primary i {
  position: relative;

  z-index: 2;
}

/* Hover */

.service-detail-button--primary:hover {
  transform: translateY(-3px);
  color: #c9a24a;
  box-shadow:
    -9px -9px 17px rgba(53, 157, 145, 0.3),
    11px 13px 21px rgba(0, 29, 26, 0.48),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2);
}

/* Active */

.service-detail-button--primary:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(0, 31, 28, 0.45),
    inset -5px -5px 10px rgba(55, 151, 140, 0.25);
}

/* Arrow */

.service-detail-button--primary i {
  font-size: 16px;

  transition: transform 0.2s ease;
}

.service-detail-button--primary:hover i {
  transform: translateX(-4px);
}

/* =========================================================
   SECONDARY BUTTON
========================================================= */

.service-detail-button--secondary {
  color: var(--sd-green);

  background: linear-gradient(
    145deg,
    rgba(250, 252, 251, 0.98),
    rgba(228, 237, 234, 0.94)
  );

  border: 1px solid rgba(255, 255, 255, 0.78);

  box-shadow:
    0px 0px 5px rgba(255, 255, 255, 0.96),
    9px 10px 18px rgba(0, 31, 28, 0.27),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(70, 94, 89, 0.07);
}

/* Inner */

.service-detail-button--secondary::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 14px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.9),
    inset -2px -2px 4px rgba(70, 94, 89, 0.06);

  pointer-events: none;
}

.service-detail-button--secondary span,
.service-detail-button--secondary i {
  position: relative;

  z-index: 2;
}

/* Hover */

.service-detail-button--secondary:hover {
  color: var(--sd-gold);

  transform: translateY(-3px);

  box-shadow:
    -1px -1px 15px rgba(255, 255, 255, 1),
    1px 1px 15px rgba(0, 31, 28, 0.31),
    inset 1px 1px 2px rgba(255, 255, 255, 0.95);
}

/* Active */

.service-detail-button--secondary:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(70, 94, 89, 0.2),
    inset -5px -5px 10px rgba(255, 255, 255, 0.96);
}

/* Arrow */

.service-detail-button--secondary i {
  font-size: 15px;

  transition: transform 0.2s ease;
}

.service-detail-button--secondary:hover i {
  transform: translateX(-4px);
}

/* =========================================================
   HERO VISUAL
========================================================= */

.service-detail-hero__visual {
  position: relative;

  width: 51%;

  height: 390px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 4;
}

/* Glow پشت تصویر */

.service-detail-hero__visual::before {
  content: "";

  position: absolute;

  width: 440px;

  height: 300px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(33, 130, 119, 0.28),
    transparent 70%
  );

  filter: blur(25px);

  pointer-events: none;
}

/* تصویر */

.service-detail-hero__visual img {
  position: relative;

  z-index: 3;

  display: block;

  width: 100%;

  max-width: 560px;

  height: auto;

  max-height: 390px;

  object-fit: contain;

  object-position: center;

  filter: drop-shadow(0 20px 25px rgba(0, 25, 22, 0.28));

  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease;
}

/* Hover تصویر */

.service-detail-hero:hover .service-detail-hero__visual img {
  transform: translateY(-5px) scale(1.015);

  filter: drop-shadow(0 25px 30px rgba(0, 25, 22, 0.35));
}

/* =========================================================
   FOCUS
========================================================= */

.service-detail-button:focus-visible,
.service-detail-action:focus-visible {
  outline: 2px solid var(--sd-gold);

  outline-offset: 4px;
}
/* ///////////////////////////////////صفحه جزئیات تولید محتوا///////////////////////////////// */
/* =========================================================
   CONTENT PRODUCTION PAGE
========================================================= */

.content-page {
  --content-green: #0f5b54;
  --content-green-dark: #07463f;
  --content-gold: #c9a24a;

  --content-bg: #eef1ee;
  --content-card: #eef0ed;

  --content-text: #203031;
  --content-muted: #778486;

  --content-light: rgba(255, 255, 255, 0.95);
  --content-shadow-dark: rgba(60, 78, 73, 0.24);

  width: 100%;
  direction: rtl;
  /* background: var(--content-bg); */
  color: var(--content-text);
  overflow: hidden;
}

.content-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

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

.content-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 42px;
  text-align: center;
}

.content-section-heading > div {
  text-align: center;
}

.content-heading-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--content-gold);
  font-family: "Vazirmatn", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.content-section-heading h2 {
  margin: 0;
  color: var(--content-green);
  font-family: "Vazirmatn", sans-serif;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 800;
}

.content-heading-line {
  width: 65px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--content-gold));
}

.content-heading-line:last-child {
  background: linear-gradient(90deg, var(--content-gold), transparent);
}

/* =========================================================
   SECTION 01 — INTRO
========================================================= */

.content-intro {
  padding: 75px 0 70px;
  background: #f4f5f3;
}

.content-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 70px;
}

.content-intro-text {
  text-align: right;
}

.content-intro-text h3 {
  margin: 0 0 20px;

  color: var(--content-text);

  font-family: "Vazirmatn", sans-serif;
  font-size: 30px;
  line-height: 1.7;
  font-weight: 800;
}

.content-intro-text h3 span {
  color: var(--content-gold);
}

.content-intro-text p {
  max-width: 650px;
  margin: 0 0 13px;

  color: var(--content-muted);

  font-family: "Vazirmatn", sans-serif;
  font-size: 13px;
  line-height: 2.2;
}

/* stats */

.content-intro-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.content-stat {
  min-height: 115px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 24px;

  background: var(--content-card);

  box-shadow:
    -9px -9px 18px rgba(255, 255, 255, 0.95),
    9px 9px 18px var(--content-shadow-dark);

  text-align: center;
}

.content-stat strong {
  margin-bottom: 5px;

  color: var(--content-gold);

  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.content-stat span {
  color: var(--content-green);

  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   SECTION 02 — SERVICES
========================================================= */

.content-services {
  padding: 75px 0 25px 0;
  background: var(--content-bg);
}

.content-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.content-service-card {
  position: relative;

  min-height: 230px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 30px 24px 25px;

  box-sizing: border-box;

  border-radius: 25px;

  background: var(--content-card);

  box-shadow:
    -10px -10px 20px rgba(255, 255, 255, 0.96),
    10px 10px 20px rgba(72, 91, 85, 0.24);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.content-service-card:hover {
  transform: translateY(-7px);

  box-shadow:
    -12px -12px 22px rgba(255, 255, 255, 1),
    13px 13px 24px rgba(72, 91, 85, 0.3);
}

/* icon */

.content-service-icon {
  width: 66px;
  height: 66px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border-radius: 20px;

  color: var(--content-green);

  background: var(--content-card);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(75, 91, 86, 0.23);

  transition: 0.25s ease;
}

.content-service-icon i {
  font-size: 29px;
}

.content-service-card:hover .content-service-icon {
  color: var(--content-gold);

  transform: translateY(-2px);
}

/* number */

.content-service-number {
  position: absolute;

  top: 20px;
  left: 22px;

  color: rgba(201, 162, 74, 0.65);

  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.content-service-card h3 {
  margin: 0 0 13px;

  color: var(--content-green);

  font-family: "Vazirmatn", sans-serif;
  font-size: 15px;
  font-weight: 800;

  text-align: center;
}

.content-service-card p {
  max-width: 240px;
  min-height: 65px;

  margin: 0;

  color: var(--content-muted);

  font-family: "Vazirmatn", sans-serif;
  font-size: 10.5px;
  line-height: 2;

  text-align: center;
}

/* detail */

.content-detail-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 135px;
  height: 40px;

  padding: 0 16px;

  box-sizing: border-box;

  border: none;
  border-radius: 13px;

  background: #0f5b54;
  color: #eef0ed;

  text-decoration: none;
  margin-top: 30px;
  margin-right: 500px;
  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
  font-weight: 800;

  /* برجستگی سه‌بعدی */
  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.98),
    7px 7px 14px rgba(65, 82, 77, 0.27);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

/* لایه داخلی برای عمق بیشتر */
.content-detail-link::before {
  content: "";

  position: absolute;
  inset: 2px;

  border-radius: 11px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(65, 82, 77, 0.08);
}

/* متن و آیکن بالای لایه */
.content-detail-link span,
.content-detail-link i {
  position: relative;
  z-index: 2;
}

/* آیکن */
.content-detail-link i {
  font-size: 14px;
  line-height: 1;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

/* Hover */
.content-detail-link:hover {
  color: #c9a24a;

  transform: translateY(-3px);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 1),
    9px 9px 17px rgba(65, 82, 77, 0.32);
}

.content-detail-link:hover i {
  transform: translateX(-3px);
}

/* حالت کلیک */
.content-detail-link:active {
  transform: translateY(1px);

  box-shadow:
    inset 4px 4px 8px rgba(65, 82, 77, 0.23),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95);
}

/* Focus */
.content-detail-link:focus-visible {
  outline: 2px solid #c9a24a;
  outline-offset: 3px;
}

/* =========================================================
   SECTION 03 — STRATEGY
========================================================= */

.content-strategy {
  padding: 80px 0;
  background: #f4f5f3;
}

.content-strategy-box {
  min-height: 400px;

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;

  padding: 55px;

  border-radius: 32px;

  background:
    radial-gradient(circle at 80% 20%, rgba(15, 91, 84, 0.07), transparent 35%),
    #eef0ed;

  box-shadow:
    -12px -12px 25px rgba(255, 255, 255, 0.95),
    12px 12px 25px rgba(73, 91, 86, 0.22);
}

.content-strategy-text {
  text-align: right;
}

.content-strategy-text h2 {
  margin: 10px 0 18px;

  color: var(--content-text);

  font-family: "Vazirmatn", sans-serif;
  font-size: 30px;
  line-height: 1.6;
}

.content-strategy-text h2 span {
  color: var(--content-gold);
}

.content-strategy-text p {
  max-width: 430px;

  margin: 0 0 25px;

  color: var(--content-muted);

  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
  line-height: 2.2;
}

/* primary button */

.content-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 165px;
  height: 48px;

  padding: 0 20px;

  border-radius: 15px;

  color: #fff;
  background: var(--content-green);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    8px 8px 16px rgba(4, 55, 49, 0.42);

  text-decoration: none;

  font-family: "Vazirmatn", sans-serif;
  font-size: 11px;
  font-weight: 700;

  transition: 0.2s ease;
}

.content-primary-button:hover {
  transform: translateY(-2px);

  background: #0c625a;

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 1),
    10px 10px 20px rgba(4, 55, 49, 0.48);
}

.content-primary-button:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(3, 48, 43, 0.45),
    inset -5px -5px 10px rgba(79, 142, 134, 0.3);
}

/* orbit */

.content-strategy-orbit {
  position: relative;

  width: 360px;
  height: 360px;

  margin: auto;
}

.content-strategy-orbit::before,
.content-strategy-orbit::after {
  content: "";

  position: absolute;

  border: 1px dashed rgba(15, 91, 84, 0.18);

  border-radius: 50%;
}

.content-strategy-orbit::before {
  inset: 45px;
}

.content-strategy-orbit::after {
  inset: 90px;
}

.strategy-center {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100px;
  height: 100px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  color: #fff;
  background: var(--content-green);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.9),
    9px 9px 18px rgba(58, 76, 71, 0.3);
}

.strategy-center i {
  margin-bottom: 6px;
  font-size: 25px;
}

.strategy-center span {
  font-family: "Vazirmatn", sans-serif;
  font-size: 10px;
}

.strategy-item {
  position: absolute;

  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: var(--content-green);

  background: var(--content-card);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 13px rgba(72, 91, 85, 0.23);

  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
  font-weight: 700;
}

.strategy-item--1 {
  top: 15px;
  right: 50%;
  transform: translateX(50%);
}

.strategy-item--2 {
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.strategy-item--3 {
  bottom: 15px;
  right: 50%;
  transform: translateX(50%);
}

.strategy-item--4 {
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================================================
   SECTION 04 — PROCESS
========================================================= */

.content-process {
  padding: 80px 0;
  background: var(--content-bg);
}

.content-process-track {
  position: relative;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.content-process-line {
  position: absolute;

  top: 38px;
  right: 7%;
  left: 7%;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--content-gold),
    var(--content-green),
    var(--content-gold),
    transparent
  );

  opacity: 0.4;
}

.content-process-step {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.process-number {
  position: absolute;

  top: -15px;

  color: rgb(201, 163, 74);

  font-family: "Inter", sans-serif;
  font-size: 9px;
}

.content-process-step > i {
  position: relative;
  z-index: 2;

  width: 76px;
  height: 76px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border-radius: 50%;

  color: var(--content-green);

  background: var(--content-card);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    8px 8px 16px rgba(73, 91, 86, 0.25);

  font-size: 26px;
}

.content-process-step h3 {
  margin: 0 0 6px;

  color: var(--content-green);

  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.content-process-step p {
  margin: 0;

  color: var(--content-muted);

  font-family: "Vazirmatn", sans-serif;
  font-size: 8.5px;
}

/* =========================================================
   SECTION 05 — CONTENT TYPES
========================================================= */

.content-types {
  padding: 75px 0;

  background: #f4f5f3;
}

.content-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.content-type-card {
  min-height: 190px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 25px;

  border-radius: 23px;

  background: var(--content-card);

  box-shadow:
    -9px -9px 18px rgba(255, 255, 255, 0.95),
    9px 9px 18px rgba(73, 91, 86, 0.22);

  text-align: center;

  transition: 0.25s ease;
}

.content-type-card:hover {
  transform: translateY(-5px);
}

.content-type-icon {
  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  border-radius: 18px;

  color: var(--content-green);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(73, 91, 86, 0.2);
}

.content-type-icon i {
  font-size: 25px;
}

.content-type-card h3 {
  margin: 0 0 7px;

  color: var(--content-green);

  font-family: "Vazirmatn", sans-serif;
  font-size: 13px;
}

.content-type-card span {
  color: var(--content-muted);

  font-family: "Vazirmatn", sans-serif;
  font-size: 8.5px;
}

/* =========================================================
   SECTION 06 — WHY
========================================================= */

.content-why {
  padding: 80px 0;

  background: var(--content-green);
}

.content-why-box {
  padding: 50px;

  border-radius: 30px;

  background: var(--content-card);

  box-shadow:
    0px 0px 0px rgba(255, 255, 255, 0.96),
    12px 12px 24px rgba(73, 91, 86, 0.22);
}

.content-why-title {
  text-align: center;
  margin-bottom: 40px;
}

.content-why-title h2 {
  margin: 10px 0 0;

  color: var(--content-text);

  font-family: "Vazirmatn", sans-serif;
  font-size: 26px;
}

.content-why-title h2 span {
  color: var(--content-gold);
}

.content-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.content-why-item {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 20px;

  border-radius: 18px;

  background: rgba(238, 240, 237, 0.75);

  box-shadow:
    inset 2px 2px 5px rgba(79, 93, 89, 0.08),
    inset -2px -2px 5px rgba(255, 255, 255, 0.85);
}

.content-why-item > i {
  width: 52px;
  height: 52px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  color: var(--content-green);

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    5px 5px 10px rgba(73, 91, 86, 0.2);

  font-size: 22px;
}

.content-why-item h3 {
  margin: 0 0 5px;

  color: var(--content-green);

  font-family: "Vazirmatn", sans-serif;
  font-size: 12px;
}

.content-why-item p {
  margin: 0;

  color: var(--content-muted);

  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
  line-height: 1.9;
}

/* =========================================================
   SECTION 07 — PORTFOLIO
========================================================= */

.content-portfolio {
  padding: 80px 0;

  background: #f4f5f3;
}

.content-portfolio-grid {
  display: grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr;

  gap: 18px;

  height: 330px;
}

.content-project {
  position: relative;

  display: block;

  overflow: hidden;

  border-radius: 22px;

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.9),
    8px 8px 16px rgba(73, 91, 86, 0.22);

  text-decoration: none;
}

.content-project img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.content-project:hover img {
  transform: scale(1.05);
}

.content-project-overlay {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  padding: 25px;

  color: #fff;

  background: linear-gradient(transparent, rgba(4, 45, 41, 0.9));
}

.content-project-overlay span {
  color: #d8c48e;

  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
}

.content-project-overlay h3 {
  margin: 5px 0 0;

  font-family: "Vazirmatn", sans-serif;
  font-size: 15px;
}

.content-project-overlay i {
  position: absolute;

  left: 22px;
  bottom: 22px;

  font-size: 18px;
}

/* portfolio button */

.content-portfolio-action {
  display: flex;
  justify-content: center;

  margin-top: 35px;
}

.content-outline-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 200px;
  height: 52px;

  padding: 0 24px;

  box-sizing: border-box;

  border: none;
  border-radius: 16px;

  background: #0f5b54;
  color: #eef0ed;

  text-decoration: none;

  font-family: "Vazirmatn", sans-serif;
  font-size: 11px;
  font-weight: 800;

  /* برجستگی اصلی */
  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.98),
    9px 9px 18px rgba(65, 82, 77, 0.28);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

/* لایه داخلی برای حس 3D بیشتر */
.content-outline-button::before {
  content: "";

  position: absolute;
  inset: 2px;

  border-radius: 14px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(65, 82, 77, 0.08);
}

/* متن و آیکن بالای لایه داخلی */
.content-outline-button span,
.content-outline-button i {
  position: relative;
  z-index: 2;
}

/* آیکن */
.content-outline-button i {
  font-size: 17px;
  line-height: 1;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

/* Hover */
.content-outline-button:hover {
  color: #c9a24a;

  transform: translateY(-3px);

  box-shadow:
    -10px -10px 19px rgba(255, 255, 255, 1),
    11px 11px 21px rgba(65, 82, 77, 0.34);
}

.content-outline-button:hover i {
  transform: translateX(-4px);
}

/* کلیک */
.content-outline-button:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(65, 82, 77, 0.22),
    inset -5px -5px 10px rgba(255, 255, 255, 0.95);
}

/* Focus */
.content-outline-button:focus-visible {
  outline: 2px solid #c9a24a;
  outline-offset: 4px;
}

/* =========================================================
   SECTION 08 — FINAL CTA
========================================================= */

.content-final-cta {
  padding: 35px 28px 70px;

  background: #f4f5f3;
}

.content-final-cta__inner {
  position: relative;

  min-height: 260px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(201, 162, 74, 0.16),
      transparent 28%
    ),
    linear-gradient(115deg, #07463f, #0b5b54 55%, #06443d);

  box-shadow:
    -10px -10px 20px rgba(255, 255, 255, 0.95),
    10px 10px 20px rgba(73, 91, 86, 0.28);
}

.content-final-cta__inner::before {
  content: "";

  position: absolute;

  inset: 0;

  background: repeating-radial-gradient(
    ellipse at 10% 100%,
    transparent 0,
    transparent 30px,
    rgba(201, 162, 74, 0.12) 31px,
    transparent 32px
  );

  opacity: 0.6;

  pointer-events: none;
}

.content-final-cta__content {
  position: relative;
  z-index: 2;

  max-width: 600px;

  text-align: center;
}

.content-final-cta__content > span {
  color: #d8c48e;

  font-family: "Vazirmatn", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.content-final-cta__content h2 {
  margin: 10px 0;

  color: #fff;

  font-family: "Vazirmatn", sans-serif;
  font-size: 27px;
  line-height: 1.7;
}

.content-final-cta__content h2 strong {
  color: #d8c48e;
  font-weight: 800;
}

.content-final-cta__content p {
  margin: 0 auto 22px;

  color: rgba(255, 255, 255, 0.7);

  font-family: "Vazirmatn", sans-serif;
  font-size: 10px;
  line-height: 2;
}

.content-final-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 175px;
  height: 50px;

  padding: 0 20px;

  border-radius: 16px;

  color: var(--content-green);

  background: #edf0ed;

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.25),
    8px 8px 16px rgba(0, 31, 28, 0.45);

  text-decoration: none;

  font-family: "Vazirmatn", sans-serif;
  font-size: 11px;
  font-weight: 800;

  transition: 0.2s ease;
}

.content-final-button:hover {
  color: var(--content-gold);
  transform: translateY(-2px);
}

.content-final-button:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(40, 64, 59, 0.25),
    inset -5px -5px 10px rgba(255, 255, 255, 0.9);
}
/* //////////////////////////////صفحه ui/ux /////////////////////////////////////////// */
/* =========================================================
   UI / UX PAGE
========================================================= */

.uiux-page {
  --uiux-bg: #eef1ed;
  --uiux-surface: #eef0ed;
  --uiux-green: #0f5b54;
  --uiux-green-dark: #08473f;
  --uiux-gold: #c9a24a;
  --uiux-text: #253335;
  --uiux-muted: #788486;
  --uiux-white: #ffffff;

  width: 100%;
  direction: rtl;
  font-family: "Vazirmatn", sans-serif;
  color: var(--uiux-text);
  background: var(--uiux-bg);
  overflow: hidden;
}

.uiux-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* =========================================================
   COMMON HEADINGS
========================================================= */

/* =========================================================
   01 — INTRO
========================================================= */

.uiux-intro {
  position: relative;
  padding: 80px 0;
  background: var(--uiux-bg);
}

.uiux-intro .uiux-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
}

.uiux-intro__content {
  text-align: right;
}

.uiux-intro__content h2 {
  margin: 0;
  color: var(--uiux-text);
  font-size: 36px;
  line-height: 1.65;
  font-weight: 800;
  letter-spacing: -1px;
}

.uiux-intro__content h2 span {
  color: var(--uiux-gold);
}

.uiux-intro__content > p {
  max-width: 530px;
  margin: 20px 0 30px;

  color: var(--uiux-muted);
  font-size: 13px;
  line-height: 2.25;
  font-weight: 500;
}

.uiux-intro__stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.uiux-stat {
  min-width: 110px;
  padding: 12px 16px;

  border-radius: 15px;
  background: var(--uiux-surface);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(70, 87, 82, 0.2);
}

.uiux-stat strong {
  display: block;
  margin-bottom: 4px;

  color: var(--uiux-gold);
  font-size: 15px;
}

.uiux-stat span {
  color: var(--uiux-muted);
  font-size: 9px;
}

/* intro visual */

.uiux-intro__visual {
  position: relative;
  min-height: 390px;
}

.uiux-intro__glow {
  position: absolute;
  width: 260px;
  height: 260px;
  top: 65px;
  left: 50%;

  transform: translateX(-50%);
  border-radius: 50%;

  background: rgba(15, 91, 84, 0.08);
  filter: blur(20px);
}

.uiux-device {
  position: absolute;

  border-radius: 18px;
  background: #e9ece8;

  box-shadow:
    -14px -14px 28px rgba(255, 255, 255, 0.95),
    16px 16px 30px rgba(69, 86, 81, 0.25);
}

.uiux-device--back {
  width: 250px;
  height: 310px;

  top: 38px;
  left: 65px;

  transform: rotate(-8deg);
}

.uiux-device--front {
  width: 285px;
  height: 350px;

  top: 20px;
  left: 145px;

  transform: rotate(5deg);

  z-index: 5;
}

.uiux-device__top {
  height: 28px;

  display: flex;
  align-items: center;
  gap: 5px;

  padding: 0 13px;

  direction: ltr;
}

.uiux-device__top span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9c0bc;
}

.uiux-device__screen {
  position: absolute;
  inset: 30px 10px 10px;

  overflow: hidden;

  border-radius: 12px;
  background: #f7f8f6;
}

.uiux-ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 15px;
  direction: ltr;
}

.uiux-ui-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--uiux-green);
}

.uiux-ui-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.uiux-ui-lines span {
  display: block;
  width: 65px;
  height: 5px;
  border-radius: 5px;
  background: #dce1dd;
}

.uiux-ui-lines span:last-child {
  width: 40px;
}

.uiux-ui-hero {
  height: 100px;
  margin: 8px 14px;

  border-radius: 10px;

  background: linear-gradient(
    135deg,
    rgba(15, 91, 84, 0.95),
    rgba(15, 91, 84, 0.65)
  );
}

.uiux-ui-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;

  margin: 12px 14px;
}

.uiux-ui-grid span {
  height: 55px;
  border-radius: 8px;
  background: #e3e8e4;
}

.uiux-mini-header {
  width: 70%;
  height: 7px;
  margin: 18px auto 15px;
  border-radius: 8px;
  background: #d4d9d5;
}

.uiux-mini-block {
  height: 75px;
  margin: 0 16px 10px;

  border-radius: 9px;
  background: var(--uiux-green);
}

.uiux-mini-block--small {
  height: 10px;
  width: 50%;
  background: #d5dad6;
}

.uiux-mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;

  margin: 15px;
}

.uiux-mini-cards span {
  height: 65px;
  border-radius: 8px;
  background: #e0e5e1;
}

.uiux-floating-chip {
  position: absolute;
  left: 25px;
  bottom: 25px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 15px;

  border-radius: 13px;

  background: var(--uiux-surface);
  color: var(--uiux-green);

  font-size: 9px;
  font-weight: 700;

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(70, 87, 82, 0.25);

  z-index: 10;
}

.uiux-floating-chip i {
  color: var(--uiux-gold);
  font-size: 16px;
}

/* =========================================================
   02 — PROCESS
========================================================= */

.uiux-process {
  padding: 70px 0;
  background: #f4f5f2;
}

.uiux-process__timeline {
  position: relative;

  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;

  padding-top: 20px;
}

.uiux-process__line {
  position: absolute;

  top: 57px;
  right: 7%;
  left: 7%;

  height: 2px;

  background: linear-gradient(
    90deg,
    rgba(201, 162, 74, 0.15),
    var(--uiux-gold),
    rgba(201, 162, 74, 0.15)
  );
}

.uiux-process-card {
  position: relative;
  z-index: 2;

  padding: 0 8px 15px;

  text-align: center;
}

.uiux-process-card__number {
  position: relative;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 17px;

  border-radius: 50%;

  background: var(--uiux-surface);
  color: var(--uiux-gold);

  font-size: 9px;
  font-weight: 800;

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(70, 87, 82, 0.22);
}

.uiux-process-card.is-active .uiux-process-card__number {
  background: var(--uiux-green);
  color: white;
}

.uiux-process-card__icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 14px;

  border-radius: 14px;

  background: var(--uiux-surface);

  color: var(--uiux-green);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(70, 87, 82, 0.2);
}

.uiux-process-card__icon i {
  font-size: 20px;
}

.uiux-process-card h3 {
  margin: 0 0 8px;

  color: var(--uiux-text);
  font-size: 11px;
  font-weight: 800;
}

.uiux-process-card p {
  margin: 0;

  color: var(--uiux-muted);
  font-size: 8px;
  line-height: 1.9;
}

/* =========================================================
   03 — SERVICES
========================================================= */

.uiux-services {
  padding: 75px 0;
  background: var(--uiux-bg);
}

.uiux-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 20px;
}

.uiux-service-card {
  position: relative;

  min-height: 210px;

  padding: 25px 22px 20px;

  box-sizing: border-box;

  border-radius: 18px;

  background: var(--uiux-surface);

  box-shadow:
    -9px -9px 18px rgba(255, 255, 255, 0.96),
    10px 10px 20px rgba(70, 87, 82, 0.22);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.uiux-service-card:hover {
  transform: translateY(-6px);

  box-shadow:
    -11px -11px 22px rgba(255, 255, 255, 1),
    13px 13px 25px rgba(70, 87, 82, 0.27);
}

.uiux-service-card__icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 17px;

  border-radius: 14px;

  background: var(--uiux-surface);
  color: var(--uiux-green);

  box-shadow:
    inset 2px 2px 4px rgba(75, 92, 87, 0.08),
    inset -3px -3px 5px rgba(255, 255, 255, 0.9);
}

.uiux-service-card__icon i {
  font-size: 21px;
}

.uiux-service-card__number {
  position: absolute;

  top: 22px;
  left: 20px;

  color: rgba(201, 162, 74, 0.6);

  font-size: 10px;
  font-weight: 800;
}

.uiux-service-card h3 {
  margin: 0 0 10px;

  color: var(--uiux-text);
  font-size: 15px;
  font-weight: 800;
}

.uiux-service-card p {
  min-height: 40px;

  margin: 0 0 17px;

  color: var(--uiux-muted);
  font-size: 12px;
  line-height: 2;
}

.uiux-detail-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* min-width: 135px;
  height: 40px; */

  padding: 0 16px;

  box-sizing: border-box;

  border-radius: 13px;

  color: var(--uiux-green);
  background: var(--uiux-surface);

  text-decoration: none;

  font-size: 9px;
  font-weight: 800;

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.98),
    7px 7px 14px rgba(65, 82, 77, 0.27);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.uiux-detail-link::before {
  content: "";

  position: absolute;
  inset: 2px;

  border-radius: 11px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    inset -2px -2px 4px rgba(65, 82, 77, 0.08);
}

.uiux-detail-link span,
.uiux-detail-link i {
  position: relative;
  z-index: 2;
}

.uiux-detail-link i {
  font-size: 14px;

  transition: transform 0.2s ease;
}

.uiux-detail-link:hover {
  color: var(--uiux-gold);
  transform: translateY(-3px);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 1),
    9px 9px 17px rgba(65, 82, 77, 0.32);
}

.uiux-detail-link:hover i {
  transform: translateX(-3px);
}

.uiux-detail-link:active {
  transform: translateY(1px);

  box-shadow:
    inset 4px 4px 8px rgba(65, 82, 77, 0.23),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95);
}

/* =========================================================
   04 — PRODUCTS
========================================================= */

.uiux-products {
  padding: 75px 0;
  background: #f4f5f2;
}

.uiux-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 20px;
}

.uiux-product-card {
  overflow: hidden;

  border-radius: 18px;

  background: var(--uiux-surface);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    9px 9px 18px rgba(70, 87, 82, 0.19);

  transition: transform 0.25s ease;
}

.uiux-product-card:hover {
  transform: translateY(-5px);
}

.uiux-product-card__visual {
  position: relative;

  height: 180px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #e7ebe7;
}

.uiux-product-card__content {
  padding: 18px 18px 21px;

  text-align: right;
}

.uiux-product-card__content > span {
  color: var(--uiux-gold);
  font-size: 9px;
  font-weight: 800;
}

.uiux-product-card__content h3 {
  margin: 5px 0 7px;

  color: var(--uiux-text);
  font-size: 14px;
  font-weight: 800;
}

.uiux-product-card__content p {
  margin: 0;

  color: var(--uiux-muted);
  font-size: 8.5px;
  line-height: 2;
}

/* visual objects */

.uiux-product-card__visual--web {
  background: linear-gradient(135deg, #e1e8e4, #eef1ed);
}

.uiux-product-window {
  width: 180px;
  height: 110px;

  padding: 10px;

  border-radius: 10px;

  background: #f5f7f5;

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(70, 87, 82, 0.2);
}

.uiux-product-window > span {
  display: inline-block;

  width: 5px;
  height: 5px;

  margin-left: 3px;

  border-radius: 50%;

  background: var(--uiux-gold);
}

.uiux-product-window > div {
  height: 62px;

  margin-top: 10px;

  border-radius: 7px;

  background: var(--uiux-green);
}

.uiux-product-card__visual--app {
  background: linear-gradient(145deg, #e8ece8, #dfe5e1);
}

.uiux-phone {
  width: 78px;
  height: 140px;

  padding: 7px;

  border-radius: 14px;

  background: #f6f8f6;

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    8px 8px 15px rgba(70, 87, 82, 0.22);
}

.uiux-phone div {
  width: 100%;
  height: 100%;

  border-radius: 9px;

  background: linear-gradient(180deg, var(--uiux-green) 0 42%, #f2f4f1 42%);
}

.uiux-product-card__visual--dashboard {
  background: #e6ebe7;
}

.uiux-dashboard {
  width: 190px;
  height: 115px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;

  padding: 10px;

  border-radius: 10px;

  background: #f4f6f4;

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(70, 87, 82, 0.2);
}

.uiux-dashboard span {
  border-radius: 6px;
  background: #e1e6e2;
}

.uiux-dashboard span:first-child {
  grid-column: span 2;
  background: var(--uiux-green);
}

.uiux-product-card__visual--webapp {
  background: #e5ebe7;
}

.uiux-webapp {
  width: 185px;
  height: 115px;

  padding: 10px;

  border-radius: 10px;

  background: #f6f8f6;

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(70, 87, 82, 0.2);
}

.uiux-webapp > span {
  display: inline-block;

  width: 6px;
  height: 6px;

  margin-left: 4px;

  border-radius: 50%;

  background: var(--uiux-gold);
}

.uiux-webapp div {
  width: 65%;
  height: 55px;

  margin-top: 15px;

  border-radius: 7px;

  background: var(--uiux-green);
}

/* =========================================================
   05 — DESIGN SYSTEM
========================================================= */

.uiux-design-system {
  padding: 85px 0;

  background: var(--uiux-bg);
}

.uiux-design-system__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 75px;
}

.uiux-design-system__content {
  text-align: right;
}

.uiux-design-system__content h2 {
  margin: 0;

  color: var(--uiux-text);

  font-size: 35px;
  line-height: 1.6;
  font-weight: 800;
}

.uiux-design-system__content h2 span {
  color: var(--uiux-gold);
}

.uiux-design-system__content > p {
  margin: 18px 0 27px;

  color: var(--uiux-muted);

  font-size: 11px;
  line-height: 2.2;
}

.uiux-system-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.uiux-system-items > div {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 11px 13px;

  border-radius: 12px;

  background: var(--uiux-surface);

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(70, 87, 82, 0.18);

  color: var(--uiux-muted);

  font-size: 8px;
  font-weight: 700;
}

.uiux-system-items i {
  color: var(--uiux-green);
  font-size: 17px;
}

/* design board */

.uiux-design-board {
  position: relative;

  overflow: hidden;

  min-height: 370px;

  border-radius: 20px;

  background: #e7ebe7;

  box-shadow:
    -12px -12px 24px rgba(255, 255, 255, 0.96),
    14px 14px 28px rgba(70, 87, 82, 0.25);

  direction: ltr;
}

.uiux-board__top {
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 17px;

  background: #edf0ed;

  border-bottom: 1px solid rgba(80, 95, 90, 0.08);

  color: var(--uiux-muted);

  font-size: 8px;
  font-weight: 800;
}

.uiux-board__top > div {
  display: flex;
  gap: 5px;
}

.uiux-board__top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #bbc3be;
}

.uiux-board__body {
  display: grid;
  grid-template-columns: 75px 1fr;

  height: 328px;
}

.uiux-board__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 20px 15px;

  background: #e1e6e2;
}

.uiux-board__sidebar span {
  height: 7px;

  border-radius: 5px;

  background: #c9d0cb;
}

.uiux-board__sidebar span:first-child {
  width: 70%;
  background: var(--uiux-green);
}

.uiux-board__main {
  padding: 20px;
}

.uiux-board__colors {
  display: flex;
  gap: 10px;

  margin-bottom: 20px;
}

.uiux-board__colors span {
  width: 48px;
  height: 48px;

  border-radius: 10px;

  box-shadow: 3px 3px 7px rgba(70, 87, 82, 0.15);
}

.uiux-board__colors span:nth-child(1) {
  background: var(--uiux-green);
}

.uiux-board__colors span:nth-child(2) {
  background: var(--uiux-gold);
}

.uiux-board__colors span:nth-child(3) {
  background: #d7ddd9;
}

.uiux-board__colors span:nth-child(4) {
  background: #ffffff;
}

.uiux-board__typography {
  display: flex;
  align-items: center;
  gap: 20px;

  padding: 15px;

  border-radius: 12px;

  background: #f1f3f1;
}

.uiux-board__typography strong {
  color: var(--uiux-green);
  font-size: 35px;
}

.uiux-board__typography > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 60%;
}

.uiux-board__typography span {
  height: 6px;
  border-radius: 5px;
  background: #cdd4cf;
}

.uiux-board__typography span:nth-child(2) {
  width: 75%;
}

.uiux-board__typography span:nth-child(3) {
  width: 50%;
}

.uiux-board__buttons {
  display: flex;
  gap: 10px;

  margin-top: 18px;
}

.uiux-board__buttons button {
  height: 32px;

  padding: 0 18px;

  border: none;
  border-radius: 9px;

  font-size: 8px;
  font-weight: 700;
}

.uiux-board__buttons button:first-child {
  color: white;
  background: var(--uiux-green);
}

.uiux-board__buttons button:last-child {
  color: var(--uiux-green);
  background: #eef0ed;

  box-shadow:
    -3px -3px 6px rgba(255, 255, 255, 0.9),
    3px 3px 6px rgba(70, 87, 82, 0.15);
}

.uiux-board__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  margin-top: 18px;
}

.uiux-board__cards div {
  height: 55px;

  border-radius: 9px;

  background: #f1f3f1;

  box-shadow: 3px 3px 7px rgba(70, 87, 82, 0.1);
}

/* =========================================================
   06 — BEFORE / AFTER
========================================================= */

.uiux-before-after {
  padding: 75px 0;
  background: #f4f5f2;
}

.uiux-before-after__intro {
  max-width: 600px;

  margin: -18px auto 30px;

  color: var(--uiux-muted);

  text-align: center;

  font-size: 10px;
  line-height: 2;
}

.uiux-comparison {
  --comparison-position: 50%;

  position: relative;

  width: 100%;
  aspect-ratio: 16 / 8;

  overflow: hidden;

  border-radius: 22px;

  background: #e2e7e3;

  cursor: ew-resize;

  touch-action: none;

  box-shadow:
    -12px -12px 24px rgba(255, 255, 255, 0.95),
    14px 14px 28px rgba(70, 87, 82, 0.25);
}

.uiux-comparison__layer {
  position: absolute;
  inset: 0;
}

.uiux-comparison__layer--after {
  z-index: 1;
}

.uiux-comparison__layer--before {
  z-index: 2;

  clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0);
}

.uiux-comparison__mockup {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 20px;
}

.uiux-comparison__mockup--before {
  background: linear-gradient(135deg, #d8ddda, #ecefec);
}

.uiux-comparison__mockup--after {
  background: linear-gradient(135deg, #dfe8e3, #edf2ee);
}

.uiux-comparison__mockup > span {
  position: absolute;

  top: 20px;

  padding: 6px 12px;

  border-radius: 8px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.uiux-comparison__mockup--before > span {
  right: 25px;

  color: #737c7a;
  background: rgba(255, 255, 255, 0.6);
}

.uiux-comparison__mockup--after > span {
  left: 25px;

  color: white;
  background: var(--uiux-green);
}

.uiux-comparison__screen {
  width: 55%;
  height: 65%;

  padding: 15px;

  border-radius: 15px;

  background: #f7f8f7;

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.9),
    9px 9px 18px rgba(70, 87, 82, 0.22);
}

.uiux-comparison__screen > div {
  height: 25px;

  margin-bottom: 10px;

  border-radius: 6px;

  background: #d9dfdb;
}

.uiux-comparison__screen > div:first-child {
  background: var(--uiux-green);
}

.uiux-comparison__screen > div:nth-child(2) {
  height: 70px;
}

.uiux-comparison__screen > div:nth-child(3),
.uiux-comparison__screen > div:nth-child(4) {
  display: inline-block;

  width: calc(50% - 6px);
  height: 60px;

  margin-left: 7px;
}

.uiux-comparison__mockup--after .uiux-comparison__screen > div:nth-child(2) {
  background: var(--uiux-gold);
}

.uiux-comparison__divider {
  position: absolute;

  top: 0;
  bottom: 0;
  left: var(--comparison-position);

  width: 2px;

  background: white;

  transform: translateX(-50%);

  z-index: 10;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

  pointer-events: none;
}

.uiux-comparison__handle {
  position: absolute;

  top: 50%;
  left: var(--comparison-position);

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  color: white;
  background: var(--uiux-green);

  transform: translate(-50%, -50%);

  cursor: ew-resize;

  z-index: 20;

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.7),
    6px 6px 12px rgba(20, 60, 55, 0.35);
}

.uiux-comparison__handle i {
  font-size: 18px;
}

/* =========================================================
   07 — PRINCIPLES
========================================================= */

.uiux-principles {
  padding: 75px 0;

  background: var(--uiux-bg);
}

.uiux-principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.uiux-principle {
  position: relative;

  min-height: 185px;

  padding: 22px 17px;

  box-sizing: border-box;

  border-radius: 17px;

  text-align: center;

  background: var(--uiux-surface);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    8px 8px 16px rgba(70, 87, 82, 0.2);

  transition: transform 0.25s ease;
}

.uiux-principle:hover {
  transform: translateY(-5px);
}

.uiux-principle > span {
  position: absolute;

  top: 12px;
  left: 14px;

  color: rgba(201, 162, 74, 0.6);

  font-size: 9px;
  font-weight: 800;
}

.uiux-principle i {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 15px;

  border-radius: 14px;

  color: var(--uiux-green);

  background: var(--uiux-surface);

  box-shadow:
    inset 2px 2px 4px rgba(70, 87, 82, 0.08),
    inset -3px -3px 5px rgba(255, 255, 255, 0.9);

  font-size: 21px;
}

.uiux-principle h3 {
  margin: 0 0 8px;

  color: var(--uiux-text);

  font-size: 12px;
  font-weight: 800;
}

.uiux-principle p {
  margin: 0;

  color: var(--uiux-muted);

  font-size: 8px;
  line-height: 1.9;
}

/* =========================================================
   08 — PORTFOLIO
========================================================= */

.uiux-portfolio {
  padding: 75px 0;

  background: #f4f5f2;
}

.uiux-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.uiux-project-card {
  overflow: hidden;

  border-radius: 18px;

  background: var(--uiux-surface);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    9px 9px 18px rgba(70, 87, 82, 0.2);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.uiux-project-card:hover {
  transform: translateY(-5px);
}

.uiux-project-card__image {
  position: relative;

  height: 230px;

  overflow: hidden;

  background: #dfe5e1;
}

.uiux-project-card__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease;
}

.uiux-project-card:hover .uiux-project-card__image img {
  transform: scale(1.04);
}

.uiux-project-card__image > span {
  position: absolute;

  top: 13px;
  left: 13px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color: white;
  background: var(--uiux-green);

  font-size: 9px;
  font-weight: 800;
}

.uiux-project-card__content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  direction: rtl;
}

.uiux-project-card__content span {
  color: var(--uiux-gold);

  font-size: 8px;
  font-weight: 800;
}

.uiux-project-card__content h3 {
  margin: 4px 0 0;

  color: var(--uiux-text);

  font-size: 12px;
  font-weight: 800;
}

.uiux-project-card__content > a {
  width: 37px;
  height: 37px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: var(--uiux-green);

  text-decoration: none;

  background: var(--uiux-surface);

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    6px 6px 11px rgba(70, 87, 82, 0.2);

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.uiux-project-card__content > a:hover {
  color: var(--uiux-gold);
  transform: translateY(-2px);
}

.uiux-portfolio__more {
  display: flex;
  justify-content: center;

  margin-top: 35px;
}

/* =========================================================
   MAIN BUTTON
========================================================= */

.uiux-main-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 190px;
  height: 50px;

  padding: 0 22px;

  box-sizing: border-box;

  border: none;
  border-radius: 15px;

  text-decoration: none;

  font-family: "Vazirmatn", sans-serif;

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.uiux-main-button::before {
  content: "";

  position: absolute;
  inset: 2px;

  border-radius: 13px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.18),
    inset -2px -2px 4px rgba(0, 40, 35, 0.12);
}

.uiux-main-button span,
.uiux-main-button i {
  position: relative;
  z-index: 2;
}

.uiux-main-button i {
  font-size: 16px;

  transition: transform 0.2s ease;
}

.uiux-main-button--green {
  color: white;
  background: var(--uiux-green);

  box-shadow:
    0px 0px 10px rgba(255, 255, 255, 0.72),
    8px 8px 16px rgba(4, 55, 49, 0.42);
}

.uiux-main-button--green:hover {
  transform: translateY(-3px);
  color: #c9a24a;
  box-shadow:
    -1px -1px 18px rgba(255, 255, 255, 0.78),
    10px 10px 19px rgba(4, 55, 49, 0.48);
}

.uiux-main-button--green:hover i {
  transform: translateX(-4px);
}

.uiux-main-button--green:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(3, 48, 43, 0.45),
    inset -5px -5px 10px rgba(79, 142, 134, 0.3);
}

.uiux-main-button--light {
  color: var(--uiux-green);
  background: var(--uiux-surface);

  box-shadow:
    0px 0px 14px rgba(255, 255, 255, 0.98),
    8px 8px 16px rgba(65, 82, 77, 0.27);
}

.uiux-main-button--light:hover {
  color: var(--uiux-gold);

  transform: translateY(-3px);

  box-shadow:
    -1px -1px 18px rgba(255, 255, 255, 1),
    10px 10px 19px rgba(65, 82, 77, 0.32);
}

.uiux-main-button--light:hover i {
  transform: translateX(-4px);
}

/* =========================================================
   09 — WHY ZHIURA
========================================================= */

.uiux-why {
  padding: 80px 0;

  background: var(--uiux-bg);
}

.uiux-why__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 70px;
}

.uiux-why__content h2 {
  margin: 0;

  color: var(--uiux-text);

  font-size: 34px;
  line-height: 1.6;
  font-weight: 800;
}

.uiux-why__content h2 span {
  color: var(--uiux-gold);
}

.uiux-why__content > p {
  max-width: 450px;

  margin: 18px 0 0;

  color: var(--uiux-muted);

  font-size: 11px;
  line-height: 2.2;
}

.uiux-why__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.uiux-why-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;

  padding: 17px;

  border-radius: 15px;

  background: var(--uiux-surface);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(70, 87, 82, 0.18);
}

.uiux-why-item__icon {
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: var(--uiux-green);

  background: var(--uiux-surface);

  box-shadow:
    inset 2px 2px 4px rgba(70, 87, 82, 0.08),
    inset -3px -3px 5px rgba(255, 255, 255, 0.9);
}

.uiux-why-item__icon i {
  font-size: 18px;
}

.uiux-why-item h3 {
  margin: 0 0 5px;

  color: var(--uiux-text);

  font-size: 11px;
  font-weight: 800;
}

.uiux-why-item p {
  margin: 0;

  color: var(--uiux-muted);

  font-size: 8px;
  line-height: 1.9;
}

/* =========================================================
   10 — FINAL CTA
========================================================= */

.uiux-final-cta {
  position: relative;

  min-height: 390px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 25px 25px 0 0;

  text-align: center;
}

.uiux-final-cta__background {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(90deg, rgba(5, 65, 58, 0.94), rgba(15, 91, 84, 0.86)),
    var(--service-final-image, url("/assets/images/services/uiux-cta.webp"));

  background-size: cover;
  background-position: center;

  transform: scale(1.02);

  z-index: 0;
}

.uiux-final-cta__content {
  position: relative;
  z-index: 2;

  width: min(700px, 90%);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.uiux-section-label--light {
  color: var(--uiux-gold);
}

.uiux-section-label--light .uiux-section-label__line {
  background: var(--uiux-gold);
}

.uiux-final-cta__content h2 {
  margin: 0;

  color: white;

  font-size: 34px;
  line-height: 1.7;
  font-weight: 800;
}

.uiux-final-cta__content h2 span {
  color: var(--uiux-gold);
}

.uiux-final-cta__content > p {
  max-width: 550px;

  margin: 13px auto 27px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 11px;
  line-height: 2.1;
}

.uiux-final-cta__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}
/* =========================================================
   UIUX — SHARED SECTION HEADINGS
========================================================= */

.uiux-section-heading {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  margin: 0 0 42px;

  direction: rtl;
  text-align: center;
}

.uiux-section-heading > div:not(.uiux-heading-line) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.uiux-section-heading > div:not(.uiux-heading-line) > span {
  display: block;

  margin: 0 0 6px;

  color: #c9a24a;

  font-family: "Inter", sans-serif;

  font-size: 9px;
  line-height: 1.4;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.uiux-section-heading h2 {
  margin: 0;

  color: #0f4c45;

  font-family: "Vazirmatn", sans-serif;

  font-size: 23px;
  line-height: 1.6;

  font-weight: 800;

  text-align: center;
}
/* =========================================================
   UIUX — HEADING LINES
========================================================= */

.uiux-heading-line {
  position: relative;

  flex: 0 0 62px;

  width: 62px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 162, 74, 0.25) 20%,
    rgba(201, 162, 74, 0.85) 100%
  );
}

.uiux-heading-line--reverse {
  background: linear-gradient(
    90deg,
    rgba(201, 162, 74, 0.85) 0%,
    rgba(201, 162, 74, 0.25) 80%,
    transparent 100%
  );
}

/* نقطه ظریف انتهای خط */

.uiux-heading-line::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 0;

  width: 4px;
  height: 4px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: #c9a24a;

  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.08);
}

.uiux-heading-line--reverse::after {
  right: auto;
  left: 0;
}
/* //////////////////////////////////////////صفحه طراحی و توسعه////////////////////////////// */
/* =========================================
   DEVELOPMENT PAGE
========================================= */

.development-page {
  --dev-green: #0f5b54;
  --dev-green-dark: #073f3a;
  --dev-gold: #c9a24a;
  --dev-bg: #eef1ee;
  --dev-card: #eef0ed;
  --dev-text: #243334;
  --dev-muted: #788586;

  direction: rtl;
  font-family: "Vazirmatn", sans-serif;
  color: var(--dev-text);
  background: var(--dev-bg);
}

.development-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* =========================================
   HERO
========================================= */

.development-hero {
  position: relative;
  width: 100%;
  height: 570px;
  overflow: hidden;
  background: #073f3a;
}

.development-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 63, 58, 0.12),
      rgba(7, 63, 58, 0.02) 55%,
      rgba(7, 63, 58, 0.15)
    ),
    var(--service-extra-image, url("/assets/images/development/development-hero.webp"));

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.development-hero__content {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;

  padding: 70px 9%;
  box-sizing: border-box;
}

.development-hero__text {
  width: 510px;
  max-width: 510px;

  text-align: right;
  margin-right: auto;
}

.development-hero__eyebrow {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 18px;

  color: var(--dev-gold);

  font-size: 14px;
  font-weight: 700;
}

.development-hero__eyebrow::after {
  content: "";

  width: 42px;
  height: 1px;

  background: var(--dev-gold);
}

.development-hero__text h1 {
  margin: 0;

  color: #fff;

  font-size: 45px;
  line-height: 1.55;
  font-weight: 800;

  letter-spacing: -1.5px;
}

.development-hero__text h1 span {
  color: var(--dev-gold);
}

.development-hero__text p {
  width: 470px;
  max-width: 100%;

  margin: 18px 0 30px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 15px;
  line-height: 2.1;
}

/* HERO BUTTONS */

.development-hero__buttons {
  display: flex;
  align-items: center;

  gap: 14px;

  direction: rtl;
}

.development-btn {
  position: relative;

  width: 175px;
  height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border-radius: 16px;

  text-decoration: none;

  font-family: inherit;
  font-size: 12px;
  font-weight: 800;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.development-btn span,
.development-btn i {
  position: relative;
  z-index: 2;
}

.development-btn i {
  font-size: 17px;
  transition: transform 0.2s ease;
}

/* PRIMARY */

.development-btn--primary {
  color: #fff;
  background: var(--dev-green);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.15),
    8px 8px 17px rgba(0, 0, 0, 0.32);
}

.development-btn--primary::before {
  content: "";

  position: absolute;
  inset: 2px;

  border-radius: 14px;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.14),
    inset -2px -2px 4px rgba(0, 0, 0, 0.16);
}

.development-btn--primary:hover {
  transform: translateY(-3px);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.18),
    10px 10px 20px rgba(0, 0, 0, 0.36);
}

.development-btn--primary:hover i {
  transform: translateX(-3px);
}

.development-btn--primary:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(0, 0, 0, 0.32),
    inset -5px -5px 10px rgba(255, 255, 255, 0.08);
}

/* SECONDARY */

.development-btn--secondary {
  color: #fff;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(8px);

  box-shadow:
    -6px -6px 13px rgba(255, 255, 255, 0.08),
    7px 7px 15px rgba(0, 0, 0, 0.22);
}

.development-btn--secondary:hover {
  color: var(--dev-gold);

  transform: translateY(-3px);
}

.development-btn--secondary:hover i {
  transform: translateX(-3px);
}

/* =========================================
   INTRO
========================================= */

.development-intro {
  padding: 90px 0;
  background: var(--dev-bg);
}

.development-intro__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap: 70px;

  align-items: center;
}

.development-intro__text {
  text-align: right;
}

.development-label {
  color: var(--dev-gold);

  font-size: 12px;
  font-weight: 800;
}

.development-intro h2 {
  margin: 12px 0 20px;

  color: var(--dev-green);

  font-size: 30px;
  line-height: 1.7;
  font-weight: 800;
}

.development-intro h2 strong {
  color: var(--dev-gold);
}

.development-intro p {
  margin: 0 0 14px;

  color: var(--dev-muted);

  font-size: 13px;
  line-height: 2.15;
}

/* INTRO VISUAL */

.development-intro__visual {
  display: flex;
  justify-content: center;
}

.development-visual-card {
  width: 390px;
  height: 270px;

  border-radius: 25px;

  background: #e9ece9;

  box-shadow:
    -15px -15px 28px rgba(255, 255, 255, 0.95),
    15px 15px 28px rgba(84, 99, 94, 0.2);

  padding: 15px;

  box-sizing: border-box;
}

.development-visual-card__top {
  height: 28px;

  display: flex;
  align-items: center;

  gap: 6px;

  direction: ltr;
}

.development-visual-card__top span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--dev-gold);
}

.development-visual-card__body {
  height: calc(100% - 28px);

  padding: 22px;

  box-sizing: border-box;

  border-radius: 17px;

  background: #e9ece9;

  box-shadow:
    inset 6px 6px 12px rgba(91, 106, 101, 0.12),
    inset -6px -6px 12px rgba(255, 255, 255, 0.9);
}

.development-code-line {
  width: 75%;
  height: 7px;

  margin-bottom: 9px;

  border-radius: 10px;

  background: var(--dev-green);
  opacity: 0.55;
}

.development-code-line.short {
  width: 45%;
}

.development-code-line.medium {
  width: 60%;
}

.development-ui-box {
  margin-top: 24px;

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

  gap: 10px;
}

.development-ui-box div {
  height: 70px;

  border-radius: 12px;

  background: #e9ece9;

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    5px 5px 10px rgba(83, 99, 94, 0.16);
}

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

.development-section-heading {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-bottom: 45px;
}

.development-section-heading > span {
  width: 55px;
  height: 1px;

  background: linear-gradient(90deg, transparent, var(--dev-gold));
}

.development-section-heading > span:last-child {
  background: linear-gradient(90deg, var(--dev-gold), transparent);
}

.development-section-heading > div {
  text-align: center;
}

.development-section-heading small {
  display: block;

  margin-bottom: 5px;

  color: var(--dev-gold);

  font-size: 10px;
  font-weight: 700;
}

.development-section-heading h2 {
  margin: 0;

  color: var(--dev-green);

  font-size: 24px;
  font-weight: 800;
}

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

.development-services {
  padding: 80px 0;

  background: #f4f5f3;
}

.development-services__grid {
  display: grid;

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

  gap: 22px;
}

.development-service-card {
  position: relative;

  min-height: 255px;

  padding: 28px;

  box-sizing: border-box;

  text-align: center;

  border-radius: 20px;

  background: var(--dev-card);

  box-shadow:
    -10px -10px 20px rgba(255, 255, 255, 0.95),
    10px 10px 20px rgba(79, 96, 91, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.development-service-card:hover {
  transform: translateY(-6px);

  box-shadow:
    -12px -12px 23px rgba(255, 255, 255, 1),
    13px 13px 25px rgba(79, 96, 91, 0.22);
}

.development-service-card__icon {
  width: 58px;
  height: 58px;

  margin: 0 auto 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 17px;

  color: var(--dev-green);

  background: var(--dev-card);

  box-shadow:
    -6px -6px 12px rgba(255, 255, 255, 0.95),
    6px 6px 12px rgba(76, 94, 88, 0.2);
}

.development-service-card__icon i {
  font-size: 26px;
}

.development-service-card h3 {
  margin: 0 0 12px;

  color: var(--dev-text);

  font-size: 15px;
  font-weight: 800;
}

.development-service-card p {
  margin: 0 auto;

  max-width: 240px;

  color: var(--dev-muted);

  font-size: 10px;
  line-height: 2;
}

/* =========================================
   DEVELOPMENT SERVICE CARD BUTTON
   FULL RAISED NEUMORPHIC
========================================= */

.development-service-card > a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 22px;

  min-width: 145px;
  height: 42px;

  padding: 0 17px;

  box-sizing: border-box;

  border: none;
  border-radius: 13px;

  background: var(--dev-green);

  color: #ffffff;

  text-decoration: none;

  font-family: "Vazirmatn", sans-serif;
  font-size: 9px;
  font-weight: 800;

  /* سایه اصلی برای برجسته شدن */
  box-shadow:
    -7px -7px 13px rgba(255, 255, 255, 0.95),
    9px 9px 17px rgba(54, 73, 68, 0.34);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;

  cursor: pointer;
}

/* =========================================
   لایه داخلی برای ایجاد حجم واقعی
========================================= */

.development-service-card > a::before {
  content: "";

  position: absolute;

  inset: 2px;

  border-radius: 11px;

  pointer-events: none;

  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -3px -3px 6px rgba(0, 45, 40, 0.22);
}

/* =========================================
   متن و آیکون روی لایه بالا
========================================= */

.development-service-card > a span,
.development-service-card > a i {
  position: relative;
  z-index: 2;
}

.development-service-card > a i {
  font-size: 14px;

  line-height: 1;

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

/* =========================================
   HOVER
========================================= */

.development-service-card > a:hover {
  color: var(--dev-gold);

  background: #11655d;

  transform: translateY(-4px);

  box-shadow:
    -9px -9px 17px rgba(255, 255, 255, 1),
    12px 12px 22px rgba(54, 73, 68, 0.4);
}

.development-service-card > a:hover i {
  color: var(--dev-gold);

  transform: translateX(-4px);
}

/* =========================================
   ACTIVE / PRESS
========================================= */

.development-service-card > a:active {
  transform: translateY(1px);

  box-shadow:
    inset 5px 5px 10px rgba(0, 40, 35, 0.38),
    inset -5px -5px 10px rgba(88, 150, 141, 0.3);
}

/* =========================================
   FOCUS
========================================= */

.development-service-card > a:focus-visible {
  outline: 2px solid var(--dev-gold);

  outline-offset: 4px;
}

/* =========================================
   PROCESS
========================================= */

.development-process {
  padding: 85px 0;

  background: var(--dev-bg);
}

.development-process__grid {
  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 12px;
}

.development-process__item {
  position: relative;

  min-height: 180px;

  padding: 20px 10px;

  box-sizing: border-box;

  text-align: center;

  border-radius: 18px;

  background: var(--dev-card);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(75, 92, 87, 0.16);
}

.development-process__number {
  margin-bottom: 16px;

  color: var(--dev-gold);

  font-family: "Inter", sans-serif;

  font-size: 11px;
  font-weight: 800;
}

.development-process__item > i {
  width: 43px;
  height: 43px;

  margin: 0 auto 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  color: var(--dev-green);

  box-shadow:
    -4px -4px 8px rgba(255, 255, 255, 0.95),
    4px 4px 8px rgba(75, 92, 87, 0.18);
}

.development-process__item h3 {
  margin: 0 0 7px;

  font-size: 11px;
  font-weight: 800;
}

.development-process__item p {
  margin: 0;

  color: var(--dev-muted);

  font-size: 8px;
  line-height: 1.8;
}

/* =========================================
   TECHNOLOGY
========================================= */

.development-tech {
  padding: 80px 0;

  background: #f4f5f3;
}

.development-tech__grid {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 18px;
}

.development-tech__item {
  height: 125px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 13px;

  border-radius: 18px;

  background: var(--dev-card);

  color: var(--dev-green);

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.95),
    7px 7px 14px rgba(76, 94, 88, 0.17);

  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.development-tech__item:hover {
  transform: translateY(-4px);

  color: var(--dev-gold);
}

.development-tech__item i {
  font-size: 28px;
}

.development-tech__item span {
  font-family: "Inter", sans-serif;

  font-size: 10px;
  font-weight: 700;
}

/* =========================================
   BENEFITS
========================================= */

.development-benefits {
  padding: 85px 0;

  background: var(--dev-bg);
}

.development-benefits__grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.development-benefits__grid article {
  padding: 28px 20px;

  text-align: center;

  border-radius: 20px;

  background: var(--dev-card);

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    8px 8px 16px rgba(77, 94, 89, 0.17);
}

.development-benefits__grid i {
  width: 54px;
  height: 54px;

  margin: 0 auto 17px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  color: var(--dev-green);

  box-shadow:
    -5px -5px 10px rgba(255, 255, 255, 0.95),
    5px 5px 10px rgba(75, 92, 87, 0.17);

  font-size: 24px;
}

.development-benefits__grid h3 {
  margin: 0 0 9px;

  font-size: 13px;
  font-weight: 800;
}

.development-benefits__grid p {
  margin: 0;

  color: var(--dev-muted);

  font-size: 9px;
  line-height: 2;
}

/* =========================================
   PORTFOLIO
========================================= */

.development-portfolio {
  padding: 85px 0;

  background: #f4f5f3;
}

.development-portfolio__grid {
  display: grid;

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

  gap: 22px;
}

.development-project {
  display: block;

  overflow: hidden;

  border-radius: 20px;

  background: var(--dev-card);

  text-decoration: none;

  box-shadow:
    -8px -8px 16px rgba(255, 255, 255, 0.95),
    8px 8px 16px rgba(77, 94, 89, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.development-project:hover {
  transform: translateY(-5px);
}

.development-project__image {
  height: 220px;

  overflow: hidden;
}

.development-project__image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.4s ease;
}

.development-project:hover img {
  transform: scale(1.04);
}

.development-project__content {
  position: relative;

  padding: 18px 20px 20px;

  text-align: right;
}

.development-project__content span {
  color: var(--dev-gold);

  font-size: 9px;
  font-weight: 700;
}

.development-project__content h3 {
  margin: 7px 0 0;

  color: var(--dev-text);

  font-size: 13px;
  font-weight: 800;
}

.development-project__content i {
  position: absolute;

  left: 20px;
  bottom: 20px;

  color: var(--dev-green);

  font-size: 18px;

  transition: transform 0.2s ease;
}

.development-project:hover i {
  transform: translateX(-4px);
}

/* =========================================
   CTA
========================================= */

.development-cta {
  padding: 90px 24px;

  background: linear-gradient(135deg, #07443e, #0f5b54);

  text-align: center;
}

.development-cta__inner {
  max-width: 720px;

  margin: 0 auto;
}

.development-cta__eyebrow {
  color: var(--dev-gold);

  font-size: 12px;
  font-weight: 700;
}

.development-cta h2 {
  margin: 13px 0;

  color: #fff;

  font-size: 36px;
  line-height: 1.6;
  font-weight: 800;
}

.development-cta h2 span {
  color: var(--dev-gold);
}

.development-cta p {
  margin: 0 auto 28px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 12px;
}

.development-cta__button {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 190px;
  height: 52px;

  padding: 0 22px;

  box-sizing: border-box;

  border-radius: 16px;

  color: var(--dev-green);

  background: #eef0ed;

  text-decoration: none;

  font-size: 11px;
  font-weight: 800;

  box-shadow:
    -7px -7px 14px rgba(255, 255, 255, 0.18),
    8px 8px 17px rgba(0, 0, 0, 0.3);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.development-cta__button:hover {
  color: var(--dev-gold);

  transform: translateY(-3px);

  box-shadow:
    -9px -9px 17px rgba(255, 255, 255, 0.2),
    10px 10px 20px rgba(0, 0, 0, 0.34);
}

.development-cta__button i {
  font-size: 16px;

  transition: transform 0.2s ease;
}

.development-cta__button:hover i {
  transform: translateX(-4px);
}