{"id":15434,"date":"2026-09-02T14:04:08","date_gmt":"2026-09-02T10:34:08","guid":{"rendered":"https:\/\/mabato.ir\/?page_id=15434"},"modified":"2026-09-07T15:03:28","modified_gmt":"2026-09-07T11:33:28","slug":"design","status":"publish","type":"page","link":"https:\/\/mabato.ir\/?page_id=15434","title":{"rendered":"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a\u062a"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15434\" class=\"elementor elementor-15434\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2d06c8c elementor-section-full_width elementor-section-height-default elementor-section-height-default wd-section-disabled\" data-id=\"2d06c8c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b300ca6\" data-id=\"b300ca6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7384479 elementor-widget elementor-widget-html\" data-id=\"7384479\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"hero-section\" dir=\"rtl\">\r\n  <style>\r\n.hero-section {\r\n  background: #0a0f1c;\r\n  padding: 100px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n  position: relative;\r\n  overflow: hidden;\r\n\r\n  \/* \u0627\u06cc\u0646 \u06f3 \u062e\u0637 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0642\u0633\u0645\u062a \u0647\u0633\u062a\u0646 - \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw;\r\n  margin-left: calc(50% - 50vw);\r\n  margin-right: calc(50% - 50vw);\r\n}\r\n\r\n    .hero-container {\r\n      max-width: 1200px;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 50px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* ========== Content ========== *\/\r\n    .hero-content {\r\n      flex: 1;\r\n      max-width: 520px;\r\n    }\r\n\r\n    .hero-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: rgba(59, 130, 246, 0.12);\r\n      border: 1px solid rgba(59, 130, 246, 0.3);\r\n      color: #60a5fa;\r\n      padding: 8px 18px;\r\n      border-radius: 50px;\r\n      font-size: 0.9rem;\r\n      font-weight: 500;\r\n      margin-bottom: 22px;\r\n    }\r\n\r\n    .hero-badge svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    .hero-title {\r\n      font-size: 2.5rem;\r\n      font-weight: 800;\r\n      line-height: 1.35;\r\n      margin: 0 0 18px;\r\n      color: #ffffff;\r\n    }\r\n\r\n    .hero-title span {\r\n      color: #3b82f6;\r\n    }\r\n\r\n    .hero-desc {\r\n      font-size: 1.05rem;\r\n      line-height: 1.9;\r\n      color: #94a3b8;\r\n      margin: 0 0 26px;\r\n    }\r\n\r\n    .hero-features {\r\n      list-style: none;\r\n      padding: 0;\r\n      margin: 0 0 34px;\r\n    }\r\n\r\n    .hero-features li {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      margin-bottom: 13px;\r\n      font-size: 1rem;\r\n      color: #e2e8f0;\r\n    }\r\n\r\n    .hero-features li svg {\r\n      width: 20px;\r\n      height: 20px;\r\n      color: #22c55e;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .hero-buttons {\r\n      display: flex;\r\n      gap: 14px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .btn-primary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: #3b82f6;\r\n      color: #fff;\r\n      padding: 14px 28px;\r\n      border-radius: 12px;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      text-decoration: none;\r\n      transition: all 0.3s ease;\r\n      font-family: inherit;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background: #2563eb;\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);\r\n    }\r\n\r\n    .btn-secondary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: transparent;\r\n      color: #e2e8f0;\r\n      padding: 14px 28px;\r\n      border-radius: 12px;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      text-decoration: none;\r\n      border: 1px solid rgba(255, 255, 255, 0.18);\r\n      transition: all 0.3s ease;\r\n      font-family: inherit;\r\n    }\r\n\r\n    .btn-secondary:hover {\r\n      border-color: #3b82f6;\r\n      color: #60a5fa;\r\n      background: rgba(59, 130, 246, 0.08);\r\n    }\r\n\r\n    \/* ========== Visual Side ========== *\/\r\n    .hero-visual {\r\n      flex: 1;\r\n      position: relative;\r\n      height: 440px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    \/* Laptop *\/\r\n    .laptop {\r\n      width: 420px;\r\n      height: 270px;\r\n      background: #1e293b;\r\n      border-radius: 14px 14px 6px 6px;\r\n      border: 3px solid #334155;\r\n      position: relative;\r\n      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);\r\n      overflow: hidden;\r\n      z-index: 2;\r\n    }\r\n\r\n    .laptop-screen {\r\n      width: 100%;\r\n      height: 100%;\r\n      background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);\r\n      padding: 18px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 12px;\r\n    }\r\n\r\n    .laptop-topbar {\r\n      display: flex;\r\n      gap: 6px;\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    .laptop-dot {\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: #475569;\r\n    }\r\n    .laptop-dot:nth-child(1) { background: #ef4444; }\r\n    .laptop-dot:nth-child(2) { background: #eab308; }\r\n    .laptop-dot:nth-child(3) { background: #22c55e; }\r\n\r\n    .laptop-header {\r\n      height: 28px;\r\n      background: rgba(59, 130, 246, 0.15);\r\n      border-radius: 6px;\r\n      display: flex;\r\n      align-items: center;\r\n      padding: 0 12px;\r\n      gap: 8px;\r\n    }\r\n\r\n    .laptop-header-line {\r\n      height: 8px;\r\n      background: rgba(96, 165, 250, 0.4);\r\n      border-radius: 4px;\r\n    }\r\n\r\n    .laptop-content {\r\n      flex: 1;\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n    }\r\n\r\n    .laptop-card {\r\n      background: rgba(30, 41, 59, 0.8);\r\n      border-radius: 8px;\r\n      border: 1px solid rgba(255, 255, 255, 0.05);\r\n      padding: 10px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 8px;\r\n    }\r\n\r\n    .laptop-card-icon {\r\n      width: 28px;\r\n      height: 28px;\r\n      background: rgba(59, 130, 246, 0.2);\r\n      border-radius: 6px;\r\n    }\r\n\r\n    .laptop-card-line {\r\n      height: 6px;\r\n      background: rgba(148, 163, 184, 0.25);\r\n      border-radius: 3px;\r\n    }\r\n\r\n    .laptop-card-line.short {\r\n      width: 60%;\r\n    }\r\n\r\n    .laptop-base {\r\n      width: 460px;\r\n      height: 14px;\r\n      background: #334155;\r\n      border-radius: 0 0 10px 10px;\r\n      margin: 0 auto;\r\n      position: relative;\r\n      top: -2px;\r\n      z-index: 1;\r\n    }\r\n\r\n    .laptop-base::after {\r\n      content: '';\r\n      position: absolute;\r\n      width: 80px;\r\n      height: 6px;\r\n      background: #475569;\r\n      border-radius: 0 0 6px 6px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      top: 14px;\r\n    }\r\n\r\n    \/* Phone *\/\r\n    .phone {\r\n      width: 130px;\r\n      height: 240px;\r\n      background: #0f172a;\r\n      border-radius: 22px;\r\n      border: 4px solid #334155;\r\n      position: absolute;\r\n      right: 30px;\r\n      bottom: 30px;\r\n      z-index: 4;\r\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .phone-notch {\r\n      width: 50px;\r\n      height: 12px;\r\n      background: #1e293b;\r\n      border-radius: 0 0 10px 10px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .phone-screen {\r\n      padding: 14px 10px;\r\n      height: calc(100% - 12px);\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 8px;\r\n    }\r\n\r\n    .phone-header {\r\n      height: 20px;\r\n      background: rgba(59, 130, 246, 0.2);\r\n      border-radius: 5px;\r\n    }\r\n\r\n    .phone-card {\r\n      flex: 1;\r\n      background: rgba(30, 41, 59, 0.7);\r\n      border-radius: 8px;\r\n      border: 1px solid rgba(255, 255, 255, 0.05);\r\n    }\r\n\r\n    .phone-card:nth-child(3) {\r\n      flex: 0.7;\r\n    }\r\n\r\n    \/* Floating Icons *\/\r\n    .float-icon {\r\n      position: absolute;\r\n      width: 52px;\r\n      height: 52px;\r\n      background: #1e293b;\r\n      border-radius: 14px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n      border: 1px solid rgba(59, 130, 246, 0.3);\r\n      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);\r\n      z-index: 6;\r\n      animation: float 5s ease-in-out infinite;\r\n    }\r\n\r\n    .float-icon svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    .float-1 { top: 20px; right: 10px; animation-delay: 0s; }\r\n    .float-2 { top: 100px; left: 0; animation-delay: 1.3s; }\r\n    .float-3 { bottom: 60px; left: 30px; animation-delay: 2.6s; }\r\n\r\n    @keyframes float {\r\n      0%, 100% { transform: translateY(0); }\r\n      50% { transform: translateY(-12px); }\r\n    }\r\n\r\n    \/* Glow *\/\r\n    .hero-glow {\r\n      position: absolute;\r\n      width: 500px;\r\n      height: 500px;\r\n      background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);\r\n      top: 50%;\r\n      left: 25%;\r\n      transform: translate(-50%, -50%);\r\n      pointer-events: none;\r\n      z-index: 0;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 992px) {\r\n      .hero-container {\r\n        flex-direction: column-reverse;\r\n        text-align: center;\r\n        gap: 50px;\r\n      }\r\n\r\n      .hero-content {\r\n        max-width: 100%;\r\n      }\r\n\r\n      .hero-title {\r\n        font-size: 2.1rem;\r\n      }\r\n\r\n      .hero-features {\r\n        display: inline-block;\r\n        text-align: right;\r\n      }\r\n\r\n      .hero-buttons {\r\n        justify-content: center;\r\n      }\r\n\r\n      .hero-visual {\r\n        height: 360px;\r\n        width: 100%;\r\n      }\r\n\r\n      .laptop {\r\n        width: 340px;\r\n        height: 220px;\r\n      }\r\n\r\n      .laptop-base {\r\n        width: 370px;\r\n      }\r\n\r\n      .phone {\r\n        width: 110px;\r\n        height: 200px;\r\n        right: 20px;\r\n        bottom: 20px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 500px) {\r\n      .hero-section {\r\n        padding: 70px 16px;\r\n      }\r\n\r\n      .hero-title {\r\n        font-size: 1.7rem;\r\n      }\r\n\r\n      .btn-primary,\r\n      .btn-secondary {\r\n        width: 100%;\r\n        justify-content: center;\r\n      }\r\n\r\n      .laptop {\r\n        width: 280px;\r\n        height: 180px;\r\n      }\r\n\r\n      .laptop-base {\r\n        width: 300px;\r\n      }\r\n\r\n      .phone {\r\n        display: none;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"hero-glow\"><\/div>\r\n\r\n  <div class=\"hero-container\">\r\n\r\n    <!-- Content -->\r\n    <div class=\"hero-content\">\r\n      <div class=\"hero-badge\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z\" \/>\r\n        <\/svg>\r\n        \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc \u0648 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc\r\n      <\/div>\r\n\r\n      <h1 class=\"hero-title\">\r\n        \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<br>\r\n        <span>\u0628\u0627 \u0648\u0631\u062f\u067e\u0631\u0633<\/span>\r\n      <\/h1>\r\n\r\n      <p class=\"hero-desc\">\r\n        \u0648\u0628\u0633\u0627\u06cc\u062a \u0634\u0645\u0627\u060c \u0627\u0648\u0644\u06cc\u0646 \u0646\u06af\u0627\u0647 \u0645\u0634\u062a\u0631\u06cc \u0628\u0647 \u0628\u0631\u0646\u062f \u0634\u0645\u0627\u0633\u062a. \u0645\u0627 \u0628\u0627 \u0648\u0631\u062f\u067e\u0631\u0633 \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0633\u0631\u06cc\u0639\u060c \u0627\u0645\u0646\u060c \u0632\u06cc\u0628\u0627 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0631\u0627 \u0631\u0634\u062f \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.\r\n      <\/p>\r\n\r\n      <ul class=\"hero-features\">\r\n        <li>\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n          <\/svg>\r\n          \u0637\u0631\u0627\u062d\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0648 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0647\u0648\u06cc\u062a \u0628\u0631\u0646\u062f \u0634\u0645\u0627\r\n        <\/li>\r\n        <li>\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n          <\/svg>\r\n          \u06a9\u0627\u0645\u0644\u0627\u064b \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644\r\n        <\/li>\r\n        <li>\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n          <\/svg>\r\n          \u0633\u0631\u0639\u062a \u0628\u0627\u0644\u0627\u060c \u0627\u0645\u0646\u06cc\u062a \u0648 \u0633\u0626\u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\r\n        <\/li>\r\n        <li>\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n          <\/svg>\r\n          \u062a\u062d\u0648\u06cc\u0644 \u0628\u0647\u200c\u0645\u0648\u0642\u0639 + \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0631 \u0628\u0627 \u0633\u0627\u06cc\u062a\r\n        <\/li>\r\n      <\/ul>\r\n\r\n      <div class=\"hero-buttons\">\r\n        <a href=\"#\" class=\"btn-primary\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0648 \u062b\u0628\u062a \u067e\u0631\u0648\u0698\u0647<\/a>\r\n        <a href=\"#\" class=\"btn-secondary\">\r\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" width=\"18\" height=\"18\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" \/>\r\n          <\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Visual -->\r\n    <div class=\"hero-visual\">\r\n      <!-- Floating Icons -->\r\n      <div class=\"float-icon float-1\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n      <div class=\"float-icon float-2\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n      <div class=\"float-icon float-3\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <!-- Laptop -->\r\n      <div>\r\n        <div class=\"laptop\">\r\n          <div class=\"laptop-screen\">\r\n            <div class=\"laptop-topbar\">\r\n              <div class=\"laptop-dot\"><\/div>\r\n              <div class=\"laptop-dot\"><\/div>\r\n              <div class=\"laptop-dot\"><\/div>\r\n            <\/div>\r\n            <div class=\"laptop-header\">\r\n              <div class=\"laptop-header-line\" style=\"width: 40%\"><\/div>\r\n              <div class=\"laptop-header-line\" style=\"width: 20%\"><\/div>\r\n            <\/div>\r\n            <div class=\"laptop-content\">\r\n              <div class=\"laptop-card\">\r\n                <div class=\"laptop-card-icon\"><\/div>\r\n                <div class=\"laptop-card-line\"><\/div>\r\n                <div class=\"laptop-card-line short\"><\/div>\r\n              <\/div>\r\n              <div class=\"laptop-card\">\r\n                <div class=\"laptop-card-icon\"><\/div>\r\n                <div class=\"laptop-card-line\"><\/div>\r\n                <div class=\"laptop-card-line short\"><\/div>\r\n              <\/div>\r\n              <div class=\"laptop-card\">\r\n                <div class=\"laptop-card-icon\"><\/div>\r\n                <div class=\"laptop-card-line\"><\/div>\r\n                <div class=\"laptop-card-line short\"><\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"laptop-base\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Phone -->\r\n      <div class=\"phone\">\r\n        <div class=\"phone-notch\"><\/div>\r\n        <div class=\"phone-screen\">\r\n          <div class=\"phone-header\"><\/div>\r\n          <div class=\"phone-card\"><\/div>\r\n          <div class=\"phone-card\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81848f0 elementor-widget elementor-widget-html\" data-id=\"81848f0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"challenges-section\" dir=\"rtl\">\r\n  <style>\r\n.challenges-section {\r\n  background: #0f172a;\r\n  padding: 80px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n  text-align: center;\r\n\r\n  \/* \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  margin-left: calc(-50vw + 50%) !important;\r\n  margin-right: calc(-50vw + 50%) !important;\r\n}\r\n\r\n    .challenges-container {\r\n      max-width: 1140px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .challenges-title {\r\n      font-size: 2rem;\r\n      font-weight: 700;\r\n      margin: 0 0 50px;\r\n      line-height: 1.5;\r\n      color: #ffffff;\r\n    }\r\n\r\n    .challenges-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 28px;\r\n    }\r\n\r\n    .challenge-card {\r\n      background: #1e293b;\r\n      border-radius: 16px;\r\n      padding: 36px 28px 32px;\r\n      text-align: center;\r\n      transition: all 0.3s ease;\r\n      border: 1px solid rgba(255, 255, 255, 0.06);\r\n    }\r\n\r\n    .challenge-card:hover {\r\n      transform: translateY(-8px);\r\n      background: #243044;\r\n      border-color: rgba(59, 130, 246, 0.3);\r\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\r\n    }\r\n\r\n    .challenge-icon {\r\n      width: 64px;\r\n      height: 64px;\r\n      margin: 0 auto 24px;\r\n      background: rgba(59, 130, 246, 0.12);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .challenge-icon svg {\r\n      width: 28px;\r\n      height: 28px;\r\n    }\r\n\r\n    .challenge-card h3 {\r\n      font-size: 1.15rem;\r\n      font-weight: 700;\r\n      margin: 0 0 14px;\r\n      color: #f1f5f9;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .challenge-card p {\r\n      font-size: 0.95rem;\r\n      line-height: 1.8;\r\n      color: #94a3b8;\r\n      margin: 0;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 992px) {\r\n      .challenges-grid {\r\n        grid-template-columns: 1fr;\r\n        max-width: 480px;\r\n        margin: 0 auto;\r\n      }\r\n\r\n      .challenges-title {\r\n        font-size: 1.6rem;\r\n        margin-bottom: 40px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .challenges-section {\r\n        padding: 60px 16px;\r\n      }\r\n\r\n      .challenge-card {\r\n        padding: 28px 22px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"challenges-container\">\r\n    <h2 class=\"challenges-title\">\u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a<br>\u0648 \u0631\u0627\u0647\u200c\u062d\u0644 \u0645\u0627\u0628\u0627\u062a\u0648<\/h2>\r\n\r\n    <div class=\"challenges-grid\">\r\n\r\n      <!-- Card 1 -->\r\n      <div class=\"challenge-card\">\r\n        <div class=\"challenge-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0635\u0648\u0631\u062a\u200c\u062d\u0633\u0627\u0628 \u0631\u0633\u0645\u06cc \u0648 \u0642\u0627\u0646\u0648\u0646\u06cc \u062f\u0634\u0648\u0627\u0631<\/h3>\r\n        <p>\u062f\u0631\u06cc\u0627\u0641\u062a \u0641\u0627\u06a9\u062a\u0648\u0631 \u0631\u0633\u0645\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u062d\u0642\u06cc\u0642\u06cc \u06a9\u0645\u06cc \u062f\u0634\u0648\u0627\u0631 \u0648 \u067e\u0631\u0631\u06cc\u0633\u06a9 \u0627\u0633\u062a. \u0634\u0631\u06a9\u062a\u200c\u0647\u0627 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u0641\u0627\u06a9\u062a\u0648\u0631\u0647\u0627 \u0631\u0627 \u0628\u0627\u0628\u062a \u0645\u0627\u0644\u06cc\u0627\u062a \u0646\u06af\u0647 \u062f\u0627\u0631\u0646\u062f.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Card 2 -->\r\n      <div class=\"challenge-card\">\r\n        <div class=\"challenge-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0637\u0631\u0627\u062d \u0647\u0645\u06cc\u0634\u0647 \u0622\u0633\u0627\u0646 \u0646\u06cc\u0633\u062a<\/h3>\r\n        <p>\u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0634\u0631\u0627\u06cc\u0637 \u06cc\u0627 \u0634\u0647\u0631\u060c \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0637\u0631\u0627\u062d \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0633\u062e\u062a \u0645\u06cc\u200c\u0634\u0648\u062f. \u0634\u0646\u0627\u062e\u062a \u0645\u0647\u0627\u0631\u062a \u0648 \u062a\u062c\u0631\u0628\u0647\u200c\u06cc \u0648\u0627\u0642\u0639\u06cc \u0637\u0631\u0627\u062d \u06a9\u0627\u0631 \u062f\u0634\u0648\u0627\u0631\u06cc \u0627\u0633\u062a.<\/p>\r\n      <\/div>\r\n\r\n      <!-- Card 3 -->\r\n      <div class=\"challenge-card\">\r\n        <div class=\"challenge-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0637\u0631\u0627\u062d \u0641\u0631\u06cc\u0644\u0646\u0633\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0636\u0639\u06cc\u0641 \u062f\u0627\u0631\u062f<\/h3>\r\n        <p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0637\u0631\u0627\u062d\u0627\u0646 \u0641\u0631\u06cc\u0644\u0646\u0633\u0631 \u067e\u0633 \u0627\u0632 \u062a\u062d\u0648\u06cc\u0644 \u067e\u0631\u0648\u0698\u0647\u060c \u062f\u06cc\u06af\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0648 \u0645\u0634\u06a9\u0644\u0627\u062a \u0628\u0639\u062f\u06cc \u0634\u0645\u0627 \u062d\u0644\u200c\u0646\u0634\u062f\u0647 \u0628\u0627\u0642\u06cc \u0645\u06cc\u200c\u0645\u0627\u0646\u062f.<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"wd-negative-gap elementor-section elementor-top-section elementor-element elementor-element-009253e elementor-section-boxed elementor-section-height-default elementor-section-height-default wd-section-disabled\" data-id=\"009253e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8bcb2c7\" data-id=\"8bcb2c7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-745e58e elementor-widget elementor-widget-html\" data-id=\"745e58e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"process-section\" dir=\"rtl\">\r\n  <style>\r\n.process-section {\r\n  background: #0f172a;\r\n  padding: 80px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n  text-align: center;\r\n\r\n  \/* \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  margin-left: calc(-50vw + 50%) !important;\r\n  margin-right: calc(-50vw + 50%) !important;\r\n}\r\n\r\n    .process-container {\r\n      max-width: 1140px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .process-title {\r\n      font-size: 2rem;\r\n      font-weight: 700;\r\n      margin: 0 0 60px;\r\n      color: #ffffff;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    \/* Process Steps *\/\r\n    .process-steps {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: flex-start;\r\n      position: relative;\r\n      gap: 16px;\r\n    }\r\n\r\n    \/* Connecting Line *\/\r\n    .process-steps::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 28px;\r\n      right: 10%;\r\n      left: 10%;\r\n      height: 3px;\r\n      background: linear-gradient(to left, #3b82f6, #60a5fa, #3b82f6);\r\n      z-index: 0;\r\n      border-radius: 2px;\r\n    }\r\n\r\n    .process-step {\r\n      flex: 1;\r\n      max-width: 200px;\r\n      position: relative;\r\n      z-index: 1;\r\n      text-align: center;\r\n    }\r\n\r\n    .step-number {\r\n      width: 56px;\r\n      height: 56px;\r\n      background: #3b82f6;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin: 0 auto 24px;\r\n      font-size: 1.25rem;\r\n      font-weight: 700;\r\n      color: #fff;\r\n      box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.15);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .process-step:hover .step-number {\r\n      transform: scale(1.1);\r\n      box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.25);\r\n    }\r\n\r\n    .step-card {\r\n      background: #1e293b;\r\n      border-radius: 16px;\r\n      padding: 28px 18px 24px;\r\n      border: 1px solid rgba(255, 255, 255, 0.06);\r\n      transition: all 0.3s ease;\r\n      height: 100%;\r\n    }\r\n\r\n    .process-step:hover .step-card {\r\n      background: #243044;\r\n      border-color: rgba(59, 130, 246, 0.35);\r\n      transform: translateY(-6px);\r\n      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .step-icon {\r\n      width: 48px;\r\n      height: 48px;\r\n      margin: 0 auto 16px;\r\n      background: rgba(59, 130, 246, 0.12);\r\n      border-radius: 12px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .step-icon svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    .step-card h3 {\r\n      font-size: 1.05rem;\r\n      font-weight: 700;\r\n      margin: 0 0 10px;\r\n      color: #f1f5f9;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    .step-card p {\r\n      font-size: 0.85rem;\r\n      line-height: 1.7;\r\n      color: #94a3b8;\r\n      margin: 0;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 992px) {\r\n      .process-steps {\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 40px 24px;\r\n      }\r\n\r\n      .process-steps::before {\r\n        display: none;\r\n      }\r\n\r\n      .process-step {\r\n        flex: 0 0 calc(50% - 20px);\r\n        max-width: 260px;\r\n      }\r\n\r\n      .process-title {\r\n        font-size: 1.65rem;\r\n        margin-bottom: 48px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      .process-section {\r\n        padding: 60px 16px;\r\n      }\r\n\r\n      .process-step {\r\n        flex: 0 0 100%;\r\n        max-width: 340px;\r\n      }\r\n\r\n      .process-title {\r\n        font-size: 1.45rem;\r\n      }\r\n\r\n      .step-number {\r\n        width: 50px;\r\n        height: 50px;\r\n        font-size: 1.15rem;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"process-container\">\r\n    <h2 class=\"process-title\">\u0641\u0631\u0622\u06cc\u0646\u062f \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a<\/h2>\r\n\r\n    <div class=\"process-steps\">\r\n\r\n      <!-- Step 1 -->\r\n      <div class=\"process-step\">\r\n        <div class=\"step-number\">1<\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3.75-3.75c-.5-.5-1.17-.78-1.87-.78H9.75a.75.75 0 01-.75-.75V8.25a.75.75 0 01.75-.75h3.75c.7 0 1.37.28 1.87.78l.75.75V8.25a.75.75 0 01.75-.75h2.25z\" \/>\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 6.75h-3a.75.75 0 00-.75.75v9.75c0 .414.336.75.75.75h3.75a.75.75 0 00.75-.75V7.5a.75.75 0 00-.75-.75z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <h3>\u0646\u06cc\u0627\u0632\u0633\u0646\u062c\u06cc \u0648 \u0645\u0634\u0627\u0648\u0631\u0647<\/h3>\r\n          <p>\u0628\u0631\u0631\u0633\u06cc \u0646\u06cc\u0627\u0632\u0647\u0627\u060c \u0627\u0647\u062f\u0627\u0641 \u0648 \u0627\u0631\u0627\u0626\u0647 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u0646\u0627\u0633\u0628<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 2 -->\r\n      <div class=\"process-step\">\r\n        <div class=\"step-number\">2<\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <h3>\u0637\u0631\u0627\u062d\u06cc \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0631\u06cc\u0632\u06cc<\/h3>\r\n          <p>\u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06cc\u0631\u0641\u0631\u06cc\u0645 \u0648 \u062a\u0639\u06cc\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u0627\u06cc\u062a<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 3 -->\r\n      <div class=\"process-step\">\r\n        <div class=\"step-number\">3<\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <h3>\u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647<\/h3>\r\n          <p>\u0637\u0631\u0627\u062d\u06cc UI\/UX \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0631 \u0648\u0631\u062f\u067e\u0631\u0633<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 4 -->\r\n      <div class=\"process-step\">\r\n        <div class=\"step-number\">4<\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <h3>\u062a\u0633\u062a \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/h3>\r\n          <p>\u0628\u0631\u0631\u0633\u06cc \u0633\u0631\u0639\u062a\u060c \u0627\u0645\u0646\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Step 5 -->\r\n      <div class=\"process-step\">\r\n        <div class=\"step-number\">5<\/div>\r\n        <div class=\"step-card\">\r\n          <div class=\"step-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <h3>\u062a\u062d\u0648\u06cc\u0644 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/h3>\r\n          <p>\u062a\u062d\u0648\u06cc\u0644 \u0633\u0627\u06cc\u062a\u060c \u0622\u0645\u0648\u0632\u0634 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648\u0627\u0642\u0639\u06cc<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e7736a elementor-widget elementor-widget-html\" data-id=\"1e7736a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"features-section\" dir=\"rtl\">\r\n  <style>\r\n.features-section {\r\n  background: #0f172a;\r\n  padding: 80px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n  text-align: center;\r\n\r\n  \/* \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  margin-left: calc(-50vw + 50%) !important;\r\n  margin-right: calc(-50vw + 50%) !important;\r\n}\r\n\r\n    .features-container {\r\n      max-width: 1140px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    \/* Top Banner *\/\r\n    .features-banner {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: rgba(30, 41, 59, 0.8);\r\n      border: 1px solid rgba(255, 255, 255, 0.08);\r\n      border-radius: 50px;\r\n      padding: 14px 28px;\r\n      margin-bottom: 48px;\r\n      max-width: 100%;\r\n    }\r\n\r\n    .features-banner-icon {\r\n      width: 36px;\r\n      height: 36px;\r\n      background: rgba(59, 130, 246, 0.15);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .features-banner-icon svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n\r\n    .features-banner p {\r\n      margin: 0;\r\n      font-size: 0.95rem;\r\n      line-height: 1.7;\r\n      color: #e2e8f0;\r\n      text-align: right;\r\n    }\r\n\r\n    \/* Title *\/\r\n    .features-title {\r\n      font-size: 2rem;\r\n      font-weight: 700;\r\n      margin: 0 0 50px;\r\n      color: #ffffff;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    \/* Grid *\/\r\n    .features-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 24px;\r\n    }\r\n\r\n    .feature-card {\r\n      background: #1e293b;\r\n      border-radius: 16px;\r\n      padding: 32px 24px 28px;\r\n      text-align: center;\r\n      transition: all 0.3s ease;\r\n      border: 1px solid rgba(255, 255, 255, 0.06);\r\n    }\r\n\r\n    .feature-card:hover {\r\n      transform: translateY(-8px);\r\n      background: #243044;\r\n      border-color: rgba(59, 130, 246, 0.35);\r\n      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .feature-icon {\r\n      width: 58px;\r\n      height: 58px;\r\n      margin: 0 auto 20px;\r\n      background: rgba(59, 130, 246, 0.12);\r\n      border-radius: 14px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .feature-icon svg {\r\n      width: 26px;\r\n      height: 26px;\r\n    }\r\n\r\n    .feature-card h3 {\r\n      font-size: 1.1rem;\r\n      font-weight: 700;\r\n      margin: 0 0 12px;\r\n      color: #f1f5f9;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    .feature-card p {\r\n      font-size: 0.9rem;\r\n      line-height: 1.75;\r\n      color: #94a3b8;\r\n      margin: 0;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 992px) {\r\n      .features-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      .features-title {\r\n        font-size: 1.65rem;\r\n      }\r\n\r\n      .features-banner {\r\n        padding: 12px 20px;\r\n      }\r\n\r\n      .features-banner p {\r\n        font-size: 0.88rem;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      .features-section {\r\n        padding: 60px 16px;\r\n      }\r\n\r\n      .features-grid {\r\n        grid-template-columns: 1fr;\r\n        max-width: 420px;\r\n        margin: 0 auto;\r\n      }\r\n\r\n      .features-banner {\r\n        flex-direction: column;\r\n        border-radius: 16px;\r\n        text-align: center;\r\n        gap: 10px;\r\n      }\r\n\r\n      .features-banner p {\r\n        text-align: center;\r\n      }\r\n\r\n      .features-title {\r\n        font-size: 1.45rem;\r\n        margin-bottom: 36px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"features-container\">\r\n\r\n    <!-- Top Banner -->\r\n    <div class=\"features-banner\">\r\n      <div class=\"features-banner-icon\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n      <p>\u0645\u0627\u0628\u0627\u062a\u0648\u060c \u06cc\u06a9 \u062a\u06cc\u0645 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648 \u0645\u0639\u062a\u0628\u0631 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0631\u0633\u0645\u06cc\u060c \u0641\u0627\u06a9\u062a\u0648\u0631 \u0642\u0627\u0646\u0648\u0646\u06cc \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0634\u0645\u0627 \u0647\u0645\u0647\u200c\u0627\u0633\u062a.<\/p>\r\n    <\/div>\r\n\r\n    <!-- Title -->\r\n    <h2 class=\"features-title\">\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u062f\u0631 \u0645\u0627\u0628\u0627\u062a\u0648<\/h2>\r\n\r\n    <!-- Cards -->\r\n    <div class=\"features-grid\">\r\n\r\n      <!-- 1 -->\r\n      <div class=\"feature-card\">\r\n        <div class=\"feature-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0637\u0631\u0627\u062d\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/h3>\r\n        <p>\u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0648 \u0627\u0645\u0646\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0647\u0648\u06cc\u062a \u0648 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627<\/p>\r\n      <\/div>\r\n\r\n      <!-- 2 -->\r\n      <div class=\"feature-card\">\r\n        <div class=\"feature-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0648\u0631\u062f\u067e\u0631\u0633 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/h3>\r\n        <p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u062f\u0631\u062a \u0648 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0648\u0631\u062f\u067e\u0631\u0633<\/p>\r\n      <\/div>\r\n\r\n      <!-- 3 -->\r\n      <div class=\"feature-card\">\r\n        <div class=\"feature-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0648 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0641\u0631\u0646\u062f\u0644\u06cc<\/h3>\r\n        <p>\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u200c\u0646\u0642\u0635 \u062f\u0631 \u0647\u0645\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644\u060c \u062a\u0628\u0644\u062a \u0648 \u062f\u0633\u06a9\u062a\u0627\u067e<\/p>\r\n      <\/div>\r\n\r\n      <!-- 4 -->\r\n      <div class=\"feature-card\">\r\n        <div class=\"feature-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0633\u0631\u0639\u062a \u0648 \u0627\u0645\u0646\u06cc\u062a \u0628\u0627\u0644\u0627<\/h3>\r\n        <p>\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a\u060c \u0627\u0645\u0646\u06cc\u062a \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631\u06cc \u0633\u0627\u06cc\u062a \u0634\u0645\u0627<\/p>\r\n      <\/div>\r\n\r\n      <!-- 5 -->\r\n      <div class=\"feature-card\">\r\n        <div class=\"feature-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0633\u0626\u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f<\/h3>\r\n        <p>\u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648<\/p>\r\n      <\/div>\r\n\r\n      <!-- 6 -->\r\n      <div class=\"feature-card\">\r\n        <div class=\"feature-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.7\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n        <h3>\u0622\u0645\u0648\u0632\u0634 \u0648 \u062a\u062d\u0648\u06cc\u0644<\/h3>\r\n        <p>\u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0645\u0644 \u06a9\u0627\u0631 \u0628\u0627 \u0633\u0627\u06cc\u062a \u0648 \u062a\u062d\u0648\u06cc\u0644 \u06a9\u0627\u0645\u0644 \u067e\u0631\u0648\u0698\u0647<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"wd-negative-gap elementor-section elementor-top-section elementor-element elementor-element-35b8441 elementor-section-boxed elementor-section-height-default elementor-section-height-default wd-section-disabled\" data-id=\"35b8441\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0cd8087\" data-id=\"0cd8087\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3bd7b3 elementor-widget elementor-widget-html\" data-id=\"e3bd7b3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"portfolio-section\" dir=\"rtl\">\r\n  <style>\r\n.portfolio-section {\r\n  background: #0f172a;\r\n  padding: 80px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n\r\n  \/* \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  margin-left: calc(-50vw + 50%) !important;\r\n  margin-right: calc(-50vw + 50%) !important;\r\n}\r\n\r\n    .portfolio-container {\r\n      max-width: 1140px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    \/* Header *\/\r\n    .portfolio-header {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      margin-bottom: 48px;\r\n      flex-wrap: wrap;\r\n      gap: 20px;\r\n    }\r\n\r\n    .portfolio-title {\r\n      font-size: 2rem;\r\n      font-weight: 700;\r\n      margin: 0;\r\n      color: #ffffff;\r\n      line-height: 1.4;\r\n    }\r\n\r\n    .portfolio-btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: transparent;\r\n      border: 1px solid rgba(255, 255, 255, 0.2);\r\n      color: #e2e8f0;\r\n      padding: 12px 24px;\r\n      border-radius: 50px;\r\n      font-size: 0.95rem;\r\n      font-weight: 500;\r\n      text-decoration: none;\r\n      transition: all 0.3s ease;\r\n      font-family: inherit;\r\n    }\r\n\r\n    .portfolio-btn:hover {\r\n      background: rgba(59, 130, 246, 0.15);\r\n      border-color: #3b82f6;\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .portfolio-btn svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    \/* Grid *\/\r\n    .portfolio-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 24px;\r\n    }\r\n\r\n    .portfolio-card {\r\n      background: #1e293b;\r\n      border-radius: 16px;\r\n      overflow: hidden;\r\n      border: 1px solid rgba(255, 255, 255, 0.06);\r\n      transition: all 0.3s ease;\r\n      text-decoration: none;\r\n      color: inherit;\r\n      display: block;\r\n    }\r\n\r\n    .portfolio-card:hover {\r\n      transform: translateY(-8px);\r\n      border-color: rgba(59, 130, 246, 0.35);\r\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\r\n    }\r\n\r\n    \/* Browser Mockup - Empty Placeholder *\/\r\n    .portfolio-image {\r\n      position: relative;\r\n      background: #0f172a;\r\n      padding: 12px 12px 0;\r\n      border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n    }\r\n\r\n    .browser-bar {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      margin-bottom: 10px;\r\n      padding: 0 4px;\r\n    }\r\n\r\n    .browser-dot {\r\n      width: 8px;\r\n      height: 8px;\r\n      border-radius: 50%;\r\n      background: #475569;\r\n    }\r\n\r\n    .browser-dot:nth-child(1) { background: #ef4444; }\r\n    .browser-dot:nth-child(2) { background: #eab308; }\r\n    .browser-dot:nth-child(3) { background: #22c55e; }\r\n\r\n    .image-placeholder {\r\n      width: 100%;\r\n      height: 180px;\r\n      background: #1e293b;\r\n      border-radius: 6px 6px 0 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #475569;\r\n      border: 1px dashed rgba(255, 255, 255, 0.08);\r\n    }\r\n\r\n    .image-placeholder svg {\r\n      width: 40px;\r\n      height: 40px;\r\n      opacity: 0.5;\r\n    }\r\n\r\n    \/* Card Content *\/\r\n    .portfolio-content {\r\n      padding: 20px 18px 22px;\r\n      text-align: center;\r\n    }\r\n\r\n    .portfolio-content h3 {\r\n      font-size: 1.1rem;\r\n      font-weight: 700;\r\n      margin: 0 0 6px;\r\n      color: #f1f5f9;\r\n    }\r\n\r\n    .portfolio-content span {\r\n      font-size: 0.85rem;\r\n      color: #94a3b8;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 992px) {\r\n      .portfolio-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n\r\n      .portfolio-title {\r\n        font-size: 1.65rem;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      .portfolio-section {\r\n        padding: 60px 16px;\r\n      }\r\n\r\n      .portfolio-header {\r\n        flex-direction: column;\r\n        text-align: center;\r\n      }\r\n\r\n      .portfolio-grid {\r\n        grid-template-columns: 1fr;\r\n        max-width: 400px;\r\n        margin: 0 auto;\r\n      }\r\n\r\n      .portfolio-title {\r\n        font-size: 1.45rem;\r\n      }\r\n\r\n      .image-placeholder {\r\n        height: 200px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"portfolio-container\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"portfolio-header\">\r\n      <h2 class=\"portfolio-title\">\u0646\u0645\u0648\u0646\u0647\u200c \u06a9\u0627\u0631\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/h2>\r\n      <a href=\"#\" class=\"portfolio-btn\">\r\n        \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" \/>\r\n        <\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Portfolio Grid -->\r\n    <div class=\"portfolio-grid\">\r\n\r\n      <!-- Card 1 -->\r\n      <a href=\"#\" class=\"portfolio-card\">\r\n        <div class=\"portfolio-image\">\r\n          <div class=\"browser-bar\">\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n          <\/div>\r\n          <div class=\"image-placeholder\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"portfolio-content\">\r\n          <h3>\u0634\u0631\u06a9\u062a \u0633\u0627\u0632\u0647<\/h3>\r\n          <span>\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- Card 2 -->\r\n      <a href=\"#\" class=\"portfolio-card\">\r\n        <div class=\"portfolio-image\">\r\n          <div class=\"browser-bar\">\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n          <\/div>\r\n          <div class=\"image-placeholder\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"portfolio-content\">\r\n          <h3>\u0635\u0646\u0627\u06cc\u0639 \u067e\u06cc\u0634\u0631\u0648<\/h3>\r\n          <span>\u0633\u0627\u06cc\u062a \u0628\u0627\u0632\u0631\u06af\u0627\u0646\u06cc<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- Card 3 -->\r\n      <a href=\"#\" class=\"portfolio-card\">\r\n        <div class=\"portfolio-image\">\r\n          <div class=\"browser-bar\">\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n          <\/div>\r\n          <div class=\"image-placeholder\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"portfolio-content\">\r\n          <h3>\u06a9\u0644\u06cc\u0646\u06cc\u06a9 \u0645\u0627\u0647\u0627\u0646<\/h3>\r\n          <span>\u062e\u062f\u0645\u0627\u062a \u062f\u0631\u0645\u0627\u0646\u06cc<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n      <!-- Card 4 -->\r\n      <a href=\"#\" class=\"portfolio-card\">\r\n        <div class=\"portfolio-image\">\r\n          <div class=\"browser-bar\">\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n            <span class=\"browser-dot\"><\/span>\r\n          <\/div>\r\n          <div class=\"image-placeholder\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"portfolio-content\">\r\n          <h3>\u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062f\u06a9\u0627\u0645\u0627\u0631\u06a9\u062a<\/h3>\r\n          <span>\u0633\u0627\u06cc\u062a \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc<\/span>\r\n        <\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"wd-negative-gap elementor-section elementor-top-section elementor-element elementor-element-876ed6b elementor-section-boxed elementor-section-height-default elementor-section-height-default wd-section-disabled\" data-id=\"876ed6b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6730fc8\" data-id=\"6730fc8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-91b8d33 elementor-widget elementor-widget-html\" data-id=\"91b8d33\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"why-us-section\" dir=\"rtl\">\r\n  <style>\r\n.why-us-section {\r\n  background: #0f172a;\r\n  padding: 90px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n  overflow: hidden;\r\n\r\n  \/* \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  margin-left: calc(-50vw + 50%) !important;\r\n  margin-right: calc(-50vw + 50%) !important;\r\n}\r\n\r\n    .why-us-container {\r\n      max-width: 1100px;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 70px;\r\n    }\r\n\r\n    \/* Left Side - Visual *\/\r\n    .why-visual {\r\n      flex: 0 0 400px;\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .visual-main {\r\n      width: 300px;\r\n      height: 360px;\r\n      background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);\r\n      border-radius: 32px;\r\n      border: 1px solid rgba(255, 255, 255, 0.07);\r\n      position: relative;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .visual-main::before {\r\n      content: '';\r\n      position: absolute;\r\n      width: 180px;\r\n      height: 180px;\r\n      background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 70%);\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n\r\n    .visual-icon {\r\n      width: 110px;\r\n      height: 110px;\r\n      background: rgba(59, 130, 246, 0.15);\r\n      border-radius: 30px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .visual-icon svg {\r\n      width: 54px;\r\n      height: 54px;\r\n    }\r\n\r\n    \/* Floating Icons *\/\r\n    .float-icon {\r\n      position: absolute;\r\n      width: 58px;\r\n      height: 58px;\r\n      background: #1e293b;\r\n      border-radius: 16px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n      border: 1px solid rgba(59, 130, 246, 0.3);\r\n      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);\r\n      z-index: 5;\r\n      animation: float 5s ease-in-out infinite;\r\n    }\r\n\r\n    .float-icon svg {\r\n      width: 26px;\r\n      height: 26px;\r\n    }\r\n\r\n    .float-1 {\r\n      top: 20px;\r\n      right: -5px;\r\n      animation-delay: 0s;\r\n    }\r\n\r\n    .float-2 {\r\n      top: 140px;\r\n      left: -25px;\r\n      animation-delay: 1.5s;\r\n    }\r\n\r\n    .float-3 {\r\n      bottom: 30px;\r\n      right: 15px;\r\n      animation-delay: 3s;\r\n    }\r\n\r\n    @keyframes float {\r\n      0%, 100% { transform: translateY(0); }\r\n      50% { transform: translateY(-14px); }\r\n    }\r\n\r\n    \/* Content Side *\/\r\n    .why-content {\r\n      flex: 1;\r\n    }\r\n\r\n    .why-title {\r\n      font-size: 2rem;\r\n      font-weight: 800;\r\n      margin: 0 0 40px;\r\n      line-height: 1.5;\r\n      color: #ffffff;\r\n    }\r\n\r\n    .why-list {\r\n      list-style: none;\r\n      padding: 0;\r\n      margin: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 20px;\r\n    }\r\n\r\n    .why-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 18px;\r\n      background: #1e293b;\r\n      padding: 22px 24px;\r\n      border-radius: 18px;\r\n      border: 1px solid rgba(255, 255, 255, 0.05);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .why-item:hover {\r\n      background: #243044;\r\n      border-color: rgba(59, 130, 246, 0.35);\r\n      transform: translateX(-8px);\r\n    }\r\n\r\n    .why-check {\r\n      width: 38px;\r\n      height: 38px;\r\n      background: rgba(34, 197, 94, 0.15);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #4ade80;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n    }\r\n\r\n    .why-check svg {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    .why-text h3 {\r\n      font-size: 1.15rem;\r\n      font-weight: 700;\r\n      margin: 0 0 6px;\r\n      color: #f1f5f9;\r\n    }\r\n\r\n    .why-text p {\r\n      font-size: 0.95rem;\r\n      line-height: 1.7;\r\n      color: #94a3b8;\r\n      margin: 0;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 920px) {\r\n      .why-us-container {\r\n        flex-direction: column;\r\n        gap: 50px;\r\n      }\r\n\r\n      .why-visual {\r\n        flex: none;\r\n      }\r\n\r\n      .why-title {\r\n        text-align: center;\r\n        font-size: 1.7rem;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 500px) {\r\n      .why-us-section {\r\n        padding: 60px 16px;\r\n      }\r\n\r\n      .visual-main {\r\n        width: 260px;\r\n        height: 320px;\r\n      }\r\n\r\n      .why-title {\r\n        font-size: 1.45rem;\r\n      }\r\n\r\n      .why-item {\r\n        padding: 18px 16px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"why-us-container\">\r\n\r\n    <!-- Visual Side -->\r\n    <div class=\"why-visual\">\r\n      <!-- Floating Icons -->\r\n      <div class=\"float-icon float-1\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"float-icon float-2\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"float-icon float-3\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <!-- Main Visual Box -->\r\n      <div class=\"visual-main\">\r\n        <div class=\"visual-icon\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Content -->\r\n    <div class=\"why-content\">\r\n      <h2 class=\"why-title\">\u0686\u0631\u0627 \u0645\u0627\u0628\u0627\u062a\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u0637\u0645\u0626\u0646\u200c\u062a\u0631\u06cc \u0627\u0633\u062a\u061f<\/h2>\r\n\r\n      <ul class=\"why-list\">\r\n        <li class=\"why-item\">\r\n          <div class=\"why-check\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"why-text\">\r\n            <h3>\u062a\u06cc\u0645 \u0645\u062a\u062e\u0635\u0635 \u0648 \u067e\u0627\u0633\u062e\u06af\u0648<\/h3>\r\n            <p>\u062a\u06cc\u0645\u06cc \u0627\u0632 \u0637\u0631\u0627\u062d\u0627\u0646 \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627 \u062a\u062c\u0631\u0628\u0647 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0634\u0645\u0627<\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"why-item\">\r\n          <div class=\"why-check\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"why-text\">\r\n            <h3>\u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0631\u0633\u0645\u06cc \u0648 \u0641\u0627\u06a9\u062a\u0648\u0631 \u0642\u0627\u0646\u0648\u0646\u06cc<\/h3>\r\n            <p>\u0627\u0631\u0627\u0626\u0647 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0634\u0641\u0627\u0641 \u0648 \u0641\u0627\u06a9\u062a\u0648\u0631 \u0631\u0633\u0645\u06cc \u0628\u0631\u0627\u06cc \u0634\u0631\u06a9\u062a\u200c\u0647\u0627<\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"why-item\">\r\n          <div class=\"why-check\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"why-text\">\r\n            <h3>\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648\u0627\u0642\u0639\u06cc \u0648 \u0628\u0644\u0646\u062f\u0645\u062f\u062a<\/h3>\r\n            <p>\u0628\u0639\u062f \u0627\u0632 \u062a\u062d\u0648\u06cc\u0644 \u0633\u0627\u06cc\u062a \u0647\u0645 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0634\u0645\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0648\u062f<\/p>\r\n          <\/div>\r\n        <\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"wd-negative-gap elementor-section elementor-top-section elementor-element elementor-element-01b033a elementor-section-boxed elementor-section-height-default elementor-section-height-default wd-section-disabled\" data-id=\"01b033a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3fe4800\" data-id=\"3fe4800\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1466908 elementor-widget elementor-widget-html\" data-id=\"1466908\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<section class=\"faq-section\" dir=\"rtl\">\r\n  <style>\r\n.faq-section {\r\n  background: #0f172a;\r\n  padding: 90px 20px;\r\n  font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;\r\n  color: #fff;\r\n\r\n  \/* \u062a\u0645\u0627\u0645\u200c\u0639\u0631\u0636 \u06a9\u0631\u062f\u0646 *\/\r\n  width: 100vw !important;\r\n  max-width: 100vw !important;\r\n  margin-left: calc(-50vw + 50%) !important;\r\n  margin-right: calc(-50vw + 50%) !important;\r\n}\r\n\r\n    .faq-section * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .faq-container {\r\n      max-width: 1000px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .faq-title {\r\n      text-align: center;\r\n      font-size: 2rem;\r\n      font-weight: 800;\r\n      margin: 0 0 50px;\r\n      color: #ffffff;\r\n    }\r\n\r\n    .faq-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 16px 24px;\r\n    }\r\n\r\n    .faq-item {\r\n      background: #1e293b;\r\n      border-radius: 14px;\r\n      border: 1px solid rgba(255, 255, 255, 0.06);\r\n      overflow: hidden;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .faq-item:hover {\r\n      border-color: rgba(59, 130, 246, 0.3);\r\n    }\r\n\r\n    .faq-question {\r\n      width: 100%;\r\n      background: transparent;\r\n      border: none;\r\n      padding: 20px 22px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 16px;\r\n      cursor: pointer;\r\n      color: #f1f5f9;\r\n      font-family: inherit;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      text-align: right;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .faq-question:hover {\r\n      color: #60a5fa;\r\n    }\r\n\r\n    .faq-icon {\r\n      width: 28px;\r\n      height: 28px;\r\n      background: rgba(59, 130, 246, 0.12);\r\n      border-radius: 8px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #60a5fa;\r\n      flex-shrink: 0;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .faq-icon svg {\r\n      width: 16px;\r\n      height: 16px;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .faq-item.active .faq-icon {\r\n      background: #3b82f6;\r\n      color: #fff;\r\n    }\r\n\r\n    .faq-item.active .faq-icon svg {\r\n      transform: rotate(45deg);\r\n    }\r\n\r\n    .faq-answer {\r\n      max-height: 0;\r\n      overflow: hidden;\r\n      transition: max-height 0.35s ease, padding 0.35s ease;\r\n    }\r\n\r\n    .faq-item.active .faq-answer {\r\n      max-height: 200px;\r\n    }\r\n\r\n    .faq-answer-inner {\r\n      padding: 0 22px 20px;\r\n      color: #94a3b8;\r\n      font-size: 0.95rem;\r\n      line-height: 1.8;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 768px) {\r\n      .faq-grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n\r\n      .faq-title {\r\n        font-size: 1.6rem;\r\n        margin-bottom: 36px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .faq-section {\r\n        padding: 60px 16px;\r\n      }\r\n\r\n      .faq-question {\r\n        padding: 18px 16px;\r\n        font-size: 0.95rem;\r\n      }\r\n\r\n      .faq-answer-inner {\r\n        padding: 0 16px 18px;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"faq-container\">\r\n    <h2 class=\"faq-title\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/h2>\r\n\r\n    <div class=\"faq-grid\">\r\n\r\n      <!-- Question 1 -->\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-question\">\r\n          <span>\u0645\u062f\u062a \u0632\u0645\u0627\u0646 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0686\u0642\u062f\u0631 \u0627\u0633\u062a\u061f<\/span>\r\n          <div class=\"faq-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">????<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Question 2 -->\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-question\">\r\n          <span>\u0622\u06cc\u0627 \u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0633\u0626\u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0647\u0633\u062a\u0646\u062f\u061f<\/span>\r\n          <div class=\"faq-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">????<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Question 3 -->\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-question\">\r\n          <span>\u0622\u06cc\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0631\u062f\u0627\u062e\u062a \u0627\u0642\u0633\u0627\u0637\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u061f<\/span>\r\n          <div class=\"faq-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">????<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Question 4 -->\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-question\">\r\n          <span>\u0622\u06cc\u0627 \u0622\u0645\u0648\u0632\u0634 \u06a9\u0627\u0631 \u0628\u0627 \u0633\u0627\u06cc\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u061f<\/span>\r\n          <div class=\"faq-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">????<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Question 5 -->\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-question\">\r\n          <span>\u0622\u06cc\u0627 \u0628\u0639\u062f \u0627\u0632 \u062a\u062d\u0648\u06cc\u0644 \u0647\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062f\u0627\u0631\u06cc\u062f\u061f<\/span>\r\n          <div class=\"faq-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">????<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Question 6 -->\r\n      <div class=\"faq-item\">\r\n        <button class=\"faq-question\">\r\n          <span>\u0647\u0632\u06cc\u0646\u0647 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0686\u0642\u062f\u0631 \u0627\u0633\u062a\u061f<\/span>\r\n          <div class=\"faq-icon\">\r\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/button>\r\n        <div class=\"faq-answer\">\r\n          <div class=\"faq-answer-inner\">????<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.querySelectorAll('.faq-question').forEach(button => {\r\n      button.addEventListener('click', () => {\r\n        const item = button.parentElement;\r\n        const isActive = item.classList.contains('active');\r\n\r\n        \/\/ Close all\r\n        document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('active'));\r\n\r\n        \/\/ Open clicked if it was closed\r\n        if (!isActive) {\r\n          item.classList.add('active');\r\n        }\r\n      });\r\n    });\r\n  <\/script>\r\n<\/section>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc \u0648 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0628\u0627 \u0648\u0631\u062f\u067e\u0631\u0633 \u0648\u0628\u0633\u0627\u06cc\u062a \u0634\u0645\u0627\u060c \u0627\u0648\u0644\u06cc\u0646 \u0646\u06af\u0627\u0647 \u0645\u0634\u062a\u0631\u06cc \u0628\u0647 \u0628\u0631\u0646\u062f \u0634\u0645\u0627\u0633\u062a. \u0645\u0627 \u0628\u0627<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15434","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mabato.ir\/index.php?rest_route=\/wp\/v2\/pages\/15434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mabato.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mabato.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mabato.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mabato.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15434"}],"version-history":[{"count":37,"href":"https:\/\/mabato.ir\/index.php?rest_route=\/wp\/v2\/pages\/15434\/revisions"}],"predecessor-version":[{"id":15498,"href":"https:\/\/mabato.ir\/index.php?rest_route=\/wp\/v2\/pages\/15434\/revisions\/15498"}],"wp:attachment":[{"href":"https:\/\/mabato.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}