{"id":14616,"date":"2025-12-12T22:12:42","date_gmt":"2025-12-12T22:12:42","guid":{"rendered":"https:\/\/thetouch.sa\/%d8%a7%d8%ad%d8%b5%d9%84-%d8%b9%d9%84%d9%89-%d8%b9%d8%b1%d8%b6-%d8%a3%d8%b3%d8%b9%d8%a7%d8%b1\/"},"modified":"2026-07-21T19:08:00","modified_gmt":"2026-07-21T19:08:00","slug":"%d8%a7%d8%ad%d8%b5%d9%84-%d8%b9%d9%84%d9%89-%d8%b9%d8%b1%d8%b6-%d8%a3%d8%b3%d8%b9%d8%a7%d8%b1","status":"publish","type":"page","link":"https:\/\/thetouch.sa\/ar\/%d8%a7%d8%ad%d8%b5%d9%84-%d8%b9%d9%84%d9%89-%d8%b9%d8%b1%d8%b6-%d8%a3%d8%b3%d8%b9%d8%a7%d8%b1\/","title":{"rendered":"\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0639\u0631\u0636 \u0623\u0633\u0639\u0627\u0631"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14616\" class=\"elementor elementor-14616 elementor-14564\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b783de6 e-flex e-con-boxed e-con e-parent\" data-id=\"b783de6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5107889 e-flex e-con-boxed e-con e-parent\" data-id=\"5107889\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0917bb elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"f0917bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>.quote-hero {\r\n    position: relative;\r\n    background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);\r\n    min-height: 100vh;\r\n    width: 100vw;\r\n    margin-left: calc(-50vw + 50%);\r\n    margin-right: calc(-50vw + 50%);\r\n    padding: 120px 20px 80px;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  \/* Enhanced Background Animations *\/\r\n  .quote-hero-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* Animated Gradient Mesh *\/\r\n  .gradient-mesh {\r\n    position: absolute;\r\n    width: 200%;\r\n    height: 200%;\r\n    top: -50%;\r\n    left: -50%;\r\n    background: \r\n      radial-gradient(circle at 20% 50%, rgba(90, 45, 130, 0.4) 0%, transparent 50%),\r\n      radial-gradient(circle at 80% 80%, rgba(225, 48, 108, 0.3) 0%, transparent 50%),\r\n      radial-gradient(circle at 40% 20%, rgba(138, 43, 226, 0.2) 0%, transparent 50%);\r\n    animation: meshMove 20s ease-in-out infinite;\r\n  }\r\n\r\n  @keyframes meshMove {\r\n    0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n    33% { transform: translate(-5%, 5%) rotate(120deg); }\r\n    66% { transform: translate(5%, -5%) rotate(240deg); }\r\n  }\r\n\r\n  \/* Floating Orbs *\/\r\n  .floating-orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(60px);\r\n    opacity: 0.6;\r\n    animation: float 15s ease-in-out infinite;\r\n  }\r\n\r\n  .floating-orb:nth-child(1) {\r\n    width: 400px;\r\n    height: 400px;\r\n    background: radial-gradient(circle, rgba(90, 45, 130, 0.8) 0%, transparent 70%);\r\n    top: 10%;\r\n    left: 10%;\r\n    animation-delay: 0s;\r\n    animation-duration: 20s;\r\n  }\r\n\r\n  .floating-orb:nth-child(2) {\r\n    width: 350px;\r\n    height: 350px;\r\n    background: radial-gradient(circle, rgba(225, 48, 108, 0.7) 0%, transparent 70%);\r\n    bottom: 15%;\r\n    right: 15%;\r\n    animation-delay: 3s;\r\n    animation-duration: 18s;\r\n  }\r\n\r\n  .floating-orb:nth-child(3) {\r\n    width: 300px;\r\n    height: 300px;\r\n    background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, transparent 70%);\r\n    top: 50%;\r\n    right: 10%;\r\n    animation-delay: 6s;\r\n    animation-duration: 22s;\r\n  }\r\n\r\n  @keyframes float {\r\n    0%, 100% { transform: translate(0, 0) scale(1); }\r\n    33% { transform: translate(30px, -30px) scale(1.1); }\r\n    66% { transform: translate(-30px, 30px) scale(0.9); }\r\n  }\r\n\r\n  \/* Particles *\/\r\n  .bg-particle {\r\n    position: absolute;\r\n    background: white;\r\n    border-radius: 50%;\r\n    animation: particleRise 12s linear infinite;\r\n  }\r\n\r\n  .bg-particle:nth-child(4) {\r\n    width: 8px;\r\n    height: 8px;\r\n    left: 10%;\r\n    bottom: -50px;\r\n    animation-delay: 0s;\r\n    box-shadow: 0 0 20px rgba(225, 48, 108, 0.8);\r\n  }\r\n\r\n  .bg-particle:nth-child(5) {\r\n    width: 6px;\r\n    height: 6px;\r\n    left: 30%;\r\n    bottom: -50px;\r\n    animation-delay: 2s;\r\n    box-shadow: 0 0 15px rgba(90, 45, 130, 0.8);\r\n  }\r\n\r\n  .bg-particle:nth-child(6) {\r\n    width: 10px;\r\n    height: 10px;\r\n    left: 50%;\r\n    bottom: -50px;\r\n    animation-delay: 4s;\r\n    box-shadow: 0 0 25px rgba(138, 43, 226, 0.8);\r\n  }\r\n\r\n  .bg-particle:nth-child(7) {\r\n    width: 7px;\r\n    height: 7px;\r\n    left: 70%;\r\n    bottom: -50px;\r\n    animation-delay: 6s;\r\n    box-shadow: 0 0 18px rgba(225, 48, 108, 0.8);\r\n  }\r\n\r\n  .bg-particle:nth-child(8) {\r\n    width: 9px;\r\n    height: 9px;\r\n    left: 90%;\r\n    bottom: -50px;\r\n    animation-delay: 8s;\r\n    box-shadow: 0 0 22px rgba(90, 45, 130, 0.8);\r\n  }\r\n\r\n  @keyframes particleRise {\r\n    0% {\r\n      transform: translateY(0) rotate(0deg);\r\n      opacity: 0;\r\n    }\r\n    10% {\r\n      opacity: 1;\r\n    }\r\n    90% {\r\n      opacity: 1;\r\n    }\r\n    100% {\r\n      transform: translateY(-100vh) rotate(720deg);\r\n      opacity: 0;\r\n    }\r\n  }\r\n\r\n  \/* Pulsing Rings *\/\r\n  .pulse-ring {\r\n    position: absolute;\r\n    border: 2px solid rgba(225, 48, 108, 0.3);\r\n    border-radius: 50%;\r\n    animation: pulseExpand 4s ease-out infinite;\r\n  }\r\n\r\n  .pulse-ring:nth-child(9) {\r\n    width: 300px;\r\n    height: 300px;\r\n    top: 20%;\r\n    left: 60%;\r\n    animation-delay: 0s;\r\n  }\r\n\r\n  .pulse-ring:nth-child(10) {\r\n    width: 400px;\r\n    height: 400px;\r\n    bottom: 25%;\r\n    left: 20%;\r\n    animation-delay: 2s;\r\n  }\r\n\r\n  @keyframes pulseExpand {\r\n    0% {\r\n      transform: scale(0.8);\r\n      opacity: 0.8;\r\n    }\r\n    50% {\r\n      opacity: 0.4;\r\n    }\r\n    100% {\r\n      transform: scale(1.5);\r\n      opacity: 0;\r\n    }\r\n  }\r\n\r\n  \/* Content *\/\r\n  .quote-hero-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 1200px;\r\n    text-align: center;\r\n  }\r\n\r\n  .quote-hero-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n    padding: 12px 24px;\r\n    border-radius: 50px;\r\n    color: white;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    margin-bottom: 30px;\r\n    animation: fadeInDown 0.8s ease-out;\r\n  }\r\n\r\n  .quote-hero-badge::before {\r\n    content: \"\u2728\";\r\n    animation: rotate 3s linear infinite;\r\n  }\r\n\r\n  @keyframes rotate {\r\n    from { transform: rotate(0deg); }\r\n    to { transform: rotate(360deg); }\r\n  }\r\n\r\n  .quote-hero h1 {\r\n    font-size: 72px;\r\n    font-weight: 800;\r\n    line-height: 1.1;\r\n    color: white;\r\n    margin-bottom: 24px;\r\n    animation: fadeInUp 0.8s ease-out 0.2s both;\r\n  }\r\n\r\n  .quote-hero h1 .gradient-text {\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    animation: gradientShift 3s ease infinite;\r\n  }\r\n\r\n  @keyframes gradientShift {\r\n    0%, 100% { filter: hue-rotate(0deg); }\r\n    50% { filter: hue-rotate(20deg); }\r\n  }\r\n\r\n  .quote-hero-description {\r\n    font-size: 20px;\r\n    color: rgba(255, 255, 255, 0.8);\r\n    max-width: 700px;\r\n    margin: 0 auto 40px;\r\n    line-height: 1.6;\r\n    animation: fadeInUp 0.8s ease-out 0.4s both;\r\n  }\r\n\r\n  .quote-hero-stats {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 60px;\r\n    flex-wrap: wrap;\r\n    animation: fadeInUp 0.8s ease-out 0.6s both;\r\n  }\r\n\r\n  .quote-stat {\r\n    text-align: center;\r\n  }\r\n\r\n  .quote-stat-number {\r\n    font-size: 48px;\r\n    font-weight: 800;\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    font-family: 'Inter', sans-serif;\r\n    line-height: 1.3;\r\n    padding: 8px 0;\r\n  }\r\n\r\n  .quote-stat-label {\r\n    font-size: 14px;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  @keyframes fadeInDown {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(-30px);\r\n    }\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  @keyframes fadeInUp {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(30px);\r\n    }\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .quote-hero {\r\n      padding: 80px 20px 60px;\r\n      min-height: 80vh;\r\n    }\r\n\r\n    .quote-hero h1 {\r\n      font-size: 42px;\r\n    }\r\n\r\n    .quote-hero-description {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .quote-hero-stats {\r\n      gap: 30px;\r\n    }\r\n\r\n    .quote-stat-number {\r\n      font-size: 36px;\r\n      line-height: 1.3;\r\n      padding: 8px 0;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"quote-hero\">\r\n  <div class=\"quote-hero-bg\">\r\n    <div class=\"gradient-mesh\"><\/div>\r\n    <div class=\"floating-orb\"><\/div>\r\n    <div class=\"floating-orb\"><\/div>\r\n    <div class=\"floating-orb\"><\/div>\r\n    <div class=\"bg-particle\"><\/div>\r\n    <div class=\"bg-particle\"><\/div>\r\n    <div class=\"bg-particle\"><\/div>\r\n    <div class=\"bg-particle\"><\/div>\r\n    <div class=\"bg-particle\"><\/div>\r\n    <div class=\"pulse-ring\"><\/div>\r\n    <div class=\"pulse-ring\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"quote-hero-content\">\r\n    <div class=\"quote-hero-badge\">\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629 <\/div>\r\n    \r\n    <h1>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 <span class=\"gradient-text\">\u0639\u0631\u0636 \u0627\u0644\u0633\u0639\u0631 <\/span><br\/>\u0641\u064a \u062f\u0642\u0627\u0626\u0642<\/h1>\r\n    \r\n    <p class=\"quote-hero-description\">\u062d\u0648\u0651\u0644 \u0631\u0624\u064a\u062a\u0643 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639. \u0634\u0627\u0631\u0643 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0633\u064a\u0642\u0648\u0645 \u0641\u0631\u064a\u0642\u0646\u0627 \u0627\u0644\u0645\u062a\u062e\u0635\u0635 \u0628\u0625\u0639\u062f\u0627\u062f \u062d\u0644 \u0645\u062e\u0635\u0635 \u064a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0627\u0644\u0641\u0631\u064a\u062f\u0629.<\/p>\r\n    \r\n    <div class=\"quote-hero-stats\">\r\n      <div class=\"quote-stat\">\r\n        <span class=\"quote-stat-number\">24 \u0633\u0627\u0639\u0629<\/span>\r\n        <span class=\"quote-stat-label\">\u0648\u0642\u062a \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629<\/span>\r\n      <\/div>\r\n      <div class=\"quote-stat\">\r\n        <span class=\"quote-stat-number\">350+<\/span>\r\n        <span class=\"quote-stat-label\">\u0645\u0634\u0631\u0648\u0639 \u0645\u0646\u062c\u0632<\/span>\r\n      <\/div>\r\n      <div class=\"quote-stat\">\r\n        <span class=\"quote-stat-number\">100%<\/span>\r\n        <span class=\"quote-stat-label\">\u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const hero = document.querySelector('.quote-hero');\r\n    const orbs = document.querySelectorAll('.floating-orb');\r\n    \r\n    hero.addEventListener('mousemove', (e) => {\r\n      const x = (e.clientX \/ window.innerWidth - 0.5) * 50;\r\n      const y = (e.clientY \/ window.innerHeight - 0.5) * 50;\r\n      \r\n      orbs.forEach((orb, index) => {\r\n        const speed = (index + 1) * 0.3;\r\n        orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`;\r\n      });\r\n    });\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-20590a3 e-con-full e-flex e-con e-parent\" data-id=\"20590a3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38df15a elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"38df15a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap');\n\n  .ts-ar-section {\n    position: relative;\n    background: white;\n    width: 100vw;\n    margin-left: calc(-50vw + 50%);\n    margin-right: calc(-50vw + 50%);\n    padding: 80px 40px;\n    overflow: hidden;\n    direction: rtl;\n    text-align: right;\n    font-family: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, sans-serif;\n  }\n  .ts-ar-bg { position: absolute; inset: 0; overflow: hidden; z-index: 1; }\n  .ts-ar-grid {\n    position: absolute; width: 100%; height: 100%;\n    background-image:\n      linear-gradient(rgba(90,45,130,0.03) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(90,45,130,0.03) 1px, transparent 1px);\n    background-size: 50px 50px; animation: tsGridMove 20s linear infinite;\n  }\n  @keyframes tsGridMove { 0%{transform:translate(0,0);} 100%{transform:translate(50px,50px);} }\n  .ts-ar-shape { position:absolute; border-radius:50%; animation: tsShapeFloat 20s ease-in-out infinite; }\n  .ts-ar-shape:nth-child(2){width:300px;height:300px;background:radial-gradient(circle,rgba(90,45,130,0.05) 0%,transparent 70%);top:10%;right:5%;}\n  .ts-ar-shape:nth-child(3){width:250px;height:250px;background:radial-gradient(circle,rgba(225,48,108,0.05) 0%,transparent 70%);bottom:10%;left:5%;animation-delay:5s;}\n  .ts-ar-shape:nth-child(4){width:200px;height:200px;background:radial-gradient(circle,rgba(138,43,226,0.05) 0%,transparent 70%);top:50%;left:10%;animation-delay:10s;}\n  @keyframes tsShapeFloat { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(20px,-20px) rotate(120deg);} 66%{transform:translate(-20px,20px) rotate(240deg);} }\n  .ts-ar-container { position:relative; z-index:2; max-width:1600px; margin:0 auto; }\n  .ts-ar-header { text-align:center; margin-bottom:60px; }\n  .ts-ar-header h2 { font-size:48px; font-weight:800; color:#1a0b2e; margin-bottom:16px; }\n  .ts-ar-header h2 .ts-grad { background:linear-gradient(135deg,#E1306C 0%,#5A2D82 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }\n  .ts-ar-header p { font-size:18px; color:#666; max-width:600px; margin:0 auto; }\n  .ts-ar-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }\n  .ts-ar-form { background:white; border:1px solid rgba(90,45,130,0.1); border-radius:24px; padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.05); transition:all 0.3s ease; }\n  .ts-ar-form:hover { box-shadow:0 30px 80px rgba(90,45,130,0.1); transform:translateY(-5px); }\n  .ts-fg { margin-bottom:24px; }\n  .ts-fg label { display:block; font-size:14px; font-weight:700; color:#1a0b2e; margin-bottom:8px; }\n  .ts-fg label span { color:#E1306C; }\n  .ts-fg label .ts-opt { color:#999; font-weight:400; font-size:12px; }\n  .ts-fg input, .ts-fg select, .ts-fg textarea {\n    width:100%; padding:16px 20px; border:2px solid rgba(90,45,130,0.1); border-radius:12px;\n    font-size:16px; color:#1a0b2e; background:white; transition:all 0.3s ease; box-sizing:border-box;\n    font-family:inherit; direction:rtl; text-align:right;\n  }\n  .ts-fg input[type=\"tel\"], .ts-fg input[type=\"email\"] { direction:ltr; text-align:right; }\n  .ts-fg input:focus, .ts-fg select:focus, .ts-fg textarea:focus {\n    outline:none; border-color:#5A2D82; box-shadow:0 0 0 4px rgba(90,45,130,0.1);\n  }\n  .ts-fg textarea { resize:vertical; min-height:90px; }\n  .ts-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }\n  .ts-submit {\n    width:100%; padding:18px 40px; background:linear-gradient(135deg,#E1306C 0%,#5A2D82 100%);\n    color:white; border:none; border-radius:12px; font-size:18px; font-weight:700; cursor:pointer; transition:all 0.3s ease;\n    font-family:inherit;\n  }\n  .ts-submit:hover { transform:translateY(-2px); box-shadow:0 15px 40px rgba(225,48,108,0.4); }\n  .ts-submit:disabled { opacity:0.7; cursor:not-allowed; }\n  .ts-hint { text-align:center; font-size:13px; color:#999; margin-top:14px; }\n  .ts-feedback { margin-top:20px; padding:16px 20px; border-radius:12px; font-size:15px; font-weight:700; text-align:center; display:none; }\n  .ts-feedback.ok { display:block; background:rgba(34,197,94,0.1); color:#15803d; border:1px solid rgba(34,197,94,0.3); }\n  .ts-feedback.err { display:block; background:rgba(239,68,68,0.1); color:#b91c1c; border:1px solid rgba(239,68,68,0.3); }\n  .ts-services { position:sticky; top:100px; }\n  .ts-services h3 { font-size:28px; font-weight:700; color:#1a0b2e; margin-bottom:24px; }\n  .ts-service { background:linear-gradient(135deg,rgba(90,45,130,0.05),rgba(225,48,108,0.05)); border:1px solid rgba(90,45,130,0.1); border-radius:16px; padding:24px; margin-bottom:16px; transition:all 0.3s ease; }\n  .ts-service:hover { transform:translateX(-10px); box-shadow:0 10px 30px rgba(90,45,130,0.15); }\n  .ts-service-icon { width:50px; height:50px; background:linear-gradient(135deg,#E1306C 0%,#5A2D82 100%); border-radius:12px; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; margin-bottom:16px; }\n  .ts-service h4 { font-size:18px; font-weight:700; color:#1a0b2e; margin-bottom:8px; }\n  .ts-service p { font-size:14px; color:#666; line-height:1.7; }\n  @media (max-width:968px){\n    .ts-ar-wrapper{grid-template-columns:1fr;gap:40px;}\n    .ts-services{position:static;}\n    .ts-row{grid-template-columns:1fr;}\n    .ts-ar-header h2{font-size:34px;}\n  }\n<\/style>\n\n<div class=\"ts-ar-section\">\n  <div class=\"ts-ar-bg\">\n    <div class=\"ts-ar-grid\"><\/div>\n    <div class=\"ts-ar-shape\"><\/div>\n    <div class=\"ts-ar-shape\"><\/div>\n    <div class=\"ts-ar-shape\"><\/div>\n  <\/div>\n  <div class=\"ts-ar-container\">\n    <div class=\"ts-ar-header\">\n      <h2>\u0623\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 <span class=\"ts-grad\">\u0645\u0634\u0631\u0648\u0639\u0643<\/span><\/h2>\n      <p>\u0627\u062a\u0631\u0643 \u0628\u064a\u0627\u0646\u0627\u062a\u0643 \u0648\u0633\u0646\u0639\u0627\u0648\u062f \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u062e\u0644\u0627\u0644 \u0662\u0664 \u0633\u0627\u0639\u0629 \u2014 \u0644\u0627 \u064a\u0633\u062a\u063a\u0631\u0642 \u0633\u0648\u0649 \u062f\u0642\u064a\u0642\u0629.<\/p>\n    <\/div>\n    <div class=\"ts-ar-wrapper\">\n      <div class=\"ts-ar-form\">\n        <form id=\"tsArForm\">\n          <input type=\"text\" name=\"_honey\" style=\"display:none;\" tabindex=\"-1\" autocomplete=\"off\">\n\n          <div class=\"ts-row\">\n            <div class=\"ts-fg\">\n              <label>\u0627\u0644\u0627\u0633\u0645 <span>*<\/span><\/label>\n              <input type=\"text\" name=\"\u0627\u0644\u0627\u0633\u0645\" placeholder=\"\u0645\u062b\u0627\u0644: \u0645\u062d\u0645\u062f \u0627\u0644\u0639\u062a\u064a\u0628\u064a\" required>\n            <\/div>\n            <div class=\"ts-fg\">\n              <label>\u0627\u0644\u062c\u0648\u0627\u0644 \/ \u0648\u0627\u062a\u0633\u0627\u0628 <span>*<\/span><\/label>\n              <input type=\"tel\" name=\"\u0627\u0644\u062c\u0648\u0627\u0644\" placeholder=\"+966 5X XXX XXXX\" required>\n            <\/div>\n          <\/div>\n          <div class=\"ts-row\">\n            <div class=\"ts-fg\">\n              <label>\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a <span>*<\/span><\/label>\n              <input type=\"email\" name=\"\u0627\u0644\u0628\u0631\u064a\u062f\" placeholder=\"name@example.com\" required>\n            <\/div>\n            <div class=\"ts-fg\">\n              <label>\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 <span>*<\/span><\/label>\n              <select name=\"\u0627\u0644\u062e\u062f\u0645\u0629\" required>\n                <option value=\"\">\u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u062f\u0645\u0629<\/option>\n                <option>\u0627\u0644\u062a\u062c\u0627\u0631\u0628 \u0648\u0627\u0644\u062a\u0641\u0639\u064a\u0644\u0627\u062a<\/option>\n                <option>\u0627\u0644\u0623\u062c\u0646\u062d\u0629 \u0648\u0627\u0644\u0645\u0639\u0627\u0631\u0636<\/option>\n                <option>\u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0627\u0644\u0647\u0648\u064a\u0629 \u0648\u0627\u0644\u0625\u0628\u062f\u0627\u0639<\/option>\n                <option>\u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0648\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/option>\n                <option>\u0627\u0644\u0637\u0628\u0627\u0639\u0629 \u0648\u0627\u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u062f\u0639\u0627\u0626\u064a<\/option>\n                <option>\u062a\u0635\u0646\u064a\u0639 \u0627\u0644\u0623\u0643\u0631\u064a\u0644\u064a\u0643 \u0648\u0627\u0644\u062e\u0634\u0628<\/option>\n                <option>\u0627\u0644\u0645\u0646\u0638\u0645\u0648\u0646 \u0648\u0633\u0641\u0631\u0627\u0621 \u0627\u0644\u0639\u0644\u0627\u0645\u0629<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n          <div class=\"ts-fg\">\n            <label>\u0645\u0644\u0627\u062d\u0638\u0629 \u0633\u0631\u064a\u0639\u0629 <span class=\"ts-opt\">(\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/span><\/label>\n            <textarea name=\"\u0645\u0644\u0627\u062d\u0638\u0629\" placeholder=\"\u0627\u0643\u062a\u0628 \u0644\u0646\u0627 \u0628\u0627\u062e\u062a\u0635\u0627\u0631 \u0639\u0646 \u0645\u0634\u0631\u0648\u0639\u0643...\"><\/textarea>\n          <\/div>\n          <button type=\"submit\" class=\"ts-submit\" id=\"tsArBtn\">\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0639\u0631\u0636 \u0633\u0639\u0631\u0643 \u0627\u0644\u0645\u062c\u0627\u0646\u064a<\/button>\n          <p class=\"ts-hint\">\ud83d\udd12 \u0628\u064a\u0627\u0646\u0627\u062a\u0643 \u0622\u0645\u0646\u0629 \u0648\u0644\u0646 \u062a\u064f\u0634\u0627\u0631\u0643 \u0645\u0639 \u0623\u064a \u062c\u0647\u0629.<\/p>\n          <div class=\"ts-feedback\" id=\"tsArFeedback\"><\/div>\n        <\/form>\n      <\/div>\n      <div class=\"ts-services\">\n        <h3>\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/h3>\n        <div class=\"ts-service\">\n          <div class=\"ts-service-icon\">\ud83c\udfaa<\/div>\n          <h4>\u0627\u0644\u062a\u062c\u0627\u0631\u0628 \u0648\u0627\u0644\u062a\u0641\u0639\u064a\u0644\u0627\u062a<\/h4>\n          <p>\u0646\u0635\u0646\u0639 \u062a\u062c\u0627\u0631\u0628 \u0639\u0644\u0627\u0645\u0629 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649 \u0648\u062a\u0641\u0639\u064a\u0644\u0627\u062a \u062a\u062a\u0631\u0643 \u0623\u062b\u0631\u0627\u064b.<\/p>\n        <\/div>\n        <div class=\"ts-service\">\n          <div class=\"ts-service-icon\">\ud83c\udfe2<\/div>\n          <h4>\u0627\u0644\u0623\u062c\u0646\u062d\u0629 \u0648\u0627\u0644\u0645\u0639\u0627\u0631\u0636<\/h4>\n          <p>\u0623\u062c\u0646\u062d\u0629 \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u062a\u0623\u0633\u0631 \u062c\u0645\u0647\u0648\u0631\u0643 \u0648\u062a\u0628\u0631\u0632 \u0639\u0644\u0627\u0645\u062a\u0643.<\/p>\n        <\/div>\n        <div class=\"ts-service\">\n          <div class=\"ts-service-icon\">\ud83c\udfa8<\/div>\n          <h4>\u0627\u0633\u062a\u0648\u062f\u064a\u0648 \u0627\u0644\u0647\u0648\u064a\u0629<\/h4>\n          <p>\u062d\u0644\u0648\u0644 \u0647\u0648\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0645\u0646 \u0627\u0644\u0641\u0643\u0631\u0629 \u062d\u062a\u0649 \u0627\u0644\u062a\u0646\u0641\u064a\u0630.<\/p>\n        <\/div>\n        <div class=\"ts-service\">\n          <div class=\"ts-service-icon\">\ud83d\udcf1<\/div>\n          <h4>\u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h4>\n          <p>\u0645\u062d\u062a\u0648\u0649 \u062c\u0630\u0651\u0627\u0628 \u064a\u062d\u0642\u0642 \u0646\u062a\u0627\u0626\u062c \u0648\u0646\u0645\u0648\u0627\u064b \u062d\u0642\u064a\u0642\u064a\u0627\u064b.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function () {\n    var form = document.getElementById('tsArForm');\n    var btn = document.getElementById('tsArBtn');\n    var feedback = document.getElementById('tsArFeedback');\n    if (!form) return;\n    form.addEventListener('submit', function (e) {\n      e.preventDefault();\n      feedback.className = 'ts-feedback';\n      feedback.textContent = '';\n      btn.disabled = true;\n      var original = btn.textContent;\n      btn.textContent = '\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0631\u0633\u0627\u0644...';\n\n      var data = {};\n      new FormData(form).forEach(function (v, k) { data[k] = v; });\n      data._subject = '\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u062c\u062f\u064a\u062f \u0645\u0646 \u0645\u0648\u0642\u0639 The Touch (\u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629)';\n      data._template = 'table';\n\n      \/\/ ==============================================================\n      \/\/ \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u062a\u0635\u0644 \u0625\u0644\u0649 \u0647\u0630\u0627 \u0627\u0644\u0625\u064a\u0645\u064a\u0644. \u063a\u064a\u0651\u0631\u0647 \u0625\u0630\u0627 \u0631\u063a\u0628\u062a.\n      \/\/ ==============================================================\n      fetch('https:\/\/formsubmit.co\/ajax\/sales@thetouch.sa', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json', 'Accept': 'application\/json' },\n        body: JSON.stringify(data)\n      })\n      .then(function (r) { return r.json(); })\n      .then(function (result) {\n        if (result.success === 'true' || result.success === true) {\n          feedback.className = 'ts-feedback ok';\n          feedback.textContent = '\u2705 \u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0637\u0644\u0628\u0643 \u0628\u0646\u062c\u0627\u062d! \u0633\u0646\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u062e\u0644\u0627\u0644 \u0662\u0664 \u0633\u0627\u0639\u0629.';\n          form.reset();\n        } else {\n          feedback.className = 'ts-feedback err';\n          feedback.textContent = '\u26a0\ufe0f ' + (result.message || '\u062d\u062f\u062b \u062e\u0637\u0623\u060c \u062d\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.');\n        }\n      })\n      .catch(function () {\n        feedback.className = 'ts-feedback err';\n        feedback.textContent = '\u26a0\ufe0f \u062a\u0639\u0630\u0651\u0631 \u0627\u0644\u0625\u0631\u0633\u0627\u0644\u060c \u062a\u0623\u0643\u062f \u0645\u0646 \u0627\u062a\u0635\u0627\u0644\u0643 \u0628\u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0648\u062d\u0627\u0648\u0644 \u0645\u062c\u062f\u062f\u0627\u064b.';\n      })\n      .then(function () {\n        btn.disabled = false;\n        btn.textContent = original;\n      });\n    });\n  })();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5d1ba6a e-flex e-con-boxed e-con e-child\" data-id=\"5d1ba6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7f5e9f elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"f7f5e9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>.quote-benefits {\r\n    position: relative;\r\n    background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 100%);\r\n    width: 100vw;\r\n    margin-left: calc(-50vw + 50%);\r\n    margin-right: calc(-50vw + 50%);\r\n    padding: 100px 20px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* Background Animations *\/\r\n  .benefits-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* Wave Animation *\/\r\n  .wave-line {\r\n    position: absolute;\r\n    width: 200%;\r\n    height: 200px;\r\n    background: linear-gradient(90deg, \r\n      transparent 0%, \r\n      rgba(225, 48, 108, 0.1) 25%, \r\n      rgba(90, 45, 130, 0.1) 50%, \r\n      rgba(225, 48, 108, 0.1) 75%, \r\n      transparent 100%);\r\n    animation: waveMove 15s linear infinite;\r\n  }\r\n\r\n  .wave-line:nth-child(1) {\r\n    top: 20%;\r\n    animation-delay: 0s;\r\n  }\r\n\r\n  .wave-line:nth-child(2) {\r\n    top: 50%;\r\n    animation-delay: 5s;\r\n  }\r\n\r\n  .wave-line:nth-child(3) {\r\n    top: 80%;\r\n    animation-delay: 10s;\r\n  }\r\n\r\n  @keyframes waveMove {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(-50%); }\r\n  }\r\n\r\n  \/* Floating Orbs *\/\r\n  .benefits-orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(80px);\r\n    animation: orbFloat 20s ease-in-out infinite;\r\n  }\r\n\r\n  .benefits-orb:nth-child(4) {\r\n    width: 400px;\r\n    height: 400px;\r\n    background: radial-gradient(circle, rgba(225, 48, 108, 0.3) 0%, transparent 70%);\r\n    top: 10%;\r\n    left: 10%;\r\n    animation-delay: 0s;\r\n  }\r\n\r\n  .benefits-orb:nth-child(5) {\r\n    width: 350px;\r\n    height: 350px;\r\n    background: radial-gradient(circle, rgba(90, 45, 130, 0.3) 0%, transparent 70%);\r\n    bottom: 10%;\r\n    right: 10%;\r\n    animation-delay: 7s;\r\n  }\r\n\r\n  @keyframes orbFloat {\r\n    0%, 100% { transform: translate(0, 0) scale(1); }\r\n    50% { transform: translate(50px, -50px) scale(1.2); }\r\n  }\r\n\r\n  \/* Particles *\/\r\n  .benefits-particle {\r\n    position: absolute;\r\n    width: 8px;\r\n    height: 8px;\r\n    background: white;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);\r\n    animation: particleUp 12s linear infinite;\r\n  }\r\n\r\n  .benefits-particle:nth-child(6) { left: 10%; bottom: -50px; animation-delay: 0s; }\r\n  .benefits-particle:nth-child(7) { left: 25%; bottom: -50px; animation-delay: 2s; }\r\n  .benefits-particle:nth-child(8) { left: 40%; bottom: -50px; animation-delay: 4s; }\r\n  .benefits-particle:nth-child(9) { left: 55%; bottom: -50px; animation-delay: 6s; }\r\n  .benefits-particle:nth-child(10) { left: 70%; bottom: -50px; animation-delay: 8s; }\r\n  .benefits-particle:nth-child(11) { left: 85%; bottom: -50px; animation-delay: 10s; }\r\n\r\n  @keyframes particleUp {\r\n    0% {\r\n      transform: translateY(0) rotate(0deg);\r\n      opacity: 0;\r\n    }\r\n    10% {\r\n      opacity: 1;\r\n    }\r\n    90% {\r\n      opacity: 1;\r\n    }\r\n    100% {\r\n      transform: translateY(-100vh) rotate(720deg);\r\n      opacity: 0;\r\n    }\r\n  }\r\n\r\n  \/* Content *\/\r\n  .benefits-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .benefits-header {\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n  }\r\n\r\n  .benefits-header h2 {\r\n    font-size: 48px;\r\n    font-weight: 800;\r\n    color: white;\r\n    margin-bottom: 16px;\r\n  }\r\n\r\n  .benefits-header h2 .gradient-text {\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n\r\n  .benefits-header p {\r\n    font-size: 18px;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .benefits-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 30px;\r\n  }\r\n\r\n  .benefit-card {\r\n    background: rgba(255, 255, 255, 0.05);\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-radius: 20px;\r\n    padding: 40px 30px;\r\n    text-align: center;\r\n    transition: all 0.4s ease;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .benefit-card:hover {\r\n    transform: translateY(-10px);\r\n    background: rgba(255, 255, 255, 0.08);\r\n    border-color: rgba(225, 48, 108, 0.5);\r\n    box-shadow: 0 20px 60px rgba(225, 48, 108, 0.3);\r\n  }\r\n\r\n  .benefit-icon {\r\n    width: 80px;\r\n    height: 80px;\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 36px;\r\n    margin: 0 auto 24px;\r\n    transition: all 0.4s ease;\r\n  }\r\n\r\n  .benefit-card:hover .benefit-icon {\r\n    transform: rotate(360deg) scale(1.1);\r\n  }\r\n\r\n  .benefit-card h3 {\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    color: white;\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .benefit-card p {\r\n    font-size: 15px;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 968px) {\r\n    .benefits-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .benefits-header h2 {\r\n      font-size: 36px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .benefits-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"quote-benefits\">\r\n  <!-- Background -->\r\n  <div class=\"benefits-bg\">\r\n    <div class=\"wave-line\"><\/div>\r\n    <div class=\"wave-line\"><\/div>\r\n    <div class=\"wave-line\"><\/div>\r\n    <div class=\"benefits-orb\"><\/div>\r\n    <div class=\"benefits-orb\"><\/div>\r\n    <div class=\"benefits-particle\"><\/div>\r\n    <div class=\"benefits-particle\"><\/div>\r\n    <div class=\"benefits-particle\"><\/div>\r\n    <div class=\"benefits-particle\"><\/div>\r\n    <div class=\"benefits-particle\"><\/div>\r\n    <div class=\"benefits-particle\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Content -->\r\n  <div class=\"benefits-content\">\r\n    <div class=\"benefits-header\">\r\n      <h2>\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631 <span class=\"gradient-text\">\u0630\u0627 \u062a\u0627\u062a\u0634<\/span>\u061f<\/h2>\r\n      <p>\u0646\u0642\u062f\u0645 \u0646\u062a\u0627\u0626\u062c \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629 \u0628\u0625\u0628\u062f\u0627\u0639 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u0627 \u0645\u062b\u064a\u0644 \u0644\u0647\u0627<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"benefits-grid\">\r\n      <div class=\"benefit-card\">\r\n        <div class=\"benefit-icon\">\u26a1<\/div>\r\n        <h3>\u0633\u0631\u0639\u0629 \u0641\u064a \u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/h3>\r\n        <p>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0639\u0631\u0636\u0643 \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629 \u0648\u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0641\u0648\u0631\u0627\u064b<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"benefit-card\">\r\n        <div class=\"benefit-icon\">\u2705<\/div>\r\n        <h3>\u0633\u062c\u0644 \u062d\u0627\u0641\u0644 \u0628\u0627\u0644\u0625\u0646\u062c\u0627\u0632\u0627\u062a<\/h3>\r\n        <p>\u0623\u0643\u062b\u0631 \u0645\u0646 350 \u0645\u0634\u0631\u0648\u0639 \u0646\u0627\u062c\u062d \u0628\u0645\u0633\u062a\u0648\u0649 \u0631\u0636\u0627 \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a \u0645\u0646 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"benefit-card\">\r\n        <div class=\"benefit-icon\">\ud83d\udc8e<\/div>\r\n        <h3>\u062c\u0648\u062f\u0629 \u0645\u062a\u0645\u064a\u0632\u0629<\/h3>\r\n        <p>\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0648\u0627\u062f \u0648\u0627\u0644\u062d\u0631\u0641\u064a\u0629 \u0641\u064a \u0643\u0644 \u0645\u0634\u0631\u0648\u0639<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"benefit-card\">\r\n        <div class=\"benefit-icon\">\ud83c\udfaf<\/div>\r\n        <h3>\u062d\u0644\u0648\u0644 \u0645\u062e\u0635\u0635\u0629<\/h3>\r\n        <p>\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u0645\u0635\u0645\u0645\u0629 \u062e\u0635\u064a\u0635\u0627\u064b \u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"benefit-card\">\r\n        <div class=\"benefit-icon\">\ud83d\udc65<\/div>\r\n        <h3>\u0641\u0631\u064a\u0642 \u062e\u0628\u064a\u0631<\/h3>\r\n        <p>\u0645\u062d\u062a\u0631\u0641\u0648\u0646 \u0645\u0648\u0647\u0648\u0628\u0648\u0646 \u0628\u0633\u0646\u0648\u0627\u062a \u0645\u0646 \u0627\u0644\u062e\u0628\u0631\u0629 \u0641\u064a \u0627\u0644\u0645\u062c\u0627\u0644<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"benefit-card\">\r\n        <div class=\"benefit-icon\">\ud83d\udcb0<\/div>\r\n        <h3>\u0623\u0633\u0639\u0627\u0631 \u062a\u0646\u0627\u0641\u0633\u064a\u0629<\/h3>\r\n        <p>\u0623\u0641\u0636\u0644 \u0642\u064a\u0645\u0629 \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u0645\u0627\u0644 \u062f\u0648\u0646 \u0627\u0644\u0645\u0633\u0627\u0633 \u0628\u0627\u0644\u062c\u0648\u062f\u0629<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2db2dd0 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"2db2dd0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>.quote-cta {\r\n    position: relative;\r\n    background: white;\r\n    width: 100vw;\r\n    margin-left: calc(-50vw + 50%);\r\n    margin-right: calc(-50vw + 50%);\r\n    padding: 100px 20px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* Background *\/\r\n  .quote-cta-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* Animated Circles *\/\r\n  .cta-circle {\r\n    position: absolute;\r\n    border: 2px solid rgba(90, 45, 130, 0.1);\r\n    border-radius: 50%;\r\n    animation: circleExpand 8s ease-out infinite;\r\n  }\r\n\r\n  .cta-circle:nth-child(1) {\r\n    width: 300px;\r\n    height: 300px;\r\n    top: 30%;\r\n    left: 20%;\r\n    animation-delay: 0s;\r\n  }\r\n\r\n  .cta-circle:nth-child(2) {\r\n    width: 400px;\r\n    height: 400px;\r\n    bottom: 20%;\r\n    right: 15%;\r\n    animation-delay: 3s;\r\n  }\r\n\r\n  @keyframes circleExpand {\r\n    0% {\r\n      transform: scale(0.8);\r\n      opacity: 0.6;\r\n    }\r\n    50% {\r\n      opacity: 0.3;\r\n    }\r\n    100% {\r\n      transform: scale(1.5);\r\n      opacity: 0;\r\n    }\r\n  }\r\n\r\n  \/* Floating Orbs *\/\r\n  .cta-orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(60px);\r\n    animation: ctaOrbFloat 18s ease-in-out infinite;\r\n  }\r\n\r\n  .cta-orb:nth-child(3) {\r\n    width: 300px;\r\n    height: 300px;\r\n    background: radial-gradient(circle, rgba(90, 45, 130, 0.08) 0%, transparent 70%);\r\n    top: 15%;\r\n    left: 10%;\r\n    animation-delay: 0s;\r\n  }\r\n\r\n  .cta-orb:nth-child(4) {\r\n    width: 250px;\r\n    height: 250px;\r\n    background: radial-gradient(circle, rgba(225, 48, 108, 0.08) 0%, transparent 70%);\r\n    bottom: 20%;\r\n    right: 10%;\r\n    animation-delay: 6s;\r\n  }\r\n\r\n  @keyframes ctaOrbFloat {\r\n    0%, 100% { transform: translate(0, 0); }\r\n    50% { transform: translate(30px, -30px); }\r\n  }\r\n\r\n  \/* Content *\/\r\n  .quote-cta-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n    text-align: center;\r\n  }\r\n\r\n  .quote-cta h2 {\r\n    font-size: 48px;\r\n    font-weight: 800;\r\n    color: #1a0b2e;\r\n    margin-bottom: 20px;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  .quote-cta h2 .gradient-text {\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n  }\r\n\r\n  .quote-cta p {\r\n    font-size: 18px;\r\n    color: #666;\r\n    margin-bottom: 40px;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .cta-buttons {\r\n    display: flex;\r\n    gap: 20px;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .cta-btn {\r\n    padding: 18px 40px;\r\n    border-radius: 12px;\r\n    font-size: 18px;\r\n    font-weight: 700;\r\n    text-decoration: none;\r\n    transition: all 0.3s ease;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .cta-btn-primary {\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    color: white;\r\n    border: none;\r\n  }\r\n\r\n  .cta-btn-primary::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 0;\r\n    height: 0;\r\n    background: rgba(255, 255, 255, 0.2);\r\n    border-radius: 50%;\r\n    transform: translate(-50%, -50%);\r\n    transition: width 0.6s ease, height 0.6s ease;\r\n  }\r\n\r\n  .cta-btn-primary:hover {\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 15px 40px rgba(225, 48, 108, 0.4);\r\n  }\r\n\r\n  .cta-btn-primary:hover::before {\r\n    width: 300px;\r\n    height: 300px;\r\n  }\r\n\r\n  .cta-btn-secondary {\r\n    background: white;\r\n    color: #5A2D82;\r\n    border: 2px solid #5A2D82;\r\n  }\r\n\r\n  .cta-btn-secondary:hover {\r\n    background: #5A2D82;\r\n    color: white;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 15px 40px rgba(90, 45, 130, 0.3);\r\n  }\r\n\r\n  .quote-cta-contact {\r\n    margin-top: 60px;\r\n    padding-top: 60px;\r\n    border-top: 1px solid rgba(90, 45, 130, 0.1);\r\n  }\r\n\r\n  .quote-cta-contact h3 {\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    color: #1a0b2e;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .contact-methods {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 40px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .contact-method {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    color: #666;\r\n    font-size: 16px;\r\n    transition: all 0.3s ease;\r\n    text-decoration: none;\r\n  }\r\n\r\n  .contact-method:hover {\r\n    color: #E1306C;\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  .contact-method-icon {\r\n    width: 40px;\r\n    height: 40px;\r\n    background: linear-gradient(135deg, #E1306C 0%, #5A2D82 100%);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: white;\r\n    font-size: 18px;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .quote-cta h2 {\r\n      font-size: 36px;\r\n    }\r\n\r\n    .cta-buttons {\r\n      flex-direction: column;\r\n    }\r\n\r\n    .cta-btn {\r\n      width: 100%;\r\n      justify-content: center;\r\n    }\r\n\r\n    .contact-methods {\r\n      flex-direction: column;\r\n      gap: 20px;\r\n    }\r\n  }\r\n<\/style><div class=\"quote-cta\"><div class=\"quote-cta-bg\"><div class=\"cta-circle\"><\/div><div class=\"cta-circle\"><\/div><div class=\"cta-orb\"><\/div><div class=\"cta-orb\"><\/div><\/div><div class=\"quote-cta-content\"><h2>\u0645\u0633\u062a\u0639\u062f <span class=\"gradient-text\">\u0644\u0644\u0628\u062f\u0621<\/span>\u061f<\/h2><p>\u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u0645\u0626\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0627\u0644\u0631\u0627\u0636\u064a\u0646 \u0627\u0644\u0630\u064a\u0646 \u062d\u0648\u0644\u0648\u0627 \u0631\u0624\u0627\u0647\u0645 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0645\u0639 The Touch. \u0644\u0646\u0628\u062f\u0639 \u0645\u0639\u0627\u064b \u0634\u064a\u0626\u0627\u064b \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0627\u064b.<\/p><div class=\"cta-buttons\"><a href=\"tel:+966567069088\" class=\"cta-btn cta-btn-primary\">\ud83d\udcde \u0627\u062a\u0635\u0644 \u0628\u0646\u0627 \u0627\u0644\u0622\u0646\r\n      <\/a><a href=\"https:\/\/wa.me\/966567069088\" class=\"cta-btn cta-btn-secondary\" target=\"_blank\" rel=\"noopener\">\ud83d\udcac \u062a\u0648\u0627\u0635\u0644 \u0639\u0628\u0631 \u0648\u0627\u062a\u0633\u0627\u0628\r\n      <\/a><\/div><div class=\"quote-cta-contact\"><h3>\u0623\u0648 \u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0645\u0628\u0627\u0634\u0631\u0629<\/h3><div class=\"contact-methods\"><a href=\"mailto:sales@thetouch.site\" class=\"contact-method\"><div class=\"contact-method-icon\">\ud83d\udce7<\/div><span>sales@thetouch.site<\/span><\/a><a href=\"tel:+966567069088\" class=\"contact-method\"><div class=\"contact-method-icon\">\ud83d\udcf1<\/div><span>966567069088+<\/span><\/a><a href=\"https:\/\/maps.app.goo.gl\/A84Ug7tfiFZmZmAW8\" class=\"contact-method\" target=\"_blank\" rel=\"noopener\"><div class=\"contact-method-icon\">\ud83d\udccd<\/div><span>\u062c\u062f\u0629\u060c \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\u0629<\/span><\/a><\/div><\/div><\/div><\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629 \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0639\u0631\u0636 \u0627\u0644\u0633\u0639\u0631 \u0641\u064a \u062f\u0642\u0627\u0626\u0642 \u062d\u0648\u0651\u0644 \u0631\u0624\u064a\u062a\u0643 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639. \u0634\u0627\u0631\u0643 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0648\u0633\u064a\u0642\u0648\u0645 \u0641\u0631\u064a\u0642\u0646\u0627 \u0627\u0644\u0645\u062a\u062e\u0635\u0635 \u0628\u0625\u0639\u062f\u0627\u062f \u062d\u0644 \u0645\u062e\u0635\u0635 \u064a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0627\u0644\u0641\u0631\u064a\u062f\u0629. 24 \u0633\u0627\u0639\u0629 \u0648\u0642\u062a \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 350+ \u0645\u0634\u0631\u0648\u0639 \u0645\u0646\u062c\u0632 100% \u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0623\u062e\u0628\u0631\u0646\u0627 \u0639\u0646 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u062a\u0631\u0643 \u0628\u064a\u0627\u0646\u0627\u062a\u0643 \u0648\u0633\u0646\u0639\u0627\u0648\u062f \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0643 \u062e\u0644\u0627\u0644 \u0662\u0664 \u0633\u0627\u0639\u0629 \u2014 \u0644\u0627 \u064a\u0633\u062a\u063a\u0631\u0642 \u0633\u0648\u0649 \u062f\u0642\u064a\u0642\u0629. \u0627\u0644\u0627\u0633\u0645 * \u0627\u0644\u062c\u0648\u0627\u0644 \/ \u0648\u0627\u062a\u0633\u0627\u0628 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_joinchat":[],"footnotes":""},"class_list":["post-14616","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/14616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/comments?post=14616"}],"version-history":[{"count":26,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/14616\/revisions"}],"predecessor-version":[{"id":15360,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/14616\/revisions\/15360"}],"wp:attachment":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/media?parent=14616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}