Website Design and Development | Swift Mind<\/title>\r\n<meta name=\"description\" content=\"Professional, responsive website design using the latest 2026 technologies, blazing-fast performance, SEO, and a flawless user experience to grow your business in Saudi Arabia.\">\r\n<meta property=\"og:title\" content=\"Website Design and Development | Swift Mind\">\r\n<meta property=\"og:description\" content=\"Modern websites that turn visitors into customers.\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<meta name=\"twitter:card\" content=\"summary_large_image\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<\/head>\r\n<body>\r\n\r\n<style>\r\n .sm-svc-page { font-family: 'Tajawal', system-ui, sans-serif; color: #0B2A5B; box-sizing: border-box; overflow-x: hidden; background: #F5F8FC; }\r\n .sm-svc-page *, .sm-svc-page *::before, .sm-svc-page *::after { box-sizing: border-box; }\r\n .sm-svc-page .sm-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }\r\n\r\n \/* Hero *\/\r\n .sm-svc-page .sm-hero { position: relative; background: #0B2A5B; padding: clamp(64px, 10vw, 140px) 0 clamp(100px, 14vw, 180px); color: #fff; overflow: hidden; }\r\n .sm-svc-page .sm-hero::before,\r\n .sm-svc-page .sm-hero::after { content: \"\"; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; pointer-events: none; }\r\n .sm-svc-page .sm-hero::before { width: 520px; height: 520px; background: #1E5BC6; top: -120px; left: -120px; }\r\n .sm-svc-page .sm-hero::after { width: 360px; height: 360px; background: #5BA8F5; bottom: -80px; right: -80px; opacity: .14; }\r\n .sm-svc-page .sm-hero__inner { position: relative; z-index: 2; text-align: center; max-width: 840px; margin: 0 auto; }\r\n .sm-svc-page .sm-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: rgba(30,91,198,.18); border: 1px solid rgba(91,168,245,.35); color: #5BA8F5; font-size: 14px; font-weight: 700; margin-bottom: 24px; }\r\n .sm-svc-page .sm-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #5BA8F5; box-shadow: 0 0 10px #5BA8F5; }\r\n .sm-svc-page h1 { margin: 0 0 22px; font-size: clamp(32px, 5vw, 64px); font-weight: 900; line-height: 1.15; letter-spacing: -0.5px; }\r\n .sm-svc-page h1 span { color: #5BA8F5; }\r\n .sm-svc-page .sm-lead { color: #B9CCEF; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.85; margin: 0 0 36px; }\r\n .sm-svc-page .sm-hero .sm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; border-radius: 999px; background: #1E5BC6; color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; transition: .25s ease; box-shadow: 0 16px 40px -12px rgba(30,91,198,.55); }\r\n .sm-svc-page .sm-hero .sm-btn:hover { background: #2563EB; transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(30,91,198,.65); }\r\n .sm-svc-page .sm-btn svg { width: 20px; height: 20px; }\r\n\r\n \/* Floating cards *\/\r\n .sm-svc-page .sm-float { position: relative; z-index: 3; margin-top: -90px; }\r\n .sm-svc-page .sm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n .sm-svc-page .sm-card { background: #fff; padding: 32px; border-radius: 24px; border: 1px solid rgba(11,42,91,.08); box-shadow: 0 20px 50px -20px rgba(11,42,91,.14); transition: .3s ease; }\r\n .sm-svc-page .sm-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -24px rgba(11,42,91,.22); border-color: rgba(30,91,198,.2); }\r\n .sm-svc-page .sm-card__ico { width: 58px; height: 58px; border-radius: 16px; background: #F0F6FF; color: #1E5BC6; display: grid; place-items: center; margin-bottom: 20px; }\r\n .sm-svc-page .sm-card__ico svg { width: 28px; height: 28px; }\r\n .sm-svc-page .sm-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #0B2A5B; }\r\n .sm-svc-page .sm-card p { margin: 0; color: #4A5A78; font-size: 15px; line-height: 1.8; }\r\n\r\n \/* Process *\/\r\n .sm-svc-page .sm-process { padding: clamp(70px, 9vw, 120px) 0; }\r\n .sm-svc-page .sm-section__title { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }\r\n .sm-svc-page .sm-section__title h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 44px); font-weight: 900; color: #0B2A5B; }\r\n .sm-svc-page .sm-section__title p { margin: 0 auto; color: #5B6A8A; font-size: 17px; line-height: 1.8; max-width: 620px; }\r\n .sm-svc-page .sm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\r\n .sm-svc-page .sm-step { position: relative; padding: 32px 24px; background: #fff; border-radius: 22px; border: 1px solid rgba(11,42,91,.08); text-align: center; }\r\n .sm-svc-page .sm-step__num { width: 44px; height: 44px; border-radius: 50%; background: #1E5BC6; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; margin: 0 auto 18px; }\r\n .sm-svc-page .sm-step h4 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: #0B2A5B; }\r\n .sm-svc-page .sm-step p { margin: 0; color: #5B6A8A; font-size: 14px; line-height: 1.75; }\r\n.hero-title h1{\r\n font-size: 38px;\r\n line-height: 1.4;\r\n}\r\n\r\n.hero-title h1 span{\r\n font-size: 22px;\r\n}\r\n\r\n@media (max-width: 767px){\r\n .hero-title h1{\r\n font-size: 24px;\r\n line-height: 1.6;\r\n }\r\n\r\n .hero-title h1 span{\r\n font-size: 16px;\r\n }\r\n}\r\n \/* FAQ *\/\r\n .sm-svc-page .sm-faq { padding: clamp(50px, 6vw, 90px) 0; background: #fff; }\r\n .sm-svc-page .sm-faq__list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }\r\n .sm-svc-page .sm-faq__item { border: 1px solid rgba(11,42,91,.1); border-radius: 16px; overflow: hidden; }\r\n .sm-svc-page .sm-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: #FAFBFD; border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; color: #0B2A5B; text-align: left; }\r\n .sm-svc-page .sm-faq__q svg { width: 18px; height: 18px; color: #1E5BC6; transition: transform .25s ease; flex-shrink: 0; }\r\n .sm-svc-page .sm-faq__item.open .sm-faq__q svg { transform: rotate(180deg); }\r\n .sm-svc-page .sm-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }\r\n .sm-svc-page .sm-faq__item.open .sm-faq__a { max-height: 300px; }\r\n .sm-svc-page .sm-faq__a > div { padding: 0 24px 20px; color: #5B6A8A; font-size: 15px; line-height: 1.85; }\r\n\r\n \/* CTA *\/\r\n .sm-svc-page .sm-cta { padding: clamp(70px, 8vw, 120px) 0; background: #0B2A5B; color: #fff; text-align: center; position: relative; overflow: hidden; }\r\n .sm-svc-page .sm-cta::before { content: \"\"; position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% -10%, rgba(91,168,245,.2), transparent 60%); pointer-events: none; }\r\n .sm-svc-page .sm-cta h2 { position: relative; z-index: 2; margin: 0 0 16px; font-size: clamp(26px, 3.5vw, 44px); font-weight: 900; }\r\n .sm-svc-page .sm-cta p { position: relative; z-index: 2; margin: 0 0 32px; color: #B9CCEF; font-size: 17px; }\r\n .sm-svc-page .sm-cta .sm-btn { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 2; padding: 16px 36px; border-radius: 999px; background: #fff; color: #0B2A5B; font-weight: 900; font-size: 17px; text-decoration: none; transition: .25s ease; }\r\n .sm-svc-page .sm-cta .sm-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgba(255,255,255,.25); }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 992px) {\r\n .sm-svc-page .sm-grid-3 { grid-template-columns: repeat(2, 1fr); }\r\n .sm-svc-page .sm-steps { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (max-width: 640px) {\r\n .sm-svc-page .sm-grid-3 { grid-template-columns: 1fr; }\r\n .sm-svc-page .sm-steps { grid-template-columns: 1fr; }\r\n .sm-svc-page .sm-card, .sm-svc-page .sm-step { padding: 24px; }\r\n .sm-svc-page .sm-float { margin-top: -50px; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"sm-svc-page\">\r\n\r\n <section class=\"sm-hero\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-hero__inner\">\r\n <span class=\"sm-tag\"><span class=\"dot\"><\/span> Website Development Services<\/span>\r\n \r\n <section class=\"hero-title\">\r\n <h1>\r\n Turn Your Idea Into a Professional Website That Grows Your Business <br>\r\n <span>Modern design, fast performance, and a user experience that wins you more customers<\/span>\r\n <\/h1>\r\n<\/section>\r\n <p class=\"sm-lead\">At Swift Mind, we craft websites that blend technical artistry with high performance, built specifically to grow your business in the Saudi market.<\/p>\r\n <a href=\"https:\/\/wa.me\/201097649856\" class=\"sm-btn\" target=\"_blank\" rel=\"noopener\">Start Your Project Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"sm-float\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-grid-3\">\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg><\/div>\r\n <h3>Lightning-Fast Performance<\/h3>\r\n <p>Technically optimized sites that guarantee top loading speed and the best possible user experience.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><path d=\"M12 18h.01\"\/><\/svg><\/div>\r\n <h3>100% Responsive Design<\/h3>\r\n <p>Full coverage across every device and screen size, with a strong focus on mobile.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg><\/div>\r\n <h3>SEO-Ready From Day One<\/h3>\r\n <p>A technical structure optimized for search engines to help you rank on Google.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\r\n <h3>Strong Security & Protection<\/h3>\r\n <p>SSL certificates, attack protection, and regular backups.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/svg><\/div>\r\n <h3>2026 Technologies<\/h3>\r\n <p>React, Next.js, WordPress, or whichever technology solution fits your project best.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"\/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"\/><\/svg><\/div>\r\n <h3>24\/7 Technical Support<\/h3>\r\n <p>A dedicated team ready to help you anytime after your site goes live.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<section class=\"sm-services\">\r\n <div class=\"sm-container\">\r\n\r\n <div class=\"sm-head\">\r\n <h2>Our Website Design Services<\/h2>\r\n <p>Professional solutions suited to every type of business, helping you grow.<\/p>\r\n <\/div>\r\n\r\n <div class=\"sm-timeline\">\r\n\r\n <div class=\"sm-item right\">\r\n <div class=\"sm-number\">01<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Website Design Services<\/h3>\r\n <p>Comprehensive design solutions tailored to the needs of different businesses.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item left\">\r\n <div class=\"sm-number\">02<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Corporate Website Design<\/h3>\r\n <p>Professional websites that showcase your services and build trust with your customers.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item right\">\r\n <div class=\"sm-number\">03<\/div>\r\n <div class=\"sm-card\">\r\n <h3>E-commerce Store Design<\/h3>\r\n <p>Complete stores with payment gateways, product management, and shipping integration.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item left\">\r\n <div class=\"sm-number\">04<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Landing Page Design<\/h3>\r\n <p>Custom pages for ad campaigns that boost conversion rates at the lowest cost.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item right\">\r\n <div class=\"sm-number\">05<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Website Redesign<\/h3>\r\n <p>Updating and modernizing older sites to improve performance and user experience.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.sm-services{\r\n background:#fff;\r\n padding:60px 20px;\r\n direction:ltr;\r\n}\r\n\r\n.sm-container{\r\n max-width:1100px;\r\n margin:auto;\r\n}\r\n\r\n.sm-head{\r\n text-align:center;\r\n margin-bottom:30px;\r\n}\r\n\r\n.sm-head h2{\r\n font-size:38px;\r\n color:#0B2A5B;\r\n margin-bottom:10px;\r\n}\r\n\r\n.sm-head p{\r\n font-size:17px;\r\n color:#6b7280;\r\n}\r\n\r\n.sm-timeline{\r\n position:relative;\r\n padding:10px 0;\r\n}\r\n\r\n.sm-timeline::before{\r\n content:'';\r\n position:absolute;\r\n width:3px;\r\n background:#1E5BC6;\r\n top:0;\r\n bottom:0;\r\n left:50%;\r\n transform:translateX(-50%);\r\n}\r\n\r\n.sm-item{\r\n width:50%;\r\n padding:8px 25px;\r\n position:relative;\r\n}\r\n\r\n.sm-item.right{\r\n margin-left:auto;\r\n text-align:left;\r\n}\r\n\r\n.sm-item.left{\r\n margin-right:auto;\r\n text-align:left;\r\n}\r\n\r\n.sm-number{\r\n position:absolute;\r\n top:20px;\r\n width:45px;\r\n height:45px;\r\n background:#1E5BC6;\r\n color:#fff;\r\n border-radius:50%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-weight:700;\r\n font-size:16px;\r\n z-index:2;\r\n}\r\n\r\n.sm-item.right .sm-number{\r\n right:-22px;\r\n}\r\n\r\n.sm-item.left .sm-number{\r\n left:-22px;\r\n}\r\n\r\n.sm-card{\r\n background:#F8FAFC;\r\n padding:20px;\r\n border-radius:18px;\r\n box-shadow:0 8px 20px rgba(0,0,0,.04);\r\n transition:.3s;\r\n}\r\n\r\n.sm-card:hover{\r\n transform:translateY(-5px);\r\n}\r\n\r\n.sm-card h3{\r\n font-size:22px;\r\n margin-bottom:10px;\r\n color:#0B2A5B;\r\n}\r\n\r\n.sm-card p{\r\n font-size:16px;\r\n line-height:1.7;\r\n color:#4B5563;\r\n margin:0;\r\n}\r\n\r\n@media(max-width:768px){\r\n .sm-timeline::before{\r\n left:18px;\r\n }\r\n\r\n .sm-item{\r\n width:100%;\r\n padding-left:55px;\r\n padding-right:10px;\r\n }\r\n\r\n .sm-item.right,\r\n .sm-item.left{\r\n margin:0;\r\n }\r\n\r\n .sm-number{\r\n left:-5px !important;\r\n right:auto !important;\r\n }\r\n\r\n .sm-head h2{\r\n font-size:28px;\r\n }\r\n\r\n .sm-card h3{\r\n font-size:20px;\r\n }\r\n\r\n .sm-card p{\r\n font-size:15px;\r\n }\r\n}\r\n<\/style>\r\n <section class=\"sm-process\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-section__title\">\r\n <h2>How We Work<\/h2>\r\n <p>A clear journey from idea to launch, ensuring you get a professional website that fits your goals.<\/p>\r\n <\/div>\r\n <div class=\"sm-steps\">\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">1<\/div>\r\n <h4>Planning & Strategy<\/h4>\r\n <p>Understanding your goals and audience and mapping out the project roadmap.<\/p>\r\n <\/div>\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">2<\/div>\r\n <h4>Creative Design<\/h4>\r\n <p>Turning ideas into modern, easy-to-use interfaces.<\/p>\r\n <\/div>\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">3<\/div>\r\n <h4>Development & Testing<\/h4>\r\n <p>Writing clean code and making sure the site is free of bugs.<\/p>\r\n <\/div>\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">4<\/div>\r\n <h4>Launch & Support<\/h4>\r\n <p>Deploying the site and monitoring performance with ongoing technical support.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<section class=\"sm-compare\">\r\n <div class=\"sm-container\">\r\n\r\n <div class=\"sm-grid\">\r\n\r\n <div class=\"sm-card\">\r\n <div class=\"sm-icon\"><\/div>\r\n <h2>Why Do You Need a Professional Website?<\/h2>\r\n\r\n <div class=\"sm-list\">\r\n <div>Increased credibility and trust<\/div>\r\n <div>Reaching new customers<\/div>\r\n <div>Better visibility on Google<\/div>\r\n <div>Showcasing your services professionally<\/div>\r\n <div>Simplifying bookings and purchases<\/div>\r\n <div>Steadily growing your sales<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-card active\">\r\n <div class=\"sm-icon\"><\/div>\r\n <h2>Choose Swift Mind and Get:<\/h2>\r\n\r\n <div class=\"sm-list\">\r\n <div>A highly responsive website<\/div>\r\n <div>Fast loading speed<\/div>\r\n <div>Full compliance with SEO standards<\/div>\r\n <div>A professional user experience<\/div>\r\n <div>Website protection and security<\/div>\r\n <div>An easy-to-use dashboard<\/div>\r\n <div>The ability to expand and scale anytime<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.sm-compare{\r\n padding:80px 20px;\r\n background:#F8FAFC;\r\n direction:ltr;\r\n}\r\n\r\n.sm-container{\r\n max-width:1200px;\r\n margin:auto;\r\n}\r\n\r\n.sm-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:25px;\r\n}\r\n\r\n.sm-card{\r\n background:#fff;\r\n padding:35px;\r\n border-radius:24px;\r\n box-shadow:0 10px 25px rgba(0,0,0,.05);\r\n}\r\n\r\n.sm-card.active{\r\n background:linear-gradient(135deg,#0B2A5B,#1E5BC6);\r\n color:#fff;\r\n}\r\n\r\n.sm-icon{\r\n font-size:35px;\r\n margin-bottom:20px;\r\n}\r\n\r\n.sm-card h2{\r\n font-size:28px;\r\n margin-bottom:25px;\r\n line-height:1.5;\r\n}\r\n\r\n.sm-list{\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n}\r\n\r\n.sm-list div{\r\n padding:14px 18px;\r\n padding-left:45px;\r\n background:rgba(255,255,255,.06);\r\n border-radius:14px;\r\n font-size:16px;\r\n line-height:1.7;\r\n position:relative;\r\n}\r\n\r\n.sm-list div::before{\r\n content:\"\u2714\";\r\n position:absolute;\r\n left:18px;\r\n top:50%;\r\n transform:translateY(-50%);\r\n font-size:16px;\r\n font-weight:bold;\r\n color:#1E5BC6;\r\n}\r\n\r\n.sm-card:not(.active) .sm-list div{\r\n background:#F8FAFC;\r\n}\r\n\r\n.sm-card.active .sm-list div::before{\r\n color:#fff;\r\n}\r\n\r\n@media(max-width:768px){\r\n .sm-grid{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .sm-card h2{\r\n font-size:22px;\r\n }\r\n}\r\n<\/style>\r\n <section class=\"sm-faq\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-section__title\">\r\n <h2>Frequently Asked Questions<\/h2>\r\n <p>Here are the top questions you'll want answered before starting your website project.<\/p>\r\n <\/div>\r\n <div class=\"sm-faq__list\">\r\n <div class=\"sm-faq__item open\">\r\n <button class=\"sm-faq__q\">How long does it take to build the website? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>It depends on the size of the project, but medium-sized websites typically take 3 to 6 weeks, with a clear timeline from day one.<\/div><\/div>\r\n <\/div>\r\n <div class=\"sm-faq__item\">\r\n <button class=\"sm-faq__q\">Is the design mobile-friendly? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>Absolutely \u2014 we follow a mobile-first approach to ensure smooth display across all screens and devices.<\/div><\/div>\r\n <\/div>\r\n <div class=\"sm-faq__item\">\r\n <button class=\"sm-faq__q\">Do you offer hosting services? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>Yes, we provide secure, performance-optimized hosting solutions, along with full site management after launch.<\/div><\/div>\r\n <\/div>\r\n <div class=\"sm-faq__item\">\r\n <button class=\"sm-faq__q\">What technologies do you use? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>We use WordPress, React, Next.js, Shopify, WooCommerce, and whichever tools best fit each project's needs.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"sm-cta\">\r\n <div class=\"sm-wrap\">\r\n <h2>Ready to Get Started?<\/h2>\r\n <p>Let's build your digital future together, today.<\/p>\r\n <a href=\"https:\/\/wa.me\/201097649856\" class=\"sm-btn\" target=\"_blank\" rel=\"noopener\">Contact Us <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n document.querySelectorAll('.sm-faq__q').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const item = btn.closest('.sm-faq__item');\r\n item.classList.toggle('open');\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Website Design and Development | Swift Mind Website Development Services Turn Your Idea Into a Professional Website That Grows Your Business Modern design, fast performance, and a user experience that wins you more customers At Swift Mind, we craft websites that blend technical artistry with high performance, built specifically to grow your business in the […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-9523","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages\/9523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/comments?post=9523"}],"version-history":[{"count":4,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages\/9523\/revisions"}],"predecessor-version":[{"id":9544,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages\/9523\/revisions\/9544"}],"wp:attachment":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/media?parent=9523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nWebsite Design and Development | Swift Mind<\/title>\r\n<meta name=\"description\" content=\"Professional, responsive website design using the latest 2026 technologies, blazing-fast performance, SEO, and a flawless user experience to grow your business in Saudi Arabia.\">\r\n<meta property=\"og:title\" content=\"Website Design and Development | Swift Mind\">\r\n<meta property=\"og:description\" content=\"Modern websites that turn visitors into customers.\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<meta name=\"twitter:card\" content=\"summary_large_image\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<\/head>\r\n<body>\r\n\r\n<style>\r\n .sm-svc-page { font-family: 'Tajawal', system-ui, sans-serif; color: #0B2A5B; box-sizing: border-box; overflow-x: hidden; background: #F5F8FC; }\r\n .sm-svc-page *, .sm-svc-page *::before, .sm-svc-page *::after { box-sizing: border-box; }\r\n .sm-svc-page .sm-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }\r\n\r\n \/* Hero *\/\r\n .sm-svc-page .sm-hero { position: relative; background: #0B2A5B; padding: clamp(64px, 10vw, 140px) 0 clamp(100px, 14vw, 180px); color: #fff; overflow: hidden; }\r\n .sm-svc-page .sm-hero::before,\r\n .sm-svc-page .sm-hero::after { content: \"\"; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22; pointer-events: none; }\r\n .sm-svc-page .sm-hero::before { width: 520px; height: 520px; background: #1E5BC6; top: -120px; left: -120px; }\r\n .sm-svc-page .sm-hero::after { width: 360px; height: 360px; background: #5BA8F5; bottom: -80px; right: -80px; opacity: .14; }\r\n .sm-svc-page .sm-hero__inner { position: relative; z-index: 2; text-align: center; max-width: 840px; margin: 0 auto; }\r\n .sm-svc-page .sm-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: rgba(30,91,198,.18); border: 1px solid rgba(91,168,245,.35); color: #5BA8F5; font-size: 14px; font-weight: 700; margin-bottom: 24px; }\r\n .sm-svc-page .sm-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #5BA8F5; box-shadow: 0 0 10px #5BA8F5; }\r\n .sm-svc-page h1 { margin: 0 0 22px; font-size: clamp(32px, 5vw, 64px); font-weight: 900; line-height: 1.15; letter-spacing: -0.5px; }\r\n .sm-svc-page h1 span { color: #5BA8F5; }\r\n .sm-svc-page .sm-lead { color: #B9CCEF; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.85; margin: 0 0 36px; }\r\n .sm-svc-page .sm-hero .sm-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; border-radius: 999px; background: #1E5BC6; color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; transition: .25s ease; box-shadow: 0 16px 40px -12px rgba(30,91,198,.55); }\r\n .sm-svc-page .sm-hero .sm-btn:hover { background: #2563EB; transform: translateY(-2px); box-shadow: 0 22px 50px -12px rgba(30,91,198,.65); }\r\n .sm-svc-page .sm-btn svg { width: 20px; height: 20px; }\r\n\r\n \/* Floating cards *\/\r\n .sm-svc-page .sm-float { position: relative; z-index: 3; margin-top: -90px; }\r\n .sm-svc-page .sm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n .sm-svc-page .sm-card { background: #fff; padding: 32px; border-radius: 24px; border: 1px solid rgba(11,42,91,.08); box-shadow: 0 20px 50px -20px rgba(11,42,91,.14); transition: .3s ease; }\r\n .sm-svc-page .sm-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px -24px rgba(11,42,91,.22); border-color: rgba(30,91,198,.2); }\r\n .sm-svc-page .sm-card__ico { width: 58px; height: 58px; border-radius: 16px; background: #F0F6FF; color: #1E5BC6; display: grid; place-items: center; margin-bottom: 20px; }\r\n .sm-svc-page .sm-card__ico svg { width: 28px; height: 28px; }\r\n .sm-svc-page .sm-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #0B2A5B; }\r\n .sm-svc-page .sm-card p { margin: 0; color: #4A5A78; font-size: 15px; line-height: 1.8; }\r\n\r\n \/* Process *\/\r\n .sm-svc-page .sm-process { padding: clamp(70px, 9vw, 120px) 0; }\r\n .sm-svc-page .sm-section__title { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }\r\n .sm-svc-page .sm-section__title h2 { margin: 0 0 14px; font-size: clamp(28px, 3.5vw, 44px); font-weight: 900; color: #0B2A5B; }\r\n .sm-svc-page .sm-section__title p { margin: 0 auto; color: #5B6A8A; font-size: 17px; line-height: 1.8; max-width: 620px; }\r\n .sm-svc-page .sm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\r\n .sm-svc-page .sm-step { position: relative; padding: 32px 24px; background: #fff; border-radius: 22px; border: 1px solid rgba(11,42,91,.08); text-align: center; }\r\n .sm-svc-page .sm-step__num { width: 44px; height: 44px; border-radius: 50%; background: #1E5BC6; color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; margin: 0 auto 18px; }\r\n .sm-svc-page .sm-step h4 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: #0B2A5B; }\r\n .sm-svc-page .sm-step p { margin: 0; color: #5B6A8A; font-size: 14px; line-height: 1.75; }\r\n.hero-title h1{\r\n font-size: 38px;\r\n line-height: 1.4;\r\n}\r\n\r\n.hero-title h1 span{\r\n font-size: 22px;\r\n}\r\n\r\n@media (max-width: 767px){\r\n .hero-title h1{\r\n font-size: 24px;\r\n line-height: 1.6;\r\n }\r\n\r\n .hero-title h1 span{\r\n font-size: 16px;\r\n }\r\n}\r\n \/* FAQ *\/\r\n .sm-svc-page .sm-faq { padding: clamp(50px, 6vw, 90px) 0; background: #fff; }\r\n .sm-svc-page .sm-faq__list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }\r\n .sm-svc-page .sm-faq__item { border: 1px solid rgba(11,42,91,.1); border-radius: 16px; overflow: hidden; }\r\n .sm-svc-page .sm-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: #FAFBFD; border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; color: #0B2A5B; text-align: left; }\r\n .sm-svc-page .sm-faq__q svg { width: 18px; height: 18px; color: #1E5BC6; transition: transform .25s ease; flex-shrink: 0; }\r\n .sm-svc-page .sm-faq__item.open .sm-faq__q svg { transform: rotate(180deg); }\r\n .sm-svc-page .sm-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }\r\n .sm-svc-page .sm-faq__item.open .sm-faq__a { max-height: 300px; }\r\n .sm-svc-page .sm-faq__a > div { padding: 0 24px 20px; color: #5B6A8A; font-size: 15px; line-height: 1.85; }\r\n\r\n \/* CTA *\/\r\n .sm-svc-page .sm-cta { padding: clamp(70px, 8vw, 120px) 0; background: #0B2A5B; color: #fff; text-align: center; position: relative; overflow: hidden; }\r\n .sm-svc-page .sm-cta::before { content: \"\"; position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% -10%, rgba(91,168,245,.2), transparent 60%); pointer-events: none; }\r\n .sm-svc-page .sm-cta h2 { position: relative; z-index: 2; margin: 0 0 16px; font-size: clamp(26px, 3.5vw, 44px); font-weight: 900; }\r\n .sm-svc-page .sm-cta p { position: relative; z-index: 2; margin: 0 0 32px; color: #B9CCEF; font-size: 17px; }\r\n .sm-svc-page .sm-cta .sm-btn { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 2; padding: 16px 36px; border-radius: 999px; background: #fff; color: #0B2A5B; font-weight: 900; font-size: 17px; text-decoration: none; transition: .25s ease; }\r\n .sm-svc-page .sm-cta .sm-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -12px rgba(255,255,255,.25); }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 992px) {\r\n .sm-svc-page .sm-grid-3 { grid-template-columns: repeat(2, 1fr); }\r\n .sm-svc-page .sm-steps { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (max-width: 640px) {\r\n .sm-svc-page .sm-grid-3 { grid-template-columns: 1fr; }\r\n .sm-svc-page .sm-steps { grid-template-columns: 1fr; }\r\n .sm-svc-page .sm-card, .sm-svc-page .sm-step { padding: 24px; }\r\n .sm-svc-page .sm-float { margin-top: -50px; }\r\n }\r\n<\/style>\r\n\r\n<div class=\"sm-svc-page\">\r\n\r\n <section class=\"sm-hero\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-hero__inner\">\r\n <span class=\"sm-tag\"><span class=\"dot\"><\/span> Website Development Services<\/span>\r\n \r\n <section class=\"hero-title\">\r\n <h1>\r\n Turn Your Idea Into a Professional Website That Grows Your Business <br>\r\n <span>Modern design, fast performance, and a user experience that wins you more customers<\/span>\r\n <\/h1>\r\n<\/section>\r\n <p class=\"sm-lead\">At Swift Mind, we craft websites that blend technical artistry with high performance, built specifically to grow your business in the Saudi market.<\/p>\r\n <a href=\"https:\/\/wa.me\/201097649856\" class=\"sm-btn\" target=\"_blank\" rel=\"noopener\">Start Your Project Now <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"sm-float\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-grid-3\">\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 10V3L4 14h7v7l9-11h-7z\"\/><\/svg><\/div>\r\n <h3>Lightning-Fast Performance<\/h3>\r\n <p>Technically optimized sites that guarantee top loading speed and the best possible user experience.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><path d=\"M12 18h.01\"\/><\/svg><\/div>\r\n <h3>100% Responsive Design<\/h3>\r\n <p>Full coverage across every device and screen size, with a strong focus on mobile.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg><\/div>\r\n <h3>SEO-Ready From Day One<\/h3>\r\n <p>A technical structure optimized for search engines to help you rank on Google.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\r\n <h3>Strong Security & Protection<\/h3>\r\n <p>SSL certificates, attack protection, and regular backups.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/svg><\/div>\r\n <h3>2026 Technologies<\/h3>\r\n <p>React, Next.js, WordPress, or whichever technology solution fits your project best.<\/p>\r\n <\/article>\r\n <article class=\"sm-card\">\r\n <div class=\"sm-card__ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"\/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"\/><\/svg><\/div>\r\n <h3>24\/7 Technical Support<\/h3>\r\n <p>A dedicated team ready to help you anytime after your site goes live.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<section class=\"sm-services\">\r\n <div class=\"sm-container\">\r\n\r\n <div class=\"sm-head\">\r\n <h2>Our Website Design Services<\/h2>\r\n <p>Professional solutions suited to every type of business, helping you grow.<\/p>\r\n <\/div>\r\n\r\n <div class=\"sm-timeline\">\r\n\r\n <div class=\"sm-item right\">\r\n <div class=\"sm-number\">01<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Website Design Services<\/h3>\r\n <p>Comprehensive design solutions tailored to the needs of different businesses.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item left\">\r\n <div class=\"sm-number\">02<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Corporate Website Design<\/h3>\r\n <p>Professional websites that showcase your services and build trust with your customers.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item right\">\r\n <div class=\"sm-number\">03<\/div>\r\n <div class=\"sm-card\">\r\n <h3>E-commerce Store Design<\/h3>\r\n <p>Complete stores with payment gateways, product management, and shipping integration.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item left\">\r\n <div class=\"sm-number\">04<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Landing Page Design<\/h3>\r\n <p>Custom pages for ad campaigns that boost conversion rates at the lowest cost.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-item right\">\r\n <div class=\"sm-number\">05<\/div>\r\n <div class=\"sm-card\">\r\n <h3>Website Redesign<\/h3>\r\n <p>Updating and modernizing older sites to improve performance and user experience.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.sm-services{\r\n background:#fff;\r\n padding:60px 20px;\r\n direction:ltr;\r\n}\r\n\r\n.sm-container{\r\n max-width:1100px;\r\n margin:auto;\r\n}\r\n\r\n.sm-head{\r\n text-align:center;\r\n margin-bottom:30px;\r\n}\r\n\r\n.sm-head h2{\r\n font-size:38px;\r\n color:#0B2A5B;\r\n margin-bottom:10px;\r\n}\r\n\r\n.sm-head p{\r\n font-size:17px;\r\n color:#6b7280;\r\n}\r\n\r\n.sm-timeline{\r\n position:relative;\r\n padding:10px 0;\r\n}\r\n\r\n.sm-timeline::before{\r\n content:'';\r\n position:absolute;\r\n width:3px;\r\n background:#1E5BC6;\r\n top:0;\r\n bottom:0;\r\n left:50%;\r\n transform:translateX(-50%);\r\n}\r\n\r\n.sm-item{\r\n width:50%;\r\n padding:8px 25px;\r\n position:relative;\r\n}\r\n\r\n.sm-item.right{\r\n margin-left:auto;\r\n text-align:left;\r\n}\r\n\r\n.sm-item.left{\r\n margin-right:auto;\r\n text-align:left;\r\n}\r\n\r\n.sm-number{\r\n position:absolute;\r\n top:20px;\r\n width:45px;\r\n height:45px;\r\n background:#1E5BC6;\r\n color:#fff;\r\n border-radius:50%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-weight:700;\r\n font-size:16px;\r\n z-index:2;\r\n}\r\n\r\n.sm-item.right .sm-number{\r\n right:-22px;\r\n}\r\n\r\n.sm-item.left .sm-number{\r\n left:-22px;\r\n}\r\n\r\n.sm-card{\r\n background:#F8FAFC;\r\n padding:20px;\r\n border-radius:18px;\r\n box-shadow:0 8px 20px rgba(0,0,0,.04);\r\n transition:.3s;\r\n}\r\n\r\n.sm-card:hover{\r\n transform:translateY(-5px);\r\n}\r\n\r\n.sm-card h3{\r\n font-size:22px;\r\n margin-bottom:10px;\r\n color:#0B2A5B;\r\n}\r\n\r\n.sm-card p{\r\n font-size:16px;\r\n line-height:1.7;\r\n color:#4B5563;\r\n margin:0;\r\n}\r\n\r\n@media(max-width:768px){\r\n .sm-timeline::before{\r\n left:18px;\r\n }\r\n\r\n .sm-item{\r\n width:100%;\r\n padding-left:55px;\r\n padding-right:10px;\r\n }\r\n\r\n .sm-item.right,\r\n .sm-item.left{\r\n margin:0;\r\n }\r\n\r\n .sm-number{\r\n left:-5px !important;\r\n right:auto !important;\r\n }\r\n\r\n .sm-head h2{\r\n font-size:28px;\r\n }\r\n\r\n .sm-card h3{\r\n font-size:20px;\r\n }\r\n\r\n .sm-card p{\r\n font-size:15px;\r\n }\r\n}\r\n<\/style>\r\n <section class=\"sm-process\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-section__title\">\r\n <h2>How We Work<\/h2>\r\n <p>A clear journey from idea to launch, ensuring you get a professional website that fits your goals.<\/p>\r\n <\/div>\r\n <div class=\"sm-steps\">\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">1<\/div>\r\n <h4>Planning & Strategy<\/h4>\r\n <p>Understanding your goals and audience and mapping out the project roadmap.<\/p>\r\n <\/div>\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">2<\/div>\r\n <h4>Creative Design<\/h4>\r\n <p>Turning ideas into modern, easy-to-use interfaces.<\/p>\r\n <\/div>\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">3<\/div>\r\n <h4>Development & Testing<\/h4>\r\n <p>Writing clean code and making sure the site is free of bugs.<\/p>\r\n <\/div>\r\n <div class=\"sm-step\">\r\n <div class=\"sm-step__num\">4<\/div>\r\n <h4>Launch & Support<\/h4>\r\n <p>Deploying the site and monitoring performance with ongoing technical support.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<section class=\"sm-compare\">\r\n <div class=\"sm-container\">\r\n\r\n <div class=\"sm-grid\">\r\n\r\n <div class=\"sm-card\">\r\n <div class=\"sm-icon\"><\/div>\r\n <h2>Why Do You Need a Professional Website?<\/h2>\r\n\r\n <div class=\"sm-list\">\r\n <div>Increased credibility and trust<\/div>\r\n <div>Reaching new customers<\/div>\r\n <div>Better visibility on Google<\/div>\r\n <div>Showcasing your services professionally<\/div>\r\n <div>Simplifying bookings and purchases<\/div>\r\n <div>Steadily growing your sales<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sm-card active\">\r\n <div class=\"sm-icon\"><\/div>\r\n <h2>Choose Swift Mind and Get:<\/h2>\r\n\r\n <div class=\"sm-list\">\r\n <div>A highly responsive website<\/div>\r\n <div>Fast loading speed<\/div>\r\n <div>Full compliance with SEO standards<\/div>\r\n <div>A professional user experience<\/div>\r\n <div>Website protection and security<\/div>\r\n <div>An easy-to-use dashboard<\/div>\r\n <div>The ability to expand and scale anytime<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.sm-compare{\r\n padding:80px 20px;\r\n background:#F8FAFC;\r\n direction:ltr;\r\n}\r\n\r\n.sm-container{\r\n max-width:1200px;\r\n margin:auto;\r\n}\r\n\r\n.sm-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:25px;\r\n}\r\n\r\n.sm-card{\r\n background:#fff;\r\n padding:35px;\r\n border-radius:24px;\r\n box-shadow:0 10px 25px rgba(0,0,0,.05);\r\n}\r\n\r\n.sm-card.active{\r\n background:linear-gradient(135deg,#0B2A5B,#1E5BC6);\r\n color:#fff;\r\n}\r\n\r\n.sm-icon{\r\n font-size:35px;\r\n margin-bottom:20px;\r\n}\r\n\r\n.sm-card h2{\r\n font-size:28px;\r\n margin-bottom:25px;\r\n line-height:1.5;\r\n}\r\n\r\n.sm-list{\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n}\r\n\r\n.sm-list div{\r\n padding:14px 18px;\r\n padding-left:45px;\r\n background:rgba(255,255,255,.06);\r\n border-radius:14px;\r\n font-size:16px;\r\n line-height:1.7;\r\n position:relative;\r\n}\r\n\r\n.sm-list div::before{\r\n content:\"\u2714\";\r\n position:absolute;\r\n left:18px;\r\n top:50%;\r\n transform:translateY(-50%);\r\n font-size:16px;\r\n font-weight:bold;\r\n color:#1E5BC6;\r\n}\r\n\r\n.sm-card:not(.active) .sm-list div{\r\n background:#F8FAFC;\r\n}\r\n\r\n.sm-card.active .sm-list div::before{\r\n color:#fff;\r\n}\r\n\r\n@media(max-width:768px){\r\n .sm-grid{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .sm-card h2{\r\n font-size:22px;\r\n }\r\n}\r\n<\/style>\r\n <section class=\"sm-faq\">\r\n <div class=\"sm-wrap\">\r\n <div class=\"sm-section__title\">\r\n <h2>Frequently Asked Questions<\/h2>\r\n <p>Here are the top questions you'll want answered before starting your website project.<\/p>\r\n <\/div>\r\n <div class=\"sm-faq__list\">\r\n <div class=\"sm-faq__item open\">\r\n <button class=\"sm-faq__q\">How long does it take to build the website? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>It depends on the size of the project, but medium-sized websites typically take 3 to 6 weeks, with a clear timeline from day one.<\/div><\/div>\r\n <\/div>\r\n <div class=\"sm-faq__item\">\r\n <button class=\"sm-faq__q\">Is the design mobile-friendly? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>Absolutely \u2014 we follow a mobile-first approach to ensure smooth display across all screens and devices.<\/div><\/div>\r\n <\/div>\r\n <div class=\"sm-faq__item\">\r\n <button class=\"sm-faq__q\">Do you offer hosting services? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>Yes, we provide secure, performance-optimized hosting solutions, along with full site management after launch.<\/div><\/div>\r\n <\/div>\r\n <div class=\"sm-faq__item\">\r\n <button class=\"sm-faq__q\">What technologies do you use? <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 9l-7 7-7-7\"\/><\/svg><\/button>\r\n <div class=\"sm-faq__a\"><div>We use WordPress, React, Next.js, Shopify, WooCommerce, and whichever tools best fit each project's needs.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"sm-cta\">\r\n <div class=\"sm-wrap\">\r\n <h2>Ready to Get Started?<\/h2>\r\n <p>Let's build your digital future together, today.<\/p>\r\n <a href=\"https:\/\/wa.me\/201097649856\" class=\"sm-btn\" target=\"_blank\" rel=\"noopener\">Contact Us <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg><\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n document.querySelectorAll('.sm-faq__q').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const item = btn.closest('.sm-faq__item');\r\n item.classList.toggle('open');\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Website Design and Development | Swift Mind Website Development Services Turn Your Idea Into a Professional Website That Grows Your Business Modern design, fast performance, and a user experience that wins you more customers At Swift Mind, we craft websites that blend technical artistry with high performance, built specifically to grow your business in the […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-9523","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages\/9523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/comments?post=9523"}],"version-history":[{"count":4,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages\/9523\/revisions"}],"predecessor-version":[{"id":9544,"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/pages\/9523\/revisions\/9544"}],"wp:attachment":[{"href":"https:\/\/swiftmynd.com\/en\/wp-json\/wp\/v2\/media?parent=9523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}