{"id":2298,"date":"2022-10-31T15:38:26","date_gmt":"2022-10-31T15:38:26","guid":{"rendered":"https:\/\/thetouch.sa\/?page_id=2298"},"modified":"2025-12-12T21:13:31","modified_gmt":"2025-12-12T21:13:31","slug":"who-we-are","status":"publish","type":"page","link":"https:\/\/thetouch.sa\/ar\/who-we-are\/","title":{"rendered":"Who We Are"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2298\" class=\"elementor elementor-2298\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13936fa e-flex e-con-boxed e-con e-parent\" data-id=\"13936fa\" 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-030f38e elementor-widget elementor-widget-html\" data-id=\"030f38e\" 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<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.who-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%); overflow: hidden; padding: 120px 20px; box-sizing: border-box; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: -1px; margin-bottom: -1px; }\r\n\r\n.who-hero-bg { position: absolute; inset: 0; overflow: hidden; }\r\n\r\n.who-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: floatOrb 20s ease-in-out infinite; }\r\n.who-hero-orb:nth-child(1) { width: 400px; height: 400px; background: radial-gradient(circle, #5A2D82, transparent); top: -100px; left: -100px; animation-delay: 0s; }\r\n.who-hero-orb:nth-child(2) { width: 500px; height: 500px; background: radial-gradient(circle, #E1306C, transparent); bottom: -150px; right: -150px; animation-delay: 5s; }\r\n.who-hero-orb:nth-child(3) { width: 350px; height: 350px; background: radial-gradient(circle, #5A2D82, transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 10s; }\r\n\r\n@keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -30px) scale(1.1); } 50% { transform: translate(-20px, 20px) scale(0.9); } 75% { transform: translate(20px, 30px) scale(1.05); } }\r\n\r\n.who-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(90,45,130,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(90,45,130,0.1) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; }\r\n@keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } }\r\n\r\n.who-hero-content { position: relative; z-index: 2; text-align: center; max-width: 1200px; }\r\n\r\n.who-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(225,48,108,0.3); border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: #E1306C; margin-bottom: 30px; backdrop-filter: blur(10px); animation: fadeInUp 0.8s ease-out; }\r\n\r\n.who-hero-badge-dot { width: 8px; height: 8px; background: #E1306C; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }\r\n@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }\r\n\r\n.who-hero h1 { font-family: 'Playfair Display', serif; font-size: 80px; font-weight: 700; line-height: 1.1; color: #ffffff; margin: 0 0 30px 0; animation: fadeInUp 1s ease-out 0.2s both; }\r\n\r\n.who-hero h1 .highlight { background: linear-gradient(135deg, #5A2D82 0%, #E1306C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.who-hero-desc { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.7); max-width: 800px; margin: 0 auto 50px auto; animation: fadeInUp 1.2s ease-out 0.4s both; }\r\n\r\n.who-hero-stats { display: flex; justify-content: center; gap: 60px; margin-top: 80px; animation: fadeInUp 1.4s ease-out 0.6s both; }\r\n\r\n.who-hero-stat { text-align: center; }\r\n\r\n.who-hero-stat-num { \r\n  font-family: 'Inter', sans-serif; \r\n  font-size: 52px; \r\n  font-weight: 800; \r\n  color: #ffffff; \r\n  margin-bottom: 8px; \r\n  letter-spacing: -2px;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.who-hero-stat:hover .who-hero-stat-num {\r\n  transform: scale(1.1);\r\n  text-shadow: 0 0 30px rgba(225,48,108,0.5);\r\n}\r\n\r\n.who-hero-particle {\r\n  position: absolute;\r\n  width: 4px;\r\n  height: 4px;\r\n  background: rgba(225,48,108,0.6);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  animation: particleFloat 15s ease-in-out infinite;\r\n}\r\n\r\n@keyframes particleFloat {\r\n  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }\r\n  10% { opacity: 1; }\r\n  90% { opacity: 1; }\r\n  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }\r\n}\r\n\r\n.who-hero-glow-ring {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 600px;\r\n  height: 600px;\r\n  border: 2px solid rgba(225,48,108,0.2);\r\n  border-radius: 50%;\r\n  animation: ringPulse 4s ease-in-out infinite;\r\n}\r\n\r\n.who-hero-glow-ring:nth-child(2) {\r\n  width: 800px;\r\n  height: 800px;\r\n  animation-delay: 1s;\r\n  border-color: rgba(90,45,130,0.2);\r\n}\r\n\r\n.who-hero-glow-ring:nth-child(3) {\r\n  width: 1000px;\r\n  height: 1000px;\r\n  animation-delay: 2s;\r\n  border-color: rgba(225,48,108,0.15);\r\n}\r\n\r\n@keyframes ringPulse {\r\n  0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }\r\n  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }\r\n}\r\n\r\n@keyframes countUp {\r\n  from { opacity: 0; transform: translateY(20px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .who-hero { min-height: 80vh; padding: 80px 20px; }\r\n  .who-hero h1 { font-size: 48px; }\r\n  .who-hero-desc { font-size: 18px; }\r\n  .who-hero-stats { flex-direction: column; gap: 30px; }\r\n  .who-hero-stat-num { font-size: 42px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"who-hero\">\r\n  <div class=\"who-hero-bg\">\r\n    <div class=\"who-hero-grid\"><\/div>\r\n    <div class=\"who-hero-glow-ring\"><\/div>\r\n    <div class=\"who-hero-glow-ring\"><\/div>\r\n    <div class=\"who-hero-glow-ring\"><\/div>\r\n    <div class=\"who-hero-orb\"><\/div>\r\n    <div class=\"who-hero-orb\"><\/div>\r\n    <div class=\"who-hero-orb\"><\/div>\r\n  <\/div>\r\n  \r\n  <div class=\"who-hero-content\">\r\n    <div class=\"who-hero-badge\">\r\n      <span class=\"who-hero-badge-dot\"><\/span>\r\n      About The Touch\r\n    <\/div>\r\n    \r\n    <h1>\r\n      We Are <span class=\"highlight\">The Touch<\/span>\r\n    <\/h1>\r\n    \r\n    <p class=\"who-hero-desc\">\r\n      A fully integrated production house delivering innovative solutions across printing, fabrication, digital, and experiential marketing. We transform ideas into impactful brand experiences.\r\n    <\/p>\r\n    \r\n    <div class=\"who-hero-stats\">\r\n      <div class=\"who-hero-stat\">\r\n        <div class=\"who-hero-stat-num\">15<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"who-hero-stat-label\">Years Experience<\/div>\r\n      <\/div>\r\n      <div class=\"who-hero-stat\">\r\n        <div class=\"who-hero-stat-num\">350<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"who-hero-stat-label\">Projects Delivered<\/div>\r\n      <\/div>\r\n      <div class=\"who-hero-stat\">\r\n        <div class=\"who-hero-stat-num\">150<span class=\"plus\">+<\/span><\/div>\r\n        <div class=\"who-hero-stat-label\">Happy Clients<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  \/\/ Mouse parallax effect\r\n  const hero = document.querySelector('.who-hero');\r\n  const orbs = document.querySelectorAll('.who-hero-orb');\r\n  \r\n  hero.addEventListener('mousemove', (e) => {\r\n    const { clientX, clientY } = e;\r\n    const { innerWidth, innerHeight } = window;\r\n    \r\n    const xPercent = (clientX \/ innerWidth - 0.5) * 2;\r\n    const yPercent = (clientY \/ innerHeight - 0.5) * 2;\r\n    \r\n    orbs.forEach((orb, index) => {\r\n      const speed = (index + 1) * 10;\r\n      orb.style.transform = `translate(${xPercent * speed}px, ${yPercent * speed}px)`;\r\n    });\r\n  });\r\n  \r\n  \/\/ Create floating particles\r\n  const particleCount = 20;\r\n  const heroBg = document.querySelector('.who-hero-bg');\r\n  \r\n  for (let i = 0; i < particleCount; i++) {\r\n    const particle = document.createElement('div');\r\n    particle.className = 'who-hero-particle';\r\n    particle.style.left = Math.random() * 100 + '%';\r\n    particle.style.top = Math.random() * 100 + '%';\r\n    particle.style.setProperty('--tx', (Math.random() - 0.5) * 200 + 'px');\r\n    particle.style.setProperty('--ty', -Math.random() * 500 + 'px');\r\n    particle.style.animationDelay = Math.random() * 5 + 's';\r\n    heroBg.appendChild(particle);\r\n  }\r\n  \r\n  \/\/ Animated number counter\r\n  const stats = document.querySelectorAll('.who-hero-stat-num');\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        const target = entry.target;\r\n        const text = target.textContent;\r\n        const number = parseInt(text);\r\n        \r\n        if (!isNaN(number)) {\r\n          let current = 0;\r\n          const increment = number \/ 50;\r\n          const timer = setInterval(() => {\r\n            current += increment;\r\n            if (current >= number) {\r\n              target.innerHTML = text;\r\n              clearInterval(timer);\r\n            } else {\r\n              target.innerHTML = Math.floor(current) + text.replace(number, '');\r\n            }\r\n          }, 30);\r\n        }\r\n        observer.unobserve(target);\r\n      }\r\n    });\r\n  }, { threshold: 0.5 });\r\n  \r\n  stats.forEach(stat => observer.observe(stat));\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71483f4 elementor-widget elementor-widget-html\" data-id=\"71483f4\" 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<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.who-story { \r\n  position: relative; \r\n  padding: 120px 20px; \r\n  background: #ffffff; \r\n  overflow: hidden;\r\n  width: 100vw;\r\n  position: relative;\r\n  left: 50%;\r\n  right: 50%;\r\n  margin-left: -50vw;\r\n  margin-right: -50vw;\r\n  box-sizing: border-box;\r\n  margin-top: -1px;\r\n  margin-bottom: -1px;\r\n}\r\n\r\n.who-story-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.who-story-orbs {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(80px);\r\n  opacity: 0.3;\r\n  animation: orbFloat 8s ease-in-out infinite;\r\n}\r\n\r\n.who-story-orbs:nth-child(1) { width: 400px; height: 400px; background: radial-gradient(circle, #5A2D82, transparent); top: -100px; left: -100px; }\r\n.who-story-orbs:nth-child(2) { width: 350px; height: 350px; background: radial-gradient(circle, #E1306C, transparent); bottom: -100px; right: -100px; animation-delay: 4s; }\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.1); }\r\n}\r\n\r\n.who-story-container { \r\n  max-width: 1200px; \r\n  margin: 0 auto; \r\n  display: grid; \r\n  grid-template-columns: 1fr 1fr; \r\n  gap: 80px; \r\n  align-items: center;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n.who-story-left h2 { \r\n  font-family: 'Playfair Display', serif; \r\n  font-size: 56px; \r\n  font-weight: 700; \r\n  line-height: 1.2; \r\n  color: #0a0a0a; \r\n  margin: 0 0 30px 0; \r\n}\r\n\r\n.who-story-left h2 .highlight { background: linear-gradient(135deg, #5A2D82 0%, #E1306C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n\r\n.who-story-left p { \r\n  font-family: 'Inter', sans-serif; \r\n  font-size: 18px; \r\n  font-weight: 400; \r\n  line-height: 1.8; \r\n  color: rgba(10,10,10,0.7); \r\n  margin-bottom: 20px; \r\n  opacity: 0; \r\n  transform: translateX(-30px); \r\n  animation: slideInLeft 0.8s ease-out forwards; \r\n}\r\n\r\n.who-story-left p:nth-child(2) { animation-delay: 0.1s; }\r\n.who-story-left p:nth-child(3) { animation-delay: 0.2s; }\r\n.who-story-left p:nth-child(4) { animation-delay: 0.3s; }\r\n.who-story-left p:nth-child(5) { animation-delay: 0.4s; }\r\n\r\n.who-story-left, .who-story-right {\r\n  transition: transform 0.3s ease-out;\r\n}\r\n\r\n.who-story-right { position: relative; }\r\n\r\n.who-story-visual { position: relative; width: 100%; height: 500px; background: linear-gradient(135deg, #5A2D82 0%, #E1306C 50%, #5A2D82 100%); background-size: 200% 200%; animation: gradientShift 10s ease infinite; border-radius: 24px; overflow: hidden; }\r\n\r\n.who-story-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px); }\r\n\r\n.who-story-text-block { \r\n  position: absolute; \r\n  background: rgba(255,255,255,0.95); \r\n  backdrop-filter: blur(10px); \r\n  padding: 30px; \r\n  border-radius: 16px; \r\n  box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  cursor: pointer;\r\n}\r\n\r\n.who-story-text-block:hover {\r\n  transform: translateY(-10px) scale(1.05);\r\n  box-shadow: 0 20px 60px rgba(90,45,130,0.3);\r\n  background: rgba(255,255,255,1);\r\n}\r\n\r\n.who-story-text-block:nth-child(2) { top: 40px; left: 40px; max-width: 200px; animation: float 6s ease-in-out infinite; }\r\n\r\n.who-story-text-block:nth-child(3) { bottom: 40px; right: 40px; max-width: 220px; animation: float 6s ease-in-out infinite 3s; }\r\n\r\n.who-story-text-block h3 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #5A2D82; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 1px; }\r\n\r\n.who-story-text-block p { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; color: rgba(10,10,10,0.7); margin: 0; }\r\n\r\n.who-story .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }\r\n.who-story .animate-on-scroll.visible { opacity: 1; transform: translateY(0); }\r\n\r\n@media (max-width: 968px) {\r\n  .who-story-container { grid-template-columns: 1fr; gap: 60px; }\r\n  .who-story-left h2 { font-size: 42px; }\r\n  .who-story-visual { height: 400px; }\r\n}\r\n\r\n@keyframes float {\r\n  0%, 100% { transform: translateY(0px); }\r\n  50% { transform: translateY(-20px); }\r\n}\r\n\r\n@keyframes gradientShift {\r\n  0%, 100% { background-position: 0% 50%; }\r\n  50% { background-position: 100% 50%; }\r\n}\r\n\r\n@keyframes slideInLeft {\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"who-story\">\r\n  <div class=\"who-story-bg\">\r\n    <div class=\"who-story-orbs\"><\/div>\r\n    <div class=\"who-story-orbs\"><\/div>\r\n  <\/div>\r\n  <div class=\"who-story-container\">\r\n    <div class=\"who-story-left animate-on-scroll\">\r\n      <h2>Our <span class=\"highlight\">Story<\/span><\/h2>\r\n      <p>\r\n        We didn't start here, but it was always in our vision when our founders became partners, blending their passion for music, art, and entertainment, and most of all - the people behind the experiences.\r\n      <\/p>\r\n      <p>\r\n        With their diverse backgrounds and business acumen, we coined ourselves as the Promotional Marketing Agency. Our goal was simple: to provide our clients with the tools to build a more connected future.\r\n      <\/p>\r\n      <p>\r\n        From the beginning we could see that the creativity and knowledge of our people are truly what moves the needle for brands, so we evolved into a Consumer Engagement Agency.\r\n      <\/p>\r\n      <p>\r\n        Now, we deliver integrated experiential marketing campaigns, both virtual and live experiences, with the human connection continuing to drive every concept and strategy we create.\r\n      <\/p>\r\n    <\/div>\r\n    \r\n    <div class=\"who-story-right animate-on-scroll\">\r\n      <div class=\"who-story-visual\">\r\n        <div class=\"who-story-pattern\"><\/div>\r\n        <div class=\"who-story-text-block\">\r\n          <h3>Music & Art<\/h3>\r\n          <p>Blending creativity with strategic thinking<\/p>\r\n        <\/div>\r\n        <div class=\"who-story-text-block\">\r\n          <h3>Human Connection<\/h3>\r\n          <p>Powered by people, driven by passion<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('visible');\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n\r\n  document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));\r\n  \r\n  \/\/ Parallax scroll effect\r\n  window.addEventListener('scroll', () => {\r\n    const section = document.querySelector('.who-story');\r\n    if (!section) return;\r\n    \r\n    const rect = section.getBoundingClientRect();\r\n    const scrollPercent = (window.innerHeight - rect.top) \/ (window.innerHeight + rect.height);\r\n    \r\n    if (scrollPercent > 0 && scrollPercent < 1) {\r\n      const left = section.querySelector('.who-story-left');\r\n      const right = section.querySelector('.who-story-right');\r\n      \r\n      if (left) left.style.transform = `translateX(${(scrollPercent - 0.5) * -30}px)`;\r\n      if (right) right.style.transform = `translateX(${(scrollPercent - 0.5) * 30}px)`;\r\n    }\r\n  });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d51d73 elementor-widget elementor-widget-html\" data-id=\"8d51d73\" 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<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.who-values { \r\n  position: relative; \r\n  padding: 120px 20px; \r\n  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 100%); \r\n  overflow: hidden;\r\n  width: 100vw;\r\n  position: relative;\r\n  left: 50%;\r\n  right: 50%;\r\n  margin-left: -50vw;\r\n  margin-right: -50vw;\r\n  box-sizing: border-box;\r\n  margin-top: -1px;\r\n  margin-bottom: -1px;\r\n}\r\n\r\n.who-values-bg { position: absolute; inset: 0; overflow: hidden; }\r\n\r\n.who-values-grid-pattern {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: \r\n    linear-gradient(rgba(90,45,130,0.1) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(90,45,130,0.1) 1px, transparent 1px);\r\n  background-size: 50px 50px;\r\n  animation: gridMove 20s linear infinite;\r\n}\r\n\r\n@keyframes gridMove {\r\n  0% { transform: translate(0, 0); }\r\n  100% { transform: translate(50px, 50px); }\r\n}\r\n\r\n.who-values-particle {\r\n  position: absolute;\r\n  width: 8px;\r\n  height: 8px;\r\n  background: radial-gradient(circle, rgba(255,255,255,0.9), transparent);\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n}\r\n\r\n.who-values-particle:nth-child(3) {\r\n  left: 10%;\r\n  bottom: 0;\r\n  animation: particleFloat1 12s ease-in-out infinite;\r\n  box-shadow: 0 0 20px rgba(225,48,108,0.8), 0 0 40px rgba(225,48,108,0.4);\r\n  background: radial-gradient(circle, rgba(225,48,108,1), rgba(225,48,108,0.3));\r\n}\r\n\r\n.who-values-particle:nth-child(4) {\r\n  left: 25%;\r\n  bottom: 0;\r\n  animation: particleFloat2 15s ease-in-out infinite;\r\n  animation-delay: 2s;\r\n  box-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.4);\r\n}\r\n\r\n.who-values-particle:nth-child(5) {\r\n  left: 45%;\r\n  bottom: 0;\r\n  animation: particleFloat1 18s ease-in-out infinite;\r\n  animation-delay: 4s;\r\n  box-shadow: 0 0 20px rgba(90,45,130,0.8), 0 0 40px rgba(90,45,130,0.4);\r\n  background: radial-gradient(circle, rgba(90,45,130,1), rgba(90,45,130,0.3));\r\n}\r\n\r\n.who-values-particle:nth-child(6) {\r\n  left: 60%;\r\n  bottom: 0;\r\n  animation: particleFloat2 14s ease-in-out infinite;\r\n  animation-delay: 1s;\r\n  box-shadow: 0 0 20px rgba(225,48,108,0.8), 0 0 40px rgba(225,48,108,0.4);\r\n  background: radial-gradient(circle, rgba(225,48,108,1), rgba(225,48,108,0.3));\r\n}\r\n\r\n.who-values-particle:nth-child(7) {\r\n  left: 75%;\r\n  bottom: 0;\r\n  animation: particleFloat1 16s ease-in-out infinite;\r\n  animation-delay: 3s;\r\n  box-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.4);\r\n}\r\n\r\n.who-values-particle:nth-child(8) {\r\n  left: 90%;\r\n  bottom: 0;\r\n  animation: particleFloat2 13s ease-in-out infinite;\r\n  animation-delay: 5s;\r\n  box-shadow: 0 0 20px rgba(90,45,130,0.8), 0 0 40px rgba(90,45,130,0.4);\r\n  background: radial-gradient(circle, rgba(90,45,130,1), rgba(90,45,130,0.3));\r\n}\r\n\r\n@keyframes particleFloat1 {\r\n  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }\r\n  10% { opacity: 1; }\r\n  90% { opacity: 1; }\r\n  100% { transform: translateY(-100vh) translateX(50px) rotate(360deg); opacity: 0; }\r\n}\r\n\r\n@keyframes particleFloat2 {\r\n  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }\r\n  10% { opacity: 1; }\r\n  90% { opacity: 1; }\r\n  100% { transform: translateY(-100vh) translateX(-50px) rotate(-360deg); opacity: 0; }\r\n}\r\n\r\n.who-values-orb { \r\n  position: absolute; \r\n  border-radius: 50%; \r\n  filter: blur(100px); \r\n  opacity: 0.3; \r\n  animation: orbFloat 20s ease-in-out infinite;\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.who-values-orb:nth-child(1) { \r\n  width: 500px; \r\n  height: 500px; \r\n  background: radial-gradient(circle, #5A2D82, transparent); \r\n  top: -200px; \r\n  right: -200px; \r\n  animation-delay: 0s;\r\n}\r\n\r\n.who-values-orb:nth-child(2) { \r\n  width: 400px; \r\n  height: 400px; \r\n  background: radial-gradient(circle, #E1306C, transparent); \r\n  bottom: -150px; \r\n  left: -150px; \r\n  animation-delay: 5s;\r\n}\r\n\r\n.who-values-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; text-align: center; }\r\n\r\n.who-values-header { margin-bottom: 80px; }\r\n\r\n.who-values-label { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #E1306C; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }\r\n\r\n.who-values h2 { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 0 0 20px 0; }\r\n\r\n.who-values-subtitle { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 700px; margin: 0 auto; }\r\n\r\n.who-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }\r\n\r\n.who-value-card { \r\n  background: rgba(255,255,255,0.03); \r\n  border: 1px solid rgba(255,255,255,0.1); \r\n  border-radius: 24px; \r\n  padding: 50px 30px; \r\n  text-align: center; \r\n  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  cursor: pointer; \r\n  position: relative; \r\n  overflow: hidden;\r\n}\r\n\r\n.who-value-card::before { \r\n  content: ''; \r\n  position: absolute; \r\n  top: -2px; \r\n  left: -2px; \r\n  right: -2px; \r\n  bottom: -2px; \r\n  background: linear-gradient(45deg, #5A2D82, #E1306C, #5A2D82, #E1306C);\r\n  background-size: 300% 300%;\r\n  border-radius: 24px;\r\n  opacity: 0;\r\n  z-index: -1;\r\n  animation: gradientRotate 4s ease infinite;\r\n  transition: opacity 0.5s ease;\r\n}\r\n\r\n@keyframes gradientRotate {\r\n  0%, 100% { background-position: 0% 50%; }\r\n  50% { background-position: 100% 50%; }\r\n}\r\n\r\n.who-value-card::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(circle at center, rgba(225,48,108,0.2), transparent 70%);\r\n  opacity: 0;\r\n  transition: opacity 0.5s ease;\r\n}\r\n\r\n.who-value-card:hover::before {\r\n  opacity: 1;\r\n}\r\n\r\n.who-value-card:hover::after {\r\n  opacity: 1;\r\n}\r\n\r\n.who-value-card:hover { \r\n  transform: translateY(-15px) scale(1.02);\r\n  box-shadow: 0 30px 80px rgba(225,48,108,0.3);\r\n  background: rgba(255,255,255,0.08);\r\n}\r\n\r\n.who-value-num { \r\n  font-family: 'Inter', sans-serif; \r\n  font-size: 72px; \r\n  font-weight: 800; \r\n  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%); \r\n  -webkit-background-clip: text; \r\n  -webkit-text-fill-color: transparent; \r\n  background-clip: text; \r\n  margin-bottom: 20px; \r\n  line-height: 1;\r\n  transition: all 0.5s ease;\r\n  display: inline-block;\r\n}\r\n\r\n.who-value-card:hover .who-value-num { \r\n  background: linear-gradient(135deg, #5A2D82 0%, #E1306C 100%); \r\n  -webkit-background-clip: text; \r\n  -webkit-text-fill-color: transparent; \r\n  background-clip: text;\r\n  transform: rotateY(360deg) scale(1.1);\r\n}\r\n\r\n.who-value-title {\r\n  font-family: 'Inter', sans-serif; \r\n  font-size: 24px; \r\n  font-weight: 700; \r\n  color: #ffffff;\r\n  margin: 0 0 16px 0;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.who-value-desc {\r\n  font-family: 'Inter', sans-serif; \r\n  font-size: 15px; \r\n  font-weight: 400; \r\n  line-height: 1.7; \r\n  color: rgba(255,255,255,0.7);\r\n  margin: 0;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .who-values-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .who-values h2 { font-size: 42px; }\r\n  .who-values-grid { grid-template-columns: 1fr; gap: 20px; }\r\n  .who-value-card { padding: 40px 25px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"who-values\">\r\n  <div class=\"who-values-bg\">\r\n    <div class=\"who-values-grid-pattern\"><\/div>\r\n    <div class=\"who-values-orb\"><\/div>\r\n    <div class=\"who-values-orb\"><\/div>\r\n    <div class=\"who-values-particle\"><\/div>\r\n    <div class=\"who-values-particle\"><\/div>\r\n    <div class=\"who-values-particle\"><\/div>\r\n    <div class=\"who-values-particle\"><\/div>\r\n    <div class=\"who-values-particle\"><\/div>\r\n    <div class=\"who-values-particle\"><\/div>\r\n  <\/div>\r\n  \r\n  <div class=\"who-values-container\">\r\n    <div class=\"who-values-header animate-on-scroll\">\r\n      <div class=\"who-values-label\">Core Values<\/div>\r\n      <h2>The Pillars of Our Agency<\/h2>\r\n      <p class=\"who-values-subtitle\">The following four core values are the foundation upon which our agency is built.<\/p>\r\n    <\/div>\r\n    \r\n    <div class=\"who-values-grid\">\r\n      <div class=\"who-value-card animate-on-scroll\">\r\n        <div class=\"who-value-num\">01<\/div>\r\n        <h3 class=\"who-value-title\">Empathy<\/h3>\r\n        <p class=\"who-value-desc\">We pay attention and probe until we comprehend the requirements of our partners and personnel.<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"who-value-card animate-on-scroll\">\r\n        <div class=\"who-value-num\">02<\/div>\r\n        <h3 class=\"who-value-title\">Talent<\/h3>\r\n        <p class=\"who-value-desc\">Everyone is talented in their own way. We value and respect unique personalities that stand out.<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"who-value-card animate-on-scroll\">\r\n        <div class=\"who-value-num\">03<\/div>\r\n        <h3 class=\"who-value-title\">Responsibility<\/h3>\r\n        <p class=\"who-value-desc\">The secret to achieving objectives and forging lasting relationships with our clients.<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"who-value-card animate-on-scroll\">\r\n        <div class=\"who-value-num\">04<\/div>\r\n        <h3 class=\"who-value-title\">Innovation<\/h3>\r\n        <p class=\"who-value-desc\">We continuously push boundaries to deliver creative solutions that exceed expectations.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  \/\/ Intersection observer for scroll animations\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry, index) => {\r\n      if (entry.isIntersecting) {\r\n        setTimeout(() => {\r\n          entry.target.classList.add('visible');\r\n        }, index * 150);\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n\r\n  document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));\r\n  \r\n  \/\/ 3D tilt effect on cards\r\n  const cards = document.querySelectorAll('.who-value-card');\r\n  \r\n  cards.forEach(card => {\r\n    card.addEventListener('mousemove', (e) => {\r\n      const rect = card.getBoundingClientRect();\r\n      const x = e.clientX - rect.left;\r\n      const y = e.clientY - rect.top;\r\n      \r\n      const centerX = rect.width \/ 2;\r\n      const centerY = rect.height \/ 2;\r\n      \r\n      const rotateX = (y - centerY) \/ 10;\r\n      const rotateY = (centerX - x) \/ 10;\r\n      \r\n      card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-15px) scale(1.02)`;\r\n    });\r\n    \r\n    card.addEventListener('mouseleave', () => {\r\n      card.style.transform = '';\r\n    });\r\n  });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4152286 elementor-widget elementor-widget-html\" data-id=\"4152286\" 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>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.who-cta { \r\n  position: relative; \r\n  padding: 120px 20px; \r\n  background: linear-gradient(135deg, #5A2D82 0%, #E1306C 100%);\r\n  background-size: 200% 200%;\r\n  animation: gradientMove 10s ease infinite;\r\n  width: 100vw; \r\n  position: relative; \r\n  left: 50%; \r\n  right: 50%; \r\n  margin-left: -50vw; \r\n  margin-right: -50vw; \r\n  box-sizing: border-box; \r\n  margin-top: -1px; \r\n  margin-bottom: -1px; \r\n  overflow: hidden; \r\n}\r\n\r\n@keyframes gradientMove {\r\n  0%, 100% { background-position: 0% 50%; }\r\n  50% { background-position: 100% 50%; }\r\n}\r\n\r\n.who-cta-particles {\r\n  position: absolute;\r\n  width: 6px;\r\n  height: 6px;\r\n  background: rgba(255,255,255,0.6);\r\n  border-radius: 50%;\r\n  animation: particleRise linear infinite;\r\n  box-shadow: 0 0 10px rgba(255,255,255,0.8);\r\n}\r\n\r\n.who-cta-particles:nth-child(3) { left: 15%; animation-duration: 12s; animation-delay: 0s; }\r\n.who-cta-particles:nth-child(4) { left: 30%; animation-duration: 14s; animation-delay: 2s; }\r\n.who-cta-particles:nth-child(5) { left: 45%; animation-duration: 16s; animation-delay: 1s; }\r\n.who-cta-particles:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: 3s; }\r\n.who-cta-particles:nth-child(7) { left: 75%; animation-duration: 15s; animation-delay: 4s; }\r\n.who-cta-particles:nth-child(8) { left: 90%; animation-duration: 11s; animation-delay: 2s; }\r\n\r\n@keyframes particleRise {\r\n  0% {\r\n    transform: translateY(100vh) scale(0);\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) scale(1.5);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.who-cta-pattern { \r\n  position: absolute; \r\n  inset: 0; \r\n  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px); \r\n  animation: patternRotate 60s linear infinite;\r\n}\r\n\r\n@keyframes patternRotate {\r\n  from { transform: rotate(0deg); }\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n.who-cta-orb { \r\n  position: absolute; \r\n  width: 300px; \r\n  height: 300px; \r\n  border-radius: 50%; \r\n  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent); \r\n  filter: blur(60px); \r\n  animation: orbPulse 5s ease-in-out infinite; \r\n}\r\n\r\n@keyframes orbPulse { \r\n  0%, 100% { \r\n    transform: scale(1) translate(0, 0); \r\n    opacity: 0.3; \r\n  } \r\n  50% { \r\n    transform: scale(1.3) translate(30px, -30px); \r\n    opacity: 0.6; \r\n  } \r\n}\r\n\r\n.who-cta-container { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; text-align: center; }\r\n\r\n.who-cta-title { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: #ffffff; margin-bottom: 30px; opacity: 0; }\r\n\r\n.who-cta-subtitle { font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.6; color: rgba(255,255,255,0.9); margin-bottom: 50px; opacity: 0; }\r\n\r\n.who-cta-buttons { display: flex; justify-content: center; gap: 20px; opacity: 0; }\r\n.who-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 40px; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; }\r\n.who-cta-btn-primary { background: #ffffff; color: #5A2D82; }\r\n.who-cta-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }\r\n.who-cta-btn-secondary { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.3); }\r\n.who-cta-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #ffffff; }\r\n\r\n.who-cta.visible .who-cta-title { animation: fadeInUp 0.6s ease-out 0.2s forwards; }\r\n.who-cta.visible .who-cta-subtitle { animation: fadeInUp 0.6s ease-out 0.4s forwards; }\r\n.who-cta.visible .who-cta-buttons { animation: fadeInUp 0.6s ease-out 0.6s forwards; }\r\n\r\n@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n@media (max-width: 768px) {\r\n  .who-cta { padding: 80px 20px; }\r\n  .who-cta-title { font-size: 36px; }\r\n  .who-cta-subtitle { font-size: 18px; }\r\n  .who-cta-buttons { flex-direction: column; }\r\n  .who-cta-btn { width: 100%; justify-content: center; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"who-cta\">\r\n  <div class=\"who-cta-pattern\"><\/div>\r\n  <div class=\"who-cta-orb\"><\/div>\r\n  <div class=\"who-cta-orb\"><\/div>\r\n  <div class=\"who-cta-particles\"><\/div>\r\n  <div class=\"who-cta-particles\"><\/div>\r\n  <div class=\"who-cta-particles\"><\/div>\r\n  <div class=\"who-cta-particles\"><\/div>\r\n  <div class=\"who-cta-particles\"><\/div>\r\n  <div class=\"who-cta-particles\"><\/div>\r\n  \r\n  <div class=\"who-cta-container\">\r\n    <h2 class=\"who-cta-title\">Ready to Create Something Amazing?<\/h2>\r\n    <p class=\"who-cta-subtitle\">Let's bring your vision to life with our creative solutions and years of experience.<\/p>\r\n    \r\n    <div class=\"who-cta-buttons\">\r\n      <a href=\"https:\/\/wa.me\/966567069088\" class=\"who-cta-btn who-cta-btn-primary\" target=\"_blank\" rel=\"noopener\">\r\n        Start Your Project\r\n        <span>\u2192<\/span>\r\n      <\/a>\r\n      <a href=\"https:\/\/thetouch.sa\/portfolio\/\" class=\"who-cta-btn who-cta-btn-secondary\">\r\n        View Our Work\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach(entry => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('visible');\r\n      }\r\n    });\r\n  }, { threshold: 0.3 });\r\n  \r\n  const section = document.querySelector('.who-cta');\r\n  if (section) observer.observe(section);\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>About The Touch We Are The Touch A fully integrated production house delivering innovative solutions across printing, fabrication, digital, and experiential marketing. We transform ideas into impactful brand experiences. 15+ Years Experience 350+ Projects Delivered 150+ Happy Clients Our Story We didn&#8217;t start here, but it was always in our vision when our founders became [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_joinchat":[],"footnotes":""},"class_list":["post-2298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/2298","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=2298"}],"version-history":[{"count":226,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/2298\/revisions"}],"predecessor-version":[{"id":14537,"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/pages\/2298\/revisions\/14537"}],"wp:attachment":[{"href":"https:\/\/thetouch.sa\/ar\/wp-json\/wp\/v2\/media?parent=2298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}