@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap");

    :root {
      --ink: #101936;
      --navy: #272D6C;
      --blue: #272D6C;
      --muted: #7f8aa3;
      --line: rgba(37, 43, 115, .11);
      --surface: rgba(255, 255, 255, .62);
      --glass-border: rgba(255, 255, 255, .72);
    }

    * {
      box-sizing: border-box;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow-x: hidden;
      overscroll-behavior-x: none;
      background:
        radial-gradient(circle at 15% -8%, rgba(39, 45, 108, .12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
      color: var(--navy);
      font-family: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
      font-feature-settings: "ss01";
      text-rendering: optimizeLegibility;
    }

    body {
      overflow-x: hidden;
    }

    @supports (overflow: clip) {
      html,
      body {
        overflow-x: clip;
      }
    }

    .site-header {
      position: relative;
      z-index: 10000;
      width: 100%;
      min-height: 64px;
      padding: 7px clamp(18px, 4vw, 76px);
      background: transparent;
    }

    .header-inner {
      width: 100%;
      min-height: 50px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 220px minmax(430px, 1fr) 220px;
      align-items: center;
      gap: 10px;
      padding: 5px clamp(14px, 1.7vw, 24px);
      direction: ltr;
      border: 1px solid var(--glass-border);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .22)),
        rgba(255, 255, 255, .16);
      box-shadow:
        0 18px 48px rgba(7, 26, 69, .08),
        inset 0 1px 0 rgba(255, 255, 255, .62);
      backdrop-filter: blur(32px) saturate(1.55);
      -webkit-backdrop-filter: blur(32px) saturate(1.55);
    }

    .brand-panel {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      direction: ltr;
    }

    .brand-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 156px;
      padding: 2px 6px;
      border-radius: 18px;
      text-decoration: none;
      transition: transform .24s ease, background .24s ease;
      will-change: transform;
    }

    .brand-link:hover {
      background: rgba(37, 43, 115, .035);
    }

    .brand-logo {
      display: block;
      width: 136px;
      height: auto;
      object-fit: contain;
      filter: saturate(1.04) contrast(1.03);
    }

    .mobile-logo,
    .mobile-menu-toggle,
    .mobile-menu-close {
      display: none;
    }

    .nav-area {
      display: flex;
      justify-content: center;
      direction: rtl;
      text-align: center;
    }

    .main-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 36px;
      margin: 0;
      padding: 3px 10px;
      list-style: none;
      white-space: nowrap;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      box-shadow: 0 12px 34px rgba(7, 26, 69, .045);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .main-nav li {
      position: relative;
    }

    .main-nav a {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 98px;
      min-height: 30px;
      padding: 0 18px;
      border-radius: 999px;
      color: #272D6C;
      text-decoration: none;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
      transition: color .22s ease, background .22s ease, box-shadow .22s ease;
      will-change: transform;
    }

    .main-nav a:visited,
    .main-nav a:hover,
    .main-nav a.active {
      color: #272D6C;
      background: transparent;
    }

    .has-dropdown {
      position: relative;
    }

    .header-dropdown {
      position: absolute;
      top: calc(100% + 13px);
      right: 50%;
      z-index: 10001;
      width: 250px;
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 10px;
      list-style: none;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .46)),
        rgba(255, 255, 255, .52);
      box-shadow: 0 22px 54px rgba(7, 26, 69, .14);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(50%, 8px) scale(.98);
      transform-origin: top center;
      transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
      backdrop-filter: blur(24px) saturate(1.35);
      -webkit-backdrop-filter: blur(24px) saturate(1.35);
    }

    .header-dropdown::before {
      content: "";
      position: absolute;
      inset: -14px 0 auto;
      height: 14px;
    }

    .has-dropdown:hover .header-dropdown,
    .has-dropdown:focus-within .header-dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(50%, 0) scale(1);
      transition: opacity .22s ease, transform .22s ease, visibility 0s;
    }

    .main-nav .header-dropdown a {
      width: 100%;
      min-width: 0;
      min-height: 38px;
      justify-content: flex-start;
      padding: 0 12px;
      color: #272D6C;
      font-size: 14px;
      font-weight: 800;
      background: rgba(255, 255, 255, .28);
    }

    .main-nav .header-dropdown a:hover {
      color: #ffffff;
      background: #2A306A;
      box-shadow: 0 12px 24px rgba(39, 45, 108, .18);
    }

    .contact-panel {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "email"
        "social"
        "copy";
      align-items: center;
      justify-content: center;
      justify-items: center;
      width: 100%;
      max-width: 155px;
      margin: 0 auto;
      padding-inline: 8px;
      column-gap: 0;
      row-gap: 2px;
      direction: ltr;
      text-align: center;
    }

    .email {
      grid-area: email;
      justify-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: var(--navy);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      padding: 0;
      will-change: transform;
    }

    .email svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
    }

    .social-row {
      display: flex;
      grid-area: social;
      align-items: center;
      justify-content: space-between;
      gap: 0;
      width: 155px;
      direction: ltr;
    }

    .social-icon {
      position: relative;
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--navy);
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .64);
      overflow: hidden;
      cursor: pointer;
      transition: color .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
      will-change: transform;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .social-icon::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 20%, rgba(39, 45, 108, .16), transparent 58%);
      opacity: 0;
      transition: opacity .22s ease;
    }

    .social-icon:hover {
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 10px 22px rgba(37, 43, 115, .09);
    }

    .social-icon:hover::before {
      opacity: 1;
    }

    .social-icon.whatsapp:hover::before,
    .social-icon.telegram:hover::before,
    .social-icon.instagram:hover::before {
      opacity: 0;
    }

    .social-icon.whatsapp:hover {
      background: #25d366;
      box-shadow: 0 12px 26px rgba(37, 211, 102, .22);
    }

    .social-icon.telegram:hover {
      background: #229ed9;
      box-shadow: 0 12px 26px rgba(34, 158, 217, .22);
    }

    .social-icon.instagram:hover {
      background:
        radial-gradient(circle at 30% 105%, #fdf497 0 9%, #fd5949 38%, #d6249f 62%, #285aeb 100%);
      box-shadow: 0 12px 26px rgba(214, 36, 159, .2);
    }

    .social-icon svg {
      position: relative;
      z-index: 1;
      width: 20px;
      height: 20px;
      display: block;
      fill: currentColor;
    }

    .contact-copy {
      display: flex;
      grid-area: copy;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 155px;
    }

    .contact-label {
      display: block;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
      width: 155px;
      text-align: center;
      letter-spacing: 3px;
      word-spacing: 10px;
    }

    .contact-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 26px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 800;
      text-decoration: none;
      border: 1px solid rgba(39, 45, 108, .35);
      border-radius: 999px;
      background: #272D6C;
      box-shadow: 0 10px 22px rgba(39, 45, 108, .18);
      text-align: center;
      word-spacing: 4px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .contact-phone:hover {
      color: #ffffff;
      background: #272D6C;
    }

    @media (max-width: 980px) {
      .site-header {
        min-height: 0;
        padding: 10px;
      }

      .site-header.mobile-menu-open {
        z-index: 20000;
      }

      .header-inner {
        grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
        grid-template-areas:
          "phone logo menu"
          "nav nav nav";
        gap: 10px;
        min-height: 0;
        padding: 8px 10px;
        direction: ltr;
        border-radius: 999px;
      }

      .brand-panel {
        grid-area: logo;
        justify-content: center;
      }

      .brand-link {
        width: 84px;
        padding: 0;
      }

      .desktop-logo {
        display: none;
      }

      .mobile-logo {
        display: block;
        width: 72px;
        height: auto;
      }

      .mobile-menu-toggle {
        grid-area: menu;
        justify-self: end;
        position: relative;
        z-index: 20002;
        transform: translateY(2px);
        width: 42px;
        height: 42px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, .56);
        color: #272D6C;
        cursor: pointer;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .mobile-menu-toggle span {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
      }

      .site-header.mobile-menu-open .mobile-menu-toggle {
        border-color: var(--line);
        background: rgba(255, 255, 255, .56);
        color: #272D6C;
      }

      .nav-area {
        grid-area: nav;
        position: fixed;
        inset: -10px -28px -10px auto;
        z-index: 20001;
        width: calc(min(78vw, 330px) + 28px);
        min-height: 100dvh;
        display: flex;
        align-items: flex-start;
        justify-content: stretch;
        padding: 86px 24px 28px;
        direction: rtl;
        text-align: right;
        background: #2A306A;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(110%);
        transition:
          transform .34s cubic-bezier(.22, 1, .36, 1),
          opacity .2s ease,
          visibility 0s linear .34s;
      }

      .nav-area::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        background: #2A306A;
        pointer-events: none;
      }

      .site-header.mobile-menu-open .nav-area {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: -24px 0 70px rgba(7, 26, 69, .22);
        transform: translateX(0);
        transition:
          transform .34s cubic-bezier(.22, 1, .36, 1),
          opacity .2s ease,
          visibility 0s;
      }

      .main-nav {
        width: 100%;
        max-width: none;
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        justify-items: stretch;
        direction: rtl;
        text-align: right;
        border: 0;
        border-radius: 0;
        white-space: normal;
        gap: 18px;
        padding: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .main-nav li {
        width: 100%;
        direction: rtl;
        text-align: right;
      }

      .mobile-menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        min-height: 48px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #ffffff;
        cursor: pointer;
      }

      .mobile-menu-close svg {
        width: 30px;
        height: 30px;
        stroke: currentColor;
        stroke-width: 2.4;
        fill: none;
      }

      .main-nav a {
        min-width: 0;
        width: 100%;
        min-height: 54px;
        justify-content: flex-start;
        padding: 0;
        direction: rtl;
        color: #ffffff;
        font-size: 24px;
        font-weight: 800;
        text-align: right;
        unicode-bidi: plaintext;
        transform: none !important;
      }

      .main-nav a:visited,
      .main-nav a:hover,
      .main-nav a.active {
        color: #ffffff;
        background: transparent;
      }

      .has-dropdown {
        width: 100%;
        display: grid;
        justify-items: stretch;
        gap: 10px;
        text-align: right;
      }

      .header-dropdown {
        position: static;
        width: 100%;
        display: grid;
        gap: 8px;
        max-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
        transform: none;
        direction: rtl;
        text-align: right;
        transition: max-height .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .has-dropdown:hover .header-dropdown,
      .has-dropdown:focus-within .header-dropdown {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s;
      }

      .header-dropdown li {
        width: 100%;
        direction: rtl;
        text-align: right;
      }

      .has-dropdown.is-open .header-dropdown {
        max-height: 320px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: max-height .34s cubic-bezier(.22, 1, .36, 1), visibility 0s;
      }

      .header-dropdown::before {
        display: none;
      }

      .main-nav .header-dropdown a {
        min-height: 32px;
        justify-content: flex-start;
        padding: 0 18px 0 0;
        direction: rtl;
        color: rgba(255, 255, 255, .78);
        font-size: 16px;
        font-weight: 700;
        text-align: right;
        unicode-bidi: plaintext;
        background: transparent;
        transform: none !important;
      }

      .main-nav .header-dropdown a:hover {
        color: #ffffff;
        background: transparent;
        box-shadow: none;
      }

      .contact-panel {
        grid-area: phone;
        width: 100%;
        max-width: none;
        justify-self: start;
        align-self: center;
        justify-content: start;
        justify-items: start;
        grid-template-columns: 1fr;
        grid-template-areas: "copy";
        row-gap: 0;
        padding-inline: 0;
        text-align: left;
      }

      .email,
      .social-row,
      .contact-label {
        display: none;
      }

      .contact-copy {
        width: auto;
        align-items: flex-start;
        transform: translateY(3px);
      }

      .contact-phone {
        width: auto;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(39, 45, 108, .35);
        border-radius: 999px;
        background: #272D6C;
        box-shadow: 0 10px 22px rgba(39, 45, 108, .18);
        color: #ffffff;
        direction: ltr;
        font-size: 13px;
        font-weight: 800;
        word-spacing: 1px;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .contact-phone:hover {
        color: #ffffff;
        background: #272D6C;
      }
    }

    @media (max-width: 560px) {
      .site-header {
        padding: 8px;
      }

      .site-main {
        padding-right: 8px;
        padding-left: 8px;
      }

      .header-inner {
        grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
        gap: 8px;
        padding: 7px 8px;
        border-radius: 999px;
      }

      .mobile-logo {
        width: 64px;
      }

      .mobile-menu-toggle {
        width: 38px;
        height: 38px;
      }

      .contact-phone {
        font-size: 12px;
        min-height: 32px;
        padding: 0 10px;
      }

      .nav-area {
        width: calc(min(84vw, 300px) + 28px);
        padding: 78px 22px 24px;
      }

      .main-nav a {
        min-height: 50px;
        font-size: 22px;
      }
    }

    .site-main {
      width: 100%;
      padding: 42px clamp(18px, 4vw, 76px) 0;
      direction: rtl;
    }

    .hero-slider {
      position: relative;
      width: 65%;
      aspect-ratio: 16 / 9;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 30px;
      background: #ffffff;
      box-shadow: 0 28px 70px rgba(7, 26, 69, .12);
    }

    .slider-track {
      display: flex;
      width: 100%;
      height: 100%;
      direction: ltr;
      transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    }

    .slider-slide {
      position: relative;
      flex: 0 0 100%;
      min-height: 0;
      height: 100%;
      display: grid;
      place-items: center;
      padding: clamp(28px, 6vw, 76px);
      direction: rtl;
      color: #ffffff;
      overflow: hidden;
    }

    .slider-slide:nth-child(1) {
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .26), transparent 30%),
        linear-gradient(135deg, #272D6C 0%, #2f8dcc 100%);
    }

    .slider-slide:nth-child(2) {
      background:
        radial-gradient(circle at 80% 22%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(135deg, #0d766f 0%, #63b26d 100%);
    }

    .slider-slide:nth-child(3) {
      background:
        radial-gradient(circle at 22% 78%, rgba(255, 255, 255, .24), transparent 30%),
        linear-gradient(135deg, #5b2c83 0%, #d64b7f 100%);
    }

    .slide-placeholder {
      display: grid;
      gap: 10px;
      justify-items: center;
      text-align: center;
    }

    .slide-placeholder span {
      font-size: clamp(58px, 10vw, 132px);
      font-weight: 800;
      line-height: 1;
      opacity: .95;
    }

    .slide-placeholder small {
      font-size: clamp(18px, 2.2vw, 26px);
      font-weight: 800;
      opacity: .78;
    }

    .slider-slide.has-image {
      padding: 0;
      background: #f5f7fb;
    }

    .slider-slide.has-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--slide-image) center / cover no-repeat;
      filter: blur(28px) saturate(1.08);
      opacity: .62;
      transform: scale(1.08);
    }

    .slider-slide.has-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .18), transparent 36%);
    }

    .slide-image {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
    }

    .slide-link {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
    }

    .slide-link .slide-image {
      z-index: auto;
    }

    .slider-button {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, .52);
      border-radius: 999px;
      background: rgba(255, 255, 255, .24);
      color: #ffffff;
      cursor: pointer;
      transform: translateY(-50%);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition: background .22s ease, transform .22s ease;
    }

    .slider-button:hover {
      background: rgba(255, 255, 255, .34);
      transform: translateY(-50%) scale(1.04);
    }

    .slider-button svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      stroke-width: 2.3;
      fill: none;
    }

    .slider-prev {
      right: 18px;
    }

    .slider-next {
      left: 18px;
    }

    .slider-dots {
      position: absolute;
      right: 50%;
      bottom: 18px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 9px;
      transform: translateX(50%);
    }

    .slider-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .52);
      cursor: pointer;
      transition: width .22s ease, background .22s ease;
    }

    .slider-dot.is-active {
      width: 28px;
      background: #ffffff;
    }

    @media (min-width: 821px) {
      .hero-slider {
        width: 75vw;
        margin-inline: auto;
        border-radius: 30px;
      }
    }

    .services-showcase {
      width: min(1180px, 100%);
      margin: 62px auto 0;
      text-align: center;
    }

    @media (min-width: 821px) {
      .services-showcase {
        width: 75vw;
      }
    }

    .services-showcase-title {
      margin: 0 0 32px;
      color: #0d3477;
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 900;
      line-height: 1.35;
    }

    .services-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(18px, 2.4vw, 30px);
    }

    .service-card {
      min-width: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      border: 0;
      border-radius: 8px;
      background: #ffffff;
      box-shadow:
        0 22px 54px rgba(7, 26, 69, .24),
        inset 0 1px 0 rgba(255, 255, 255, .12);
      text-decoration: none;
      transform: translateY(0);
      transition: transform .24s ease, box-shadow .24s ease;
    }

    .service-card:hover {
      box-shadow:
        0 28px 66px rgba(7, 26, 69, .3),
        inset 0 1px 0 rgba(255, 255, 255, .14);
      transform: translateY(-6px);
    }

    .service-card-media {
      position: relative;
      aspect-ratio: 16 / 9;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(13, 52, 119, .08)),
        var(--service-image) center / cover no-repeat;
    }

    .service-card-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(8, 20, 48, .18));
    }

    .service-card-body {
      min-height: 304px;
      padding: 26px 24px 30px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 14px;
      background: #ffffff;
      text-align: center;
    }

    .service-card-title {
      margin: 0;
      color: #0D3477;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.45;
    }

    .service-card-text {
      margin: 0;
      color: #0D3477;
      font-size: 16px;
      font-weight: 500;
      line-height: 2;
    }

    .consultation-banner {
      position: relative;
      width: min(1180px, 100%);
      min-height: 150px;
      margin: 42px auto 0;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(220px, .55fr) minmax(280px, 1fr);
      align-items: center;
      gap: 28px;
      padding: 30px clamp(26px, 5vw, 54px);
      border-radius: 8px;
      background: #A2CBE3;
      direction: ltr;
      box-shadow: 0 22px 52px rgba(7, 26, 69, .18);
    }

    @media (min-width: 821px) {
      .consultation-banner {
        width: 75vw;
      }
    }

    .consultation-content {
      position: relative;
      z-index: 1;
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      direction: rtl;
      text-align: right;
    }

    .consultation-title {
      margin: 0 0 10px;
      color: #2A306A;
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 900;
      line-height: 1.35;
    }

    .consultation-text {
      margin: 0;
      color: #2A306A;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.9;
    }

    .consultation-phone {
      position: relative;
      z-index: 1;
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 16px;
      color: #2A306A;
      font-size: clamp(17px, 1.9vw, 23px);
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      direction: ltr;
      unicode-bidi: plaintext;
      transition: transform .22s ease, color .22s ease;
    }

    .consultation-phone::before {
      content: "";
      position: absolute;
      left: -24px;
      top: 50%;
      z-index: -1;
      width: 92px;
      height: 92px;
      opacity: .18;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232A306A' d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
      transform: translateY(-50%) rotate(-10deg);
      pointer-events: none;
    }

    .consultation-phone:hover {
      color: #2A306A;
      transform: translateY(-2px);
    }

    .featured-projects {
      width: 100vw;
      margin: 54px calc(50% - 50vw) 0;
      padding: 42px clamp(18px, 6vw, 120px) 38px;
      background: #272D6C;
      direction: rtl;
      text-align: center;
    }

    .featured-projects-title {
      margin: 0 0 42px;
      color: #ffffff;
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 900;
      line-height: 1.35;
    }

    .featured-projects-grid {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 36px);
      perspective: 1200px;
    }

    .featured-project-card {
      min-width: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      border-radius: 8px;
      background: #ffffff;
      text-align: center;
      box-shadow: 0 22px 54px rgba(0, 0, 0, .2);
      transform: translateX(0);
      opacity: 1;
      transition: transform .55s ease, opacity .55s ease;
      will-change: transform, opacity;
    }

    .featured-project-card.is-sliding,
    .article-card.is-sliding {
      opacity: 0;
      transform: translateX(42px) rotateY(-7deg);
    }

    .featured-project-card:not(.is-sliding):hover,
    .article-card:not(.is-sliding):hover {
      box-shadow:
        0 28px 66px rgba(7, 26, 69, .3),
        inset 0 1px 0 rgba(255, 255, 255, .14);
      transform: translateY(-6px);
    }

    .featured-project-card-top {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 26px 24px 14px;
      color: #0D3477;
    }

    .featured-project-category {
      color: #949aa4;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.5;
    }

    .featured-project-media {
      aspect-ratio: 4 / 3;
      margin: 10px 14px 0;
      overflow: hidden;
      border-radius: 6px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(13, 52, 119, .08)),
        var(--project-image) center / cover no-repeat;
    }

    .featured-project-body {
      min-height: 304px;
      padding: 26px 24px 30px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 14px;
      text-align: center;
    }

    .featured-project-name {
      margin: 0;
      color: #000000;
      font-size: 20px;
      font-weight: 900;
      line-height: 1.5;
    }

    .featured-project-text {
      margin: 0;
      color: #000000;
      font-size: 14px;
      font-weight: 500;
      line-height: 2;
    }

    .featured-project-link {
      align-self: end;
      justify-self: center;
      margin-top: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 166px;
      min-height: 42px;
      padding: 0 20px;
      border-radius: 5px;
      background: #2A306A;
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      transition: background .22s ease, transform .22s ease;
    }

    .featured-project-link:hover {
      background: #1f2453;
      transform: translateY(-2px);
    }

    .latest-articles {
      width: 100vw;
      margin: 54px calc(50% - 50vw) 0;
      padding: 42px clamp(18px, 6vw, 120px) 64px;
      background: transparent;
      direction: rtl;
      text-align: center;
    }

    .latest-articles-title {
      margin: 0 0 42px;
      color: #0D3477;
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 900;
      line-height: 1.35;
    }

    .latest-articles-grid {
      width: min(1180px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 36px);
      perspective: 1200px;
    }

    .article-card {
      min-width: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      border-radius: 8px;
      background: #ffffff;
      text-align: center;
      box-shadow: 0 22px 54px rgba(7, 26, 69, .24);
      transform: translateX(0);
      opacity: 1;
      transition: transform .55s ease, opacity .55s ease;
      will-change: transform, opacity;
    }

    .article-card-media {
      aspect-ratio: 16 / 9;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(13, 52, 119, .08)),
        var(--article-image) center / cover no-repeat;
    }

    .article-card-body {
      min-height: 304px;
      padding: 26px 24px 30px;
      display: grid;
      grid-template-rows: minmax(108px, auto) 1fr auto;
      align-content: stretch;
      justify-items: center;
      gap: 22px;
    }

    .article-card-title {
      align-self: center;
      margin: 28px 0 0;
      color: #000000;
      font-size: 20px;
      font-weight: 900;
      line-height: 1.7;
    }

    .article-card-link {
      align-self: end;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 166px;
      min-height: 42px;
      padding: 0 20px;
      border-radius: 5px;
      background: #2A306A;
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      transition: background .22s ease, transform .22s ease;
    }

    .article-card-link:hover {
      background: #1f2453;
      transform: translateY(-2px);
    }

    .articles-page {
      padding-bottom: 64px;
    }

    .articles-hero {
      width: min(980px, 100%);
      margin: 28px auto 0;
      direction: rtl;
      text-align: center;
    }

    .articles-hero-title {
      margin: 0;
      color: #0D3477;
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 900;
      line-height: 1.45;
    }

    .articles-hero-text {
      width: min(680px, 100%);
      margin: 12px auto 0;
      color: #4d5562;
      font-size: 16px;
      font-weight: 600;
      line-height: 2;
    }

    .articles-list {
      width: min(1180px, 100%);
      margin: 42px auto 0;
      direction: rtl;
    }

    .articles-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(20px, 2.6vw, 36px);
    }

    .articles-list-card {
      min-width: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto 1fr;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 18px 46px rgba(7, 26, 69, .12);
      transition: box-shadow .22s ease, transform .22s ease;
    }

    .articles-list-card:hover {
      box-shadow: 0 24px 58px rgba(7, 26, 69, .2);
      transform: translateY(-4px);
    }

    .latest-articles .article-card.articles-list-card {
      transform: translateX(0);
      opacity: 1;
      transition: transform .55s ease, opacity .55s ease, box-shadow .22s ease;
      will-change: transform, opacity;
    }

    .latest-articles .article-card.articles-list-card.is-sliding {
      opacity: 0;
      transform: translateX(42px) rotateY(-7deg);
    }

    .latest-articles .articles-list-card:not(.is-sliding):hover {
      box-shadow:
        0 28px 66px rgba(7, 26, 69, .3),
        inset 0 1px 0 rgba(255, 255, 255, .14);
      transform: translateY(-6px);
    }

    .articles-list-card-media {
      aspect-ratio: 16 / 10;
      overflow: hidden;
      display: block;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(13, 52, 119, .1)),
        #eef1f6;
      text-decoration: none;
    }

    .articles-list-card-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .articles-list-card-body {
      min-height: 260px;
      padding: 24px 22px 26px;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 14px;
      text-align: right;
    }

    .articles-list-card-category {
      width: max-content;
      max-width: 100%;
      color: #949aa4;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.6;
    }

    .articles-list-card-title {
      margin: 0;
      color: #000000;
      font-size: 19px;
      font-weight: 900;
      line-height: 1.75;
    }

    .articles-list-card-title a {
      color: inherit;
      text-decoration: none;
    }

    .articles-list-card-text {
      display: -webkit-box;
      overflow: hidden;
      margin: 0;
      color: #000000;
      font-size: 14px;
      font-weight: 500;
      line-height: 2;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .articles-list-card-link {
      align-self: end;
      justify-self: start;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 142px;
      min-height: 40px;
      padding: 0 18px;
      border-radius: 5px;
      background: #2A306A;
      color: #ffffff;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      transition: background .22s ease, transform .22s ease;
    }

    .articles-list-card-link:hover {
      background: #1f2453;
      transform: translateY(-2px);
    }

    .articles-consultation {
      margin-top: 54px;
      margin-bottom: 0;
    }

    .faq-section {
      width: 100vw;
      margin: 58px calc(50% - 50vw) 0;
      padding: 50px clamp(18px, 6vw, 120px) 10px;
      direction: rtl;
      text-align: center;
    }

    .faq-title {
      margin: 0 0 34px;
      color: #0D3477;
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 900;
      line-height: 1.35;
    }

    .faq-list {
      width: min(460px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 12px;
      text-align: right;
    }

    @media (min-width: 821px) {
      .faq-list {
        width: 75vw;
      }
    }

    .faq-item {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .faq-item.is-open {
      background: transparent;
    }

    .faq-item summary {
      position: relative;
      min-height: 58px;
      padding: 18px 18px 18px 48px;
      display: flex;
      align-items: center;
      color: #0D3477;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.8;
      cursor: pointer;
      list-style: none;
      border: 1px solid rgba(13, 52, 119, .12);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 16px 38px rgba(7, 26, 69, .12);
      transition:
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s ease;
    }

    .faq-item.is-open summary {
      background: #2A306A;
      border-color: rgba(42, 48, 106, .28);
      box-shadow: 0 18px 44px rgba(7, 26, 69, .16);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::before {
      content: "+";
      position: absolute;
      top: 50%;
      left: 22px;
      width: auto;
      height: auto;
      display: block;
      border: 0;
      background: transparent;
      color: #2A306A;
      font-size: 24px;
      font-weight: 400;
      line-height: 1;
      transform: translateY(-50%) rotate(0deg);
      transition:
        color .28s ease,
        transform .34s ease;
    }

    .faq-item.is-open summary::before {
      content: "-";
      background: transparent;
      color: #ffffff;
      transform: translateY(-50%);
    }

    .faq-item p {
      height: 0;
      min-height: 0;
      margin: 0;
      padding: 0 18px 0 18px;
      color: #24375c;
      font-size: 14px;
      font-weight: 500;
      line-height: 2;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      will-change: height, opacity, transform, padding;
      transition:
        height .28s cubic-bezier(.22, 1, .36, 1),
        opacity .2s ease,
        padding .28s cubic-bezier(.22, 1, .36, 1),
        transform .28s cubic-bezier(.22, 1, .36, 1);
    }

    .faq-item.is-open p {
      padding-top: 12px;
      padding-bottom: 8px;
      color: #24375c;
      opacity: 1;
      transform: translateY(0);
    }

    .faq-item.is-closing p {
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      transform: translateY(-4px);
    }

    @media (max-width: 820px) {
      .site-main {
        padding: 28px 10px 0;
      }

      .hero-slider {
        width: 100%;
        border-radius: 24px;
      }

      .slider-slide {
        min-height: 0;
      }

      .slider-button {
        width: 30px;
        height: 30px;
        border: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .slider-button:hover {
        background: transparent;
        transform: translateY(-50%);
      }

      .slider-button svg {
        width: 22px;
        height: 22px;
      }

      .services-showcase {
        margin-top: 36px;
      }

      .services-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .service-card {
        border-radius: 7px;
        box-shadow:
          0 14px 30px rgba(7, 26, 69, .18),
          inset 0 1px 0 rgba(255, 255, 255, .1);
      }

      .service-card:hover {
        transform: none;
      }

      .featured-project-card:not(.is-sliding):hover,
      .article-card:not(.is-sliding):hover {
        transform: none;
      }

      .service-card-media {
        min-height: 0;
      }

      .service-card-body {
        min-height: 254px;
        padding: 22px 20px 26px;
        gap: 8px;
      }

      .service-card-title {
        font-size: 17px;
        line-height: 1.45;
      }

      .service-card-text {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.8;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }

      .consultation-banner {
        min-height: 120px;
        margin-top: 28px;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 20px;
        text-align: center;
      }

      .consultation-content,
      .consultation-phone {
        grid-column: auto;
        grid-row: auto;
        justify-self: center;
      }

      .consultation-content {
        text-align: center;
      }

      .consultation-title {
        font-size: 18px;
        margin-bottom: 6px;
      }

      .consultation-text {
        font-size: 11.5px;
        line-height: 1.8;
      }

      .consultation-phone {
        min-height: 42px;
        padding: 0 10px;
        font-size: 18px;
      }

      .consultation-phone::before {
        left: -20px;
        width: 68px;
        height: 68px;
      }

      .featured-projects {
        margin-top: 36px;
        padding: 34px 14px 32px;
      }

      .featured-projects-title {
        margin-bottom: 28px;
        font-size: 24px;
      }

      .featured-projects-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 18px;
      }

      .featured-project-card:not(:first-child) {
        display: none;
      }

      .featured-project-card-top {
        padding: 22px 20px 12px;
      }

      .featured-project-media {
        margin-right: 14px;
        margin-left: 14px;
      }

      .featured-project-body {
        min-height: 254px;
        padding: 22px 20px 26px;
      }

      .latest-articles {
        margin-top: 36px;
        padding: 34px 14px 44px;
      }

      .faq-section {
        margin-top: 36px;
        padding: 34px 14px 0;
      }

      .faq-title {
        margin-bottom: 24px;
        font-size: 24px;
      }

      .latest-articles-title {
        margin-bottom: 28px;
        font-size: 24px;
      }

      .latest-articles-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 18px;
      }

      .article-card:not(:first-child) {
        display: none;
      }

      .article-card-body {
        min-height: 254px;
        padding: 22px 20px 26px;
      }
    }

    @media (max-width: 560px) {
      .site-main {
        padding-right: 8px;
        padding-left: 8px;
      }

      .services-showcase-title {
        margin-bottom: 18px;
        font-size: 24px;
      }

      .services-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .service-card-media {
        min-height: 0;
      }

      .service-card-body {
        padding: 20px 16px 24px;
      }

      .service-card-title {
        font-size: 15px;
      }

      .service-card-text {
        font-size: 12px;
        line-height: 1.75;
        -webkit-line-clamp: 4;
      }

      .consultation-banner {
        margin-top: 24px;
        padding: 22px 16px;
      }

      .consultation-title {
        font-size: 17px;
      }

      .consultation-text {
        font-size: 11px;
      }

      .consultation-phone {
        font-size: 17px;
      }

      .featured-projects {
        padding-top: 40px;
        padding-bottom: 38px;
      }

      .featured-project-card-top {
        padding: 20px 16px 10px;
      }

      .featured-project-category {
        font-size: 14px;
      }

      .featured-project-media {
        margin-right: 12px;
        margin-left: 12px;
      }

      .featured-project-body {
        padding: 20px 16px 24px;
        gap: 10px;
      }

      .featured-project-name {
        font-size: 18px;
      }

      .featured-project-text {
        font-size: 13px;
        line-height: 1.9;
      }

      .featured-project-link {
        min-width: 150px;
        min-height: 40px;
        margin-top: 16px;
        font-size: 13px;
      }

      .latest-articles {
        padding-top: 30px;
        padding-bottom: 38px;
      }

      .faq-section {
        padding-top: 30px;
      }

      .faq-item summary {
        font-size: 14px;
        line-height: 1.75;
      }

      .faq-item p {
        font-size: 12px;
        line-height: 1.9;
      }

      .article-card-body {
        padding: 20px 16px 24px;
        gap: 18px;
      }

      .article-card-title {
        font-size: 17px;
      }

      .article-card-link {
        min-width: 150px;
        min-height: 40px;
        font-size: 13px;
      }
    }

    @media (max-width: 980px) {
      .articles-page {
        padding-bottom: 44px;
      }

      .articles-hero {
        margin-top: 24px;
      }

      .articles-hero-title {
        font-size: 28px;
      }

      .articles-hero-text {
        max-width: none;
        font-size: 14px;
      }

      .articles-list {
        margin-top: 30px;
      }

      .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .articles-list-card:hover {
        transform: none;
      }

      .articles-list-card-body {
        min-height: 242px;
        padding: 22px 20px 24px;
      }

      .articles-list-card-title {
        font-size: 17px;
      }

      .articles-list-card-text {
        font-size: 13px;
        line-height: 1.9;
      }

      .articles-consultation {
        margin-top: 36px;
      }
    }

    @media (max-width: 620px) {
      .articles-hero {
        margin-top: 18px;
      }

      .articles-hero-title {
        font-size: 25px;
      }

      .articles-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
        gap: 12px;
      }

      .articles-list-card {
        grid-template-columns: 118px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: stretch;
      }

      .articles-list-card-media {
        height: 100%;
        min-height: 148px;
        aspect-ratio: auto;
      }

      .articles-list-card-body {
        min-height: 0;
        padding: 14px 14px 14px 10px;
        gap: 7px;
      }

      .articles-list-card-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.6;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .articles-list-card-category {
        font-size: 11px;
      }

      .articles-list-card-text {
        font-size: 12px;
        line-height: 1.65;
      }

      .articles-list-card-link {
        min-width: 112px;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
      }
    }

    .direct-contact-card {
      min-height: 100%;
      padding: clamp(24px, 3vw, 34px);
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: center;
      box-shadow: 0 18px 46px rgba(7, 26, 69, .09);
    }

    .direct-contact-card .contact-card-header {
      margin-bottom: 24px;
      text-align: center;
    }

    .direct-contact-card .contact-card-header h2 {
      font-size: clamp(20px, 2vw, 24px);
    }

    .direct-contact-card .contact-card-header p {
      font-size: 14px;
      line-height: 1.8;
    }

    .direct-contact-list {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      align-self: start;
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      list-style: none;
      justify-items: center;
    }

    .direct-contact-item {
      width: 100%;
      margin: 0;
      padding: 0;
      display: block;
    }

    .direct-contact-link {
      width: 100%;
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--direct-color, #272D6C);
      text-decoration: none;
      border: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 12px 28px rgba(7, 26, 69, .07);
      transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
      will-change: transform;
    }

    .direct-contact-link svg {
      width: 32px;
      height: 32px;
      display: block;
      fill: currentColor;
    }

    .direct-contact-email svg {
      fill: none;
    }

    .direct-contact-email .gmail-body {
      fill: rgba(255, 255, 255, .9);
      stroke: rgba(234, 67, 53, .58);
      stroke-width: 1.35;
    }

    .direct-contact-email .gmail-fold {
      fill: none;
      stroke: #EA4335;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .direct-contact-phone {
      --direct-color: #272D6C;
      --direct-border: rgba(39, 45, 108, .2);
      --direct-bg: #272D6C;
      --direct-shadow: rgba(39, 45, 108, .23);
    }

    .direct-contact-whatsapp {
      --direct-color: #25d366;
      --direct-border: rgba(37, 211, 102, .22);
      --direct-bg: #25d366;
      --direct-shadow: rgba(37, 211, 102, .24);
    }

    .direct-contact-telegram {
      --direct-color: #229ed9;
      --direct-border: rgba(34, 158, 217, .22);
      --direct-bg: #229ed9;
      --direct-shadow: rgba(34, 158, 217, .24);
    }

    .direct-contact-instagram {
      --direct-color: #d6249f;
      --direct-border: rgba(214, 36, 159, .2);
      --direct-bg: radial-gradient(circle at 30% 105%, #fdf497 0 9%, #fd5949 38%, #d6249f 62%, #285aeb 100%);
      --direct-shadow: rgba(214, 36, 159, .22);
    }

    .direct-contact-email {
      --direct-color: #EA4335;
      --direct-border: rgba(234, 67, 53, .2);
      --direct-bg: linear-gradient(135deg, rgba(255, 79, 163, .96) 0%, rgba(234, 67, 53, .98) 33%, rgba(251, 188, 5, .96) 55%, rgba(52, 168, 83, .96) 74%, rgba(66, 133, 244, .98) 100%);
      --direct-shadow: rgba(234, 67, 53, .2);
    }

    .direct-contact-link:hover,
    .direct-contact-link:focus-visible {
      color: #ffffff;
      background: var(--direct-bg, #272D6C);
      box-shadow: 0 18px 38px var(--direct-shadow, rgba(39, 45, 108, .22));
      transform: translateY(-3px);
      outline: 0;
    }

    .direct-contact-email:hover .gmail-body,
    .direct-contact-email:focus-visible .gmail-body {
      fill: rgba(255, 255, 255, .14);
      stroke: rgba(255, 255, 255, .55);
    }

    .direct-contact-email:hover .gmail-fold,
    .direct-contact-email:focus-visible .gmail-fold {
      stroke: #ffffff;
    }

    @media (max-width: 820px) {
      .direct-contact-card {
        padding: 20px 16px;
      }

      .direct-contact-list {
        width: min(360px, 100%);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
      }

      .direct-contact-link {
        aspect-ratio: 1;
        min-height: 0;
        color: #ffffff;
        background: var(--direct-bg, #272D6C);
        box-shadow: 0 16px 34px var(--direct-shadow, rgba(39, 45, 108, .2));
      }

      .direct-contact-email .gmail-body {
        fill: rgba(255, 255, 255, .14);
        stroke: rgba(255, 255, 255, .55);
      }

      .direct-contact-email .gmail-fold {
        stroke: #ffffff;
      }

      .direct-contact-link svg {
        width: 29px;
        height: 29px;
      }
    }

    @media (max-width: 380px) {
      .direct-contact-list {
        gap: 8px;
      }

      .direct-contact-link svg {
        width: 25px;
        height: 25px;
      }
    }

    .site-footer {
      width: 100vw;
      margin-top: 80px;
      margin-right: calc(50% - 50vw);
      margin-left: calc(50% - 50vw);
      direction: rtl;
      font-family: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
    }

    .footer-main {
      position: relative;
      overflow: hidden;
      min-height: 280px;
      padding: 58px clamp(28px, 7vw, 150px) 56px;
      color: #ffffff;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .035) 25%, transparent 25%) 0 0 / 7px 7px,
        #121B32;
    }

    .footer-main::after {
      content: "";
      position: absolute;
      top: 20px;
      right: 32px;
      width: 210px;
      height: 210px;
      background: url("../images/logo/logo-mobile-version.webp") center / contain no-repeat;
      filter: grayscale(1) brightness(2.4);
      opacity: .08;
      pointer-events: none;
    }

    .footer-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(300px, 1.2fr) minmax(150px, .5fr) minmax(160px, .55fr) minmax(190px, .7fr);
      gap: clamp(42px, 7vw, 120px);
      align-items: start;
      max-width: 1120px;
      margin: 0 auto;
    }

    .footer-title {
      margin: 0 0 18px;
      color: #ffffff;
      font-size: 24px;
      font-weight: 800;
      line-height: 1.4;
    }

    .footer-text {
      max-width: 540px;
      margin: 0;
      color: rgba(255, 255, 255, .68);
      font-size: 15px;
      font-weight: 500;
      line-height: 2.05;
    }

    .footer-services-list,
    .footer-links,
    .footer-contact-list {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-services-list a,
    .footer-links a,
    .footer-contact-list a,
    .footer-contact-list span {
      color: #ffffff;
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
    }

    .footer-services-list a {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: rgba(255, 255, 255, .86);
      transition: color .22s ease, transform .22s ease;
    }

    .footer-services-list a::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: currentColor;
      opacity: .72;
    }

    .footer-services-list a:hover {
      color: #ffffff;
      transform: translateX(-3px);
    }

    .footer-links a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, .88);
      transition: color .22s ease, transform .22s ease;
    }

    .footer-links a:hover {
      transform: translateX(-3px);
    }

    .footer-links svg {
      width: 19px;
      height: 19px;
      fill: currentColor;
    }

    .footer-links a.footer-whatsapp:hover {
      color: #25d366;
    }

    .footer-links a.footer-telegram:hover {
      color: #229ed9;
    }

    .footer-links a.footer-instagram:hover {
      color: #d6249f;
    }

    .footer-contact-list small {
      display: block;
      margin-bottom: 2px;
      color: rgba(255, 255, 255, .68);
      font-size: 13px;
      font-weight: 600;
    }

    .footer-contact-list li a + a {
      display: block;
      margin-top: 6px;
    }

    .engineer-phone {
      display: flex !important;
      align-items: center;
      gap: 4px;
      width: max-content;
      max-width: 100%;
      white-space: nowrap;
    }

    .engineer-phone span {
      white-space: nowrap;
    }

    .engineer-phone span::before {
      content: " (";
    }

    .engineer-phone span::after {
      content: ")";
    }

    .footer-bottom {
      min-height: 64px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 16px clamp(28px, 7vw, 150px);
      background: #ffffff;
      border-top: 1px solid rgba(39, 45, 108, .08);
    }

    .footer-social-icons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    .footer-social-icons a {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #272D6C;
      text-decoration: none;
      transition: color .22s ease, transform .22s ease;
    }

    .footer-social-icons a:hover {
      transform: translateY(-2px);
    }

    .footer-social-icons a.footer-whatsapp:hover {
      color: #25d366;
    }

    .footer-social-icons a.footer-telegram:hover {
      color: #229ed9;
    }

    .footer-social-icons a.footer-instagram:hover {
      color: #d6249f;
    }

    .footer-social-icons svg {
      width: 21px;
      height: 21px;
      fill: currentColor;
    }

    .footer-copy {
      justify-self: end;
      margin: 0;
      color: #272D6C;
      font-size: 13px;
      font-weight: 500;
    }

    @media (max-width: 820px) {
      .site-footer {
        margin-top: 54px;
      }

      .footer-main {
        padding: 44px 24px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .footer-title,
      .footer-text,
      .footer-services-list,
      .footer-links,
      .footer-contact-list {
        text-align: center;
      }

      .footer-links a {
        justify-content: center;
      }

      .footer-services-list a {
        justify-content: center;
      }

      .engineer-phone span {
        display: inline;
        margin-top: 0;
      }

      .engineer-phone {
        flex-direction: column;
        gap: 2px;
        margin-right: auto;
        margin-left: auto;
      }

      .engineer-phone span::before,
      .engineer-phone span::after {
        content: none;
      }

      .footer-text {
        margin-inline: auto;
      }

      .footer-bottom {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px 24px;
      }

      .footer-copy {
        justify-self: center;
        text-align: center;
      }
    }