{"id":3510,"date":"2026-02-24T13:20:30","date_gmt":"2026-02-24T13:20:30","guid":{"rendered":"https:\/\/zropixel.com\/zropixel_uat\/?page_id=3510"},"modified":"2026-03-02T16:36:18","modified_gmt":"2026-03-02T16:36:18","slug":"static-website-design","status":"publish","type":"page","link":"https:\/\/zropixel.com\/zropixel_uat\/static-website-design\/","title":{"rendered":"Static website Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3510\" class=\"elementor elementor-3510\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1700116 e-flex e-con-boxed e-con e-parent\" data-id=\"1700116\" 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-8d98cb4 elementor-widget elementor-widget-tx_service_section elh-el tx_service_section\" data-id=\"8d98cb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;design_style&quot;:&quot;style_1&quot;}\" data-widget_type=\"tx_service_section.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"as-services-1-area pt-70 reny pb-120 tx-section \">\n    <div class=\"container as-container-1\">\n        <div class=\"as-services-1-container\">\n            <!-- section-title -->\n            <div class=\"as-services-1-sec-title mb-50\">\n                <div class=\"left\">\n                                        <h6 class=\"as-subtitle-1 tx-subTitle\">\n                        <span class=\"icon\">\n                            {<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>}                        <\/span>\n                        Services                    <\/h6>\n                                        <h2 class=\"tx-title as-sec-title-1 wa_title_spilt_1\">Fast, Secure, and Professional Websites for Growing Businesses<\/h2>                <\/div>\n\n                \n                <div class=\"right\">\n                                        <p class=\"as-p-1 sec-disc wow fadeInRight2 tx-description\">\n                        \"A static website is the perfect solution for businesses looking to establish a strong online presence with a simple, elegant, and cost-effective platform. Our Static Website Design &amp; Development services focus on delivering visually appealing, high-speed, and secure websites that effectively showcase your brand, services, and business information.\n\nWhether you are a startup, small business, or corporate organization, a static website provides reliability, performance, and ease of deployment.\"                    <\/p>\n                    \n                    \n                <\/div>\n            <\/div>\n\n            <!--<div class=\"as-services-1-wrap\">\n                            <\/div>-->\n        <\/div>\n    <\/div>\n<\/section>\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-1ccc5f2 e-con-full e-flex e-con e-parent\" data-id=\"1ccc5f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-417ec8f elementor-widget elementor-widget-tx_count_box elh-el tx_count_box\" data-id=\"417ec8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;design_style&quot;:&quot;style_1&quot;}\" data-widget_type=\"tx_count_box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"as-success-2-area pt-90 pb-130 tx-section has-dark\">\n    <div class=\"container as-container-2\">\n        <div class=\"as-success-2-wrap mb-65\">\n            <!-- section-title -->\n            <div class=\"as-success-2-sec-title mb-40\">\n                                <h6 class=\"as-subtitle-2 tx-subTitle\">\n                    Our Static Website Services                <\/h6>\n                                <h2 class=\"tx-title as-sec-title-2 wa_title_spilt_1\">Comprehensive Website Solutions for Modern Businesses UAE<\/h2>\n                            <\/div>\n\n            <!-- right -->\n            <div class=\"as-success-2-experience\">\n                <!--<h3 class=\"as-h-2 number wa-p-relative\">\n                    <span class=\"odometer\" data-count=\"10\">0<\/span>                                        <span class=\"icon\">\n                        <svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg>                    <\/span>\n                                    <\/h3>-->\n                <div class=\"content-wrap\">\n                                        <h3 class=\"as-h-2 title wow fadeInUp2\">\n                        Years of experience                    <\/h3>\n                    \n                                        <p class=\"as-p-2 disc wow fadeInUp2\" data-wow-delay=\".1s\">\n                        We combine creative design, advanced technology, and SEO best practices to create websites that perform exceptionally in today\u2019s competitive digital landscape.                    <\/p>\n                                    <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"as-success-2-wrap-2\">\n                        <div class=\"as-success-2-item\">\n                                <h3 class=\"as-h-2 number wow fadeInRight2\">\n                    1                <\/h3>\n                \n                                <div class=\"as-p-2 disc wow fadeInRight2\" data-wow-delay=\".2s\">\n                    <h5 style=\"color:#fff\">Custom Website Design<\/h5>\n                    We craft modern, visually engaging designs that reflect your brand identity and create a lasting impression.                <\/div>\n                            <\/div>\n                        <div class=\"as-success-2-item\">\n                                <h3 class=\"as-h-2 number wow fadeInRight2\">\n                    2                <\/h3>\n                \n                                <div class=\"as-p-2 disc wow fadeInRight2\" data-wow-delay=\".2s\">\n                    <h5 style=\"color:#fff\">Mobile-Responsive Layout<\/h5>\n                    Your website will adapt seamlessly to all screen sizes, ensuring a smooth user experience across devices.                <\/div>\n                            <\/div>\n                        <div class=\"as-success-2-item\">\n                                <h3 class=\"as-h-2 number wow fadeInRight2\">\n                    3                <\/h3>\n                \n                                <div class=\"as-p-2 disc wow fadeInRight2\" data-wow-delay=\".2s\">\n                    <h5 style=\"color:#fff\">SEO-Friendly Structure<\/h5>\n                    Built with clean code and optimized architecture to help search engines easily crawl and index your site.                <\/div>\n                            <\/div>\n                        <div class=\"as-success-2-item\">\n                                <h3 class=\"as-h-2 number wow fadeInRight2\">\n                    4                <\/h3>\n                \n                                <div class=\"as-p-2 disc wow fadeInRight2\" data-wow-delay=\".2s\">\n                    <h5 style=\"color:#fff\">High Security<\/h5>\n                    With fewer dynamic components, static websites naturally reduce vulnerability to cyber threats.                <\/div>\n                            <\/div>\n                        <div class=\"as-success-2-item\">\n                                <h3 class=\"as-h-2 number wow fadeInRight2\">\n                    5                <\/h3>\n                \n                                <div class=\"as-p-2 disc wow fadeInRight2\" data-wow-delay=\".2s\">\n                    <h5 style=\"color:#fff\">Speed Optimization<\/h5>\n                    We prioritize performance to ensure fast page loads that improve user satisfaction and search rankings.                <\/div>\n                            <\/div>\n                        <div class=\"as-success-2-item\">\n                                <h3 class=\"as-h-2 number wow fadeInRight2\">\n                    6                <\/h3>\n                \n                                <div class=\"as-p-2 disc wow fadeInRight2\" data-wow-delay=\".2s\">\n                    <h5 style=\"color:#fff\">Hosting &amp; Deployment Support<\/h5>\n                    Our team assists with secure hosting setup and smooth website deployment.                <\/div>\n                            <\/div>\n                    <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a29ac6 e-con-full e-flex e-con e-parent\" data-id=\"6a29ac6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcb5b16 elementor-widget elementor-widget-html\" data-id=\"dcb5b16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n.bb-wrap {\n  --red:      #E01A23;\n  --red-soft: rgba(224,26,35,0.06);\n  --white:    #ffffff;\n  --dark:     #111111;\n  --muted:    #6b7280;\n  --border:   rgba(0,0,0,0.08);\n  --ease:     cubic-bezier(0.4,0,0.2,1);\n  box-sizing: border-box;\n}\n.bb-wrap *, .bb-wrap *::before, .bb-wrap *::after {\n  box-sizing: inherit; margin: 0; padding: 0;\n}\n\n\/* \u2500\u2500 Section \u2500\u2500 *\/\n.bb-section {\n  padding: 20px;\n  position: relative;\n  overflow: hidden;\n  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 40%, #fff0f0 70%, #fff8f8 100%);\n}\n\n\/* Soft red overlay *\/\n.bb-section::before {\n  content: '';\n  position: absolute; inset: 0;\n  background: radial-gradient(ellipse 70% 55% at 95% 5%, rgba(224,26,35,0.09) 0%, transparent 55%),\n              radial-gradient(ellipse 55% 45% at 5% 95%, rgba(224,26,35,0.07) 0%, transparent 50%);\n  pointer-events: none; z-index: 0;\n}\n\n\/* \u2500\u2500 Decorative SVG background shapes \u2500\u2500 *\/\n.bb-shapes {\n  position: absolute; inset: 0;\n  pointer-events: none; z-index: 0;\n  overflow: hidden;\n}\n\n\/* \u2500\u2500 Container \u2500\u2500 *\/\n.bb-container {\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n  position: relative; z-index: 1;\n}\n\n\/* \u2500\u2500 2-col grid \u2500\u2500 *\/\n.bb-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 28px;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n.bb-card {\n  background: var(--white);\n  border: 1px solid var(--border);\n  padding: 48px 44px 52px;\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.05);\n  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s;\n  opacity: 0; transform: translateY(20px);\n  animation: bbUp 0.65s var(--ease) forwards;\n}\n.bb-card:nth-child(1) { animation-delay: 0.08s; }\n.bb-card:nth-child(2) { animation-delay: 0.18s; }\n\n.bb-card:hover {\n  box-shadow: 0 12px 48px rgba(224,26,35,0.1);\n  transform: translateY(-4px);\n  border-color: rgba(224,26,35,0.2);\n}\n\n\/* Red top bar *\/\n.bb-card::before {\n  content: '';\n  position: absolute; top: 0; left: 0;\n  width: 0; height: 3px;\n  background: var(--red);\n  transition: width 0.45s var(--ease);\n}\n.bb-card:hover::before { width: 100%; }\n\n\/* Corner accent *\/\n.bb-card::after {\n  content: '';\n  position: absolute; top: 0; right: 0;\n  width: 0; height: 0; border-style: solid;\n  border-width: 0 56px 56px 0;\n  border-color: transparent rgba(224,26,35,0.06) transparent transparent;\n  transition: border-color 0.3s;\n}\n.bb-card:hover::after {\n  border-color: transparent rgba(224,26,35,0.13) transparent transparent;\n}\n\n\/* Card number *\/\n.bb-num {\n  font-size: 10px; font-weight: 700;\n  letter-spacing: 0.2em; text-transform: uppercase;\n  color: var(--red); margin-bottom: 20px;\n  display: flex; align-items: center; gap: 10px;\n}\n.bb-num::after {\n  content: ''; flex: 1; height: 1px;\n  background: linear-gradient(to right, var(--border), transparent);\n}\n\n\/* Heading *\/\n.bb-heading {\n  font-size: 24px; font-weight: 800;\n  line-height: 1.15; letter-spacing: -0.02em;\n  color: var(--dark); margin-bottom: 10px;\n  transition: color 0.2s;\n}\n.bb-card:hover .bb-heading { color: var(--red); }\n\n\/* Sub heading *\/\n.bb-sub {\n  font-size: 13.5px; font-weight: 600;\n  color: var(--red); margin-bottom: 20px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--border);\n  line-height: 1.4;\n}\n\n\/* Body text *\/\n.bb-body {\n  font-size: 14px; line-height: 1.82; color: var(--muted);\n  margin-bottom: 24px;\n}\n.bb-body:last-child { margin-bottom: 0; }\n\n\/* Bullet list *\/\n.bb-list {\n  list-style: none;\n  display: flex; flex-direction: column; gap: 10px;\n  margin: 20px 0 24px;\n}\n.bb-list li {\n  display: flex; align-items: flex-start; gap: 11px;\n  font-size: 13.5px; line-height: 1.55; color: var(--muted);\n}\n.bb-list li .bb-dot {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 18px; height: 18px;\n  background: var(--red-soft);\n  border: 1px solid rgba(224,26,35,0.15);\n  flex-shrink: 0; margin-top: 1px;\n}\n.bb-list li .bb-dot svg {\n  width: 9px; height: 9px;\n  stroke: var(--red); fill: none;\n  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;\n}\n\n\/* Closing line *\/\n.bb-closing {\n  font-size: 14px; font-weight: 600;\n  color: var(--dark); line-height: 1.6;\n  padding-top: 20px;\n  border-top: 1px solid var(--border);\n  margin-top: 8px;\n}\n\n@keyframes bbUp {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Responsive *\/\n@media (max-width: 860px) {\n  .bb-grid { grid-template-columns: 1fr; }\n  .bb-container { padding: 0; }\n}\n@media (max-width: 540px) {\n  .bb-container { padding: 0; }\n  .bb-card { padding: 36px 26px 40px; }\n}\n<\/style>\n\n<!-- Background decorative shapes -->\n<div class=\"bb-wrap\">\n  <section class=\"bb-section\">\n\n    <!-- SVG decorative layer -->\n    <div class=\"bb-shapes\">\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1280 700\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <!-- diagonal lines top-right -->\n        <g stroke=\"rgba(224,26,35,0.07)\" stroke-width=\"1\" fill=\"none\">\n          <line x1=\"900\" y1=\"0\"   x2=\"1280\" y2=\"380\"\/>\n          <line x1=\"960\" y1=\"0\"   x2=\"1280\" y2=\"320\"\/>\n          <line x1=\"1020\" y1=\"0\"  x2=\"1280\" y2=\"260\"\/>\n          <line x1=\"1080\" y1=\"0\"  x2=\"1280\" y2=\"200\"\/>\n          <line x1=\"1140\" y1=\"0\"  x2=\"1280\" y2=\"140\"\/>\n          <line x1=\"1200\" y1=\"0\"  x2=\"1280\" y2=\"80\"\/>\n        <\/g>\n        <!-- diagonal lines bottom-left -->\n        <g stroke=\"rgba(224,26,35,0.06)\" stroke-width=\"1\" fill=\"none\">\n          <line x1=\"0\" y1=\"320\"  x2=\"380\" y2=\"700\"\/>\n          <line x1=\"0\" y1=\"380\"  x2=\"320\" y2=\"700\"\/>\n          <line x1=\"0\" y1=\"440\"  x2=\"260\" y2=\"700\"\/>\n          <line x1=\"0\" y1=\"500\"  x2=\"200\" y2=\"700\"\/>\n          <line x1=\"0\" y1=\"560\"  x2=\"140\" y2=\"700\"\/>\n          <line x1=\"0\" y1=\"620\"  x2=\"80\"  y2=\"700\"\/>\n        <\/g>\n        <!-- Large circle top-right -->\n        <circle cx=\"1200\" cy=\"-60\" r=\"280\" stroke=\"rgba(224,26,35,0.05)\" stroke-width=\"1\" fill=\"none\"\/>\n        <circle cx=\"1200\" cy=\"-60\" r=\"220\" stroke=\"rgba(224,26,35,0.04)\" stroke-width=\"1\" fill=\"none\"\/>\n        <!-- Small circle bottom-left -->\n        <circle cx=\"80\" cy=\"660\"  r=\"160\" stroke=\"rgba(224,26,35,0.05)\" stroke-width=\"1\" fill=\"none\"\/>\n        <circle cx=\"80\" cy=\"660\"  r=\"100\" stroke=\"rgba(224,26,35,0.04)\" stroke-width=\"1\" fill=\"none\"\/>\n        <!-- Cross \/ plus mark center -->\n        <g stroke=\"rgba(224,26,35,0.08)\" stroke-width=\"1\">\n          <line x1=\"640\" y1=\"280\" x2=\"640\" y2=\"420\"\/>\n          <line x1=\"570\" y1=\"350\" x2=\"710\" y2=\"350\"\/>\n        <\/g>\n        <!-- Dot grid patch -->\n        <g fill=\"rgba(224,26,35,0.08)\">\n          <circle cx=\"200\" cy=\"120\" r=\"2\"\/><circle cx=\"240\" cy=\"120\" r=\"2\"\/><circle cx=\"280\" cy=\"120\" r=\"2\"\/>\n          <circle cx=\"200\" cy=\"160\" r=\"2\"\/><circle cx=\"240\" cy=\"160\" r=\"2\"\/><circle cx=\"280\" cy=\"160\" r=\"2\"\/>\n          <circle cx=\"200\" cy=\"200\" r=\"2\"\/><circle cx=\"240\" cy=\"200\" r=\"2\"\/><circle cx=\"280\" cy=\"200\" r=\"2\"\/>\n        <\/g>\n        <g fill=\"rgba(224,26,35,0.07)\">\n          <circle cx=\"1000\" cy=\"560\" r=\"2\"\/><circle cx=\"1040\" cy=\"560\" r=\"2\"\/><circle cx=\"1080\" cy=\"560\" r=\"2\"\/>\n          <circle cx=\"1000\" cy=\"600\" r=\"2\"\/><circle cx=\"1040\" cy=\"600\" r=\"2\"\/><circle cx=\"1080\" cy=\"600\" r=\"2\"\/>\n          <circle cx=\"1000\" cy=\"640\" r=\"2\"\/><circle cx=\"1040\" cy=\"640\" r=\"2\"\/><circle cx=\"1080\" cy=\"640\" r=\"2\"\/>\n        <\/g>\n      <\/svg>\n    <\/div>\n\n    <div class=\"bb-container\">\n      <div class=\"bb-grid\">\n        <div class=\"bb-card\">\n          <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2025\/11\/s1-card-img-3.webp\">\n        <\/div>\n        <!-- \u2500\u2500 BLOCK 1 \u2500\u2500 -->\n        <div class=\"bb-card\">\n          <div class=\"bb-num\">What is a Static Website?<\/div>\n          <p class=\"bb-body\">A static website consists of fixed web pages where the content remains consistent unless manually updated. These websites are lightweight, load quickly, and require minimal maintenance \u2014 making them ideal for businesses that need a professional online presence without complex functionality.<\/p>\n          <p class=\"bb-body\"><\/p>\n          <ul class=\"bb-list\">\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Ultra-fast loading speed<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Enhanced security<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Lower development cost<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Minimal maintenance<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Reliable performance<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Ideal for informational websites<\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- \u2500\u2500 BLOCK 2 \u2500\u2500 -->\n        <div class=\"bb-card1\">\n          <div class=\"bb-num\"><\/div>\n          <h3 class=\"bb-heading\">Why Choose a Static Website?<\/h3>\n          <ul class=\"bb-list\">\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Perfect for startups and small businesses<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Faster than many dynamic websites<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Budget-friendly solution<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Strong security foundation<\/li>\n            <li><span class=\"bb-dot\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>Quick development timeline<\/li>\n          <\/ul>\n          <p class=\"bb-closing\">A static website delivers exactly what your business needs \u2014 simplicity, speed, and reliability.<\/p>\n        <\/div>\n\n        <div class=\"bb-card1\">\n          <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2025\/11\/p3-img-3.webp\" style=\"height: 533px;width: 100%;\">\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n<!-- End ZroPixel 2-Block Branding Section -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6986843 e-flex e-con-boxed e-con e-parent\" data-id=\"6986843\" 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-7092a91 elementor-widget elementor-widget-html\" data-id=\"7092a91\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --red:       #e01a23;\n    --red-h:     #c5151d;\n    --red-soft:  rgba(224,26,35,0.08);\n    --red-mid:   rgba(224,26,35,0.18);\n    --white:     #ffffff;\n    --off:       #f7f7f7;\n    --smoke:     #f0f0f0;\n    --text:      #111111;\n    --sub:       #555;\n    --muted:     #999;\n    --border:    #e0e0e0;\n    --dark:      #0c0c0c;\n    --ff-h:      'Syne', sans-serif;\n    --ff-b:      'Plus Jakarta Sans', sans-serif;\n  }\n\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SECTION\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .proc {\n    padding: 110px 0 120px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* large background text *\/\n  .proc-bg-text {\n    position: absolute;\n    bottom: -20px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 220px;\n    font-weight: 800;\n    white-space: nowrap;\n    color: transparent;\n    -webkit-text-stroke: 1px rgba(0,0,0,0.04);\n    letter-spacing: -0.05em;\n    pointer-events: none;\n    user-select: none;\n    line-height: 1;\n  }\n\n  .wrap {\n    max-width: 1300px;\n    margin: 0 auto;\n    padding: 0 48px;\n    position: relative;\n    z-index: 2;\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HEADER\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .proc-head {\n    display: flex;\n    align-items: flex-end;\n    justify-content: space-between;\n    gap: 40px;\n    margin-bottom: 64px;\n  }\n\n  .head-left { max-width: 560px; }\n\n  .eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--red);\n    color: var(--white);\n    font-size: 9.5px;\n    font-weight: 700;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    padding: 6px 14px;\n    margin-bottom: 20px;\n    opacity: 0;\n    animation: up 0.5s ease 0.1s forwards;\n  }\n\n  .eyebrow-dot {\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.6);\n  }\n\n  .proc-h1 {\n    font-size: clamp(40px, 4.5vw, 64px);\n    font-weight: 800;\n    line-height: 1.0;\n    letter-spacing: -0.03em;\n    color: var(--text);\n    opacity: 0;\n    animation: up 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;\n  }\n\n  .proc-h1 span { color: var(--red); }\n\n  .head-right {\n    opacity: 0;\n    animation: up 0.7s ease 0.35s forwards;\n    flex-shrink: 0;\n    max-width: 360px;\n  }\n\n  .proc-desc {\n    font-size: 14.5px;\n    line-height: 1.8;\n    color: var(--sub);\n    font-weight: 300;\n    margin-bottom: 20px;\n  }\n\n  .step-counter {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--muted);\n    letter-spacing: 0.08em;\n  }\n\n  .step-counter strong { color: var(--red); font-size: 22px; }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     GRID\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .proc-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-template-rows: auto auto;\n    gap: 16px;\n  }\n\n  \/* \u2500\u2500 CARD \u2500\u2500 *\/\n  .p-card {\n    background: var(--white);\n    border: 1px solid var(--border);\n    padding: 36px 34px 40px;\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n    opacity: 0;\n    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;\n  }\n\n  .p-card.revealed { animation: up 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }\n  .p-card:nth-child(1) { animation-delay: 0.05s; }\n  .p-card:nth-child(2) { animation-delay: 0.13s; }\n  .p-card:nth-child(3) { animation-delay: 0.21s; }\n  .p-card:nth-child(4) { animation-delay: 0.29s; }\n  .p-card:nth-child(5) { animation-delay: 0.37s; }\n\n  .p-card:hover {\n    border-color: var(--red);\n    box-shadow: 0 8px 40px rgba(224,26,35,0.1);\n    transform: translateY(-4px);\n  }\n\n  \/* Red corner tab *\/\n  .p-card::before {\n    content: '';\n    position: absolute;\n    top: 0; right: 0;\n    width: 0; height: 0;\n    border-style: solid;\n    border-width: 0 52px 52px 0;\n    border-color: transparent var(--smoke) transparent transparent;\n    transition: border-color 0.3s;\n  }\n\n  .p-card:hover::before {\n    border-color: transparent var(--red) transparent transparent;\n  }\n\n  \/* \u2500\u2500 Card num \u2500\u2500 *\/\n  .c-num {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.18em;\n    color: var(--red);\n    margin-bottom: 28px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .c-num::after {\n    content: '';\n    flex: 1;\n    height: 1px;\n    background: linear-gradient(to right, var(--border), transparent);\n  }\n\n  \/* \u2500\u2500 Icon box \u2500\u2500 *\/\n  .c-icon {\n    width: 52px; height: 52px;\n    border: 1px solid var(--border);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 22px;\n    transition: background 0.3s, border-color 0.3s, transform 0.3s;\n    border-radius: 12px;\n  }\n\n  .p-card:hover .c-icon {\n    background: var(--red);\n    border-color: var(--red);\n    transform: rotate(-6deg) scale(1.05);\n  }\n\n  .c-icon svg {\n    width: 22px; height: 22px;\n    stroke: var(--red);\n    fill: none;\n    stroke-width: 1.7;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.3s;\n  }\n\n  .p-card:hover .c-icon svg { stroke: var(--white); }\n\n  \/* \u2500\u2500 Title \u2500\u2500 *\/\n  .c-title {\n    font-size: 19px;\n    font-weight: 700;\n    letter-spacing: -0.015em;\n    line-height: 1.2;\n    margin-bottom: 14px;\n    color: var(--text);\n    transition: color 0.2s;\n  }\n\n  .p-card:hover .c-title { color: var(--red); }\n\n  \/* \u2500\u2500 Text \u2500\u2500 *\/\n  .c-text {\n    font-size: 13.5px;\n    line-height: 1.78;\n    color: var(--muted);\n    font-weight: 300;\n  }\n\n  \/* \u2500\u2500 Click hint \u2500\u2500 *\/\n  .c-hint {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 24px;\n    font-size: 10.5px;\n    font-weight: 600;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: var(--border);\n    transition: color 0.3s;\n  }\n\n  .p-card:hover .c-hint { color: var(--red); }\n\n  .c-hint svg {\n    width: 12px; height: 12px;\n    stroke: currentColor;\n    fill: none;\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: transform 0.3s;\n  }\n\n  .p-card:hover .c-hint svg { transform: translate(3px, -3px); }\n\n  \/* \u2500\u2500 WIDE LAST CARD (spans 3 cols) \u2500\u2500 *\/\n  .p-card--wide {\n    grid-column: span 3;\n    display: grid;\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    gap: 48px;\n    padding: 40px 48px;\n  }\n\n  .p-card--wide .c-num { margin-bottom: 0; }\n  .p-card--wide .c-icon { margin-bottom: 0; flex-shrink: 0; }\n\n  .wide-body { display: flex; flex-direction: column; gap: 10px; }\n  .wide-body .c-title { margin-bottom: 0; font-size: 22px; }\n  .wide-body .c-text { max-width: 600px; }\n\n  .wide-cta {\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    gap: 12px;\n  }\n\n  .cta-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    background: var(--red);\n    color: var(--white);\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    padding: 14px 24px;\n    border: none;\n    cursor: pointer;\n    transition: background 0.25s, transform 0.2s;\n    white-space: nowrap;\n    text-decoration: none;\n  }\n\n  .cta-btn:hover {\n    background: var(--red-h);\n    transform: translateY(-2px);\n  }\n\n  .cta-btn svg {\n    width: 14px; height: 14px;\n    stroke: currentColor;\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .cta-note {\n    font-size: 11px;\n    color: var(--muted);\n    letter-spacing: 0.06em;\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MODAL OVERLAY\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  .modal-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(10,10,10,0.7);\n    backdrop-filter: blur(6px);\n    z-index: 1000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.3s ease;\n  }\n\n  .modal-overlay.open {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  .modal {\n    background: var(--white);\n    max-width: 680px;\n    width: 100%;\n    position: relative;\n    transform: translateY(30px) scale(0.97);\n    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);\n    overflow: hidden;\n  }\n\n  .modal-overlay.open .modal {\n    transform: translateY(0) scale(1);\n  }\n\n  \/* Red top stripe *\/\n  .modal-stripe {\n    height: 5px;\n    background: var(--red);\n    position: relative;\n  }\n\n  .modal-stripe::after {\n    content: '';\n    position: absolute;\n    top: 0; right: 0;\n    width: 60px; height: 100%;\n    background: rgba(255,255,255,0.2);\n  }\n\n  .modal-body {\n    padding: 44px 48px 52px;\n  }\n\n  .modal-eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 20px;\n  }\n\n  .modal-step-badge {\n    background: var(--red);\n    color: var(--white);\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    padding: 5px 12px;\n  }\n\n  .modal-phase {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--muted);\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n  }\n\n  .modal-icon-row {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    margin-bottom: 28px;\n  }\n\n  .modal-icon {\n    width: 64px; height: 64px;\n    background: var(--red-soft);\n    border: 1px solid rgba(224,26,35,0.2);\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .modal-icon svg {\n    width: 28px; height: 28px;\n    stroke: var(--red);\n    fill: none;\n    stroke-width: 1.6;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .modal-title {\n    font-size: 30px;\n    font-weight: 800;\n    letter-spacing: -0.025em;\n    line-height: 1.1;\n    color: var(--text);\n  }\n\n  .modal-divider {\n    width: 100%;\n    height: 1px;\n    background: var(--border);\n    margin: 24px 0;\n  }\n\n  .modal-text {\n    font-size: 15px;\n    line-height: 1.82;\n    color: var(--sub);\n    font-weight: 300;\n    margin-bottom: 32px;\n  }\n\n  \/* Deliverables list *\/\n  .modal-deliverables {\n    background: var(--off);\n    border: 1px solid var(--border);\n    padding: 24px 28px;\n    margin-bottom: 32px;\n  }\n\n  .deliverables-label {\n    font-size: 9.5px;\n    font-weight: 700;\n    letter-spacing: 0.22em;\n    text-transform: uppercase;\n    color: var(--red);\n    margin-bottom: 16px;\n  }\n\n  .deliverables-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n  }\n\n  .d-tag {\n    background: var(--white);\n    border: 1px solid var(--border);\n    padding: 6px 14px;\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--sub);\n    transition: border-color 0.2s, color 0.2s;\n  }\n\n  .d-tag:hover { border-color: var(--red); color: var(--red); }\n\n  \/* Modal footer *\/\n  .modal-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n  }\n\n  .modal-nav {\n    display: flex;\n    gap: 8px;\n  }\n\n  .nav-btn {\n    width: 40px; height: 40px;\n    border: 1px solid var(--border);\n    background: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s;\n  }\n\n  .nav-btn:hover { border-color: var(--red); background: var(--red); }\n\n  .nav-btn:hover svg { stroke: var(--white); }\n\n  .nav-btn svg {\n    width: 16px; height: 16px;\n    stroke: var(--muted);\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.2s;\n  }\n\n  .modal-close {\n    position: absolute;\n    top: 18px; right: 18px;\n    width: 36px; height: 36px;\n    background: var(--smoke);\n    border: none;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.2s;\n    z-index: 10;\n  }\n\n  .modal-close:hover { background: var(--red); }\n  .modal-close:hover svg { stroke: var(--white); }\n\n  .modal-close svg {\n    width: 16px; height: 16px;\n    stroke: var(--sub);\n    fill: none;\n    stroke-width: 2.2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.2s;\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     ANIMATIONS\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  @keyframes up {\n    from { opacity: 0; transform: translateY(28px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     RESPONSIVE\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  @media (max-width: 1000px) {\n    .proc-grid { grid-template-columns: repeat(2, 1fr); }\n    .p-card--wide { grid-column: span 2; }\n  }\n\n  @media (max-width: 700px) {\n    .proc-grid { grid-template-columns: 1fr; }\n    .p-card--wide { grid-column: span 1; grid-template-columns: 1fr; gap: 20px; }\n    .wide-cta { align-items: flex-start; }\n    .proc-head { flex-direction: column; }\n    .wrap { padding: 0 20px; }\n    .modal-body { padding: 32px 28px 40px; }\n  }\n<\/style>\n\n\n<section class=\"proc\">\n  <div class=\"proc-bg-text\">PROCESS<\/div>\n\n  <div class=\"wrap\">\n\n    <!-- HEADER -->\n    <div class=\"proc-head\">\n      <div class=\"head-left\">\n        <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>How We Work<\/div>\n        <h2 class=\"proc-h1\">Our Working<br><span>Process<\/span><\/h2>\n      <\/div>\n      <div class=\"head-right\">\n        <p class=\"proc-desc\">We begin by listening \u2014 gaining a deep understanding of your goals, audience, and challenges through research and honest conversation.<\/p>\n        <div class=\"step-counter\">\n          <strong>05<\/strong> defined steps to deliver excellence\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- GRID -->\n    <div class=\"proc-grid\" id=\"procGrid\">\n\n      <!-- Card 01 -->\n      <div class=\"p-card\" data-step=\"0\">\n        <div class=\"c-num\">Step 01<\/div>\n        <div class=\"c-icon\">\n          <svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><path d=\"M11 8v6M8 11h6\"\/><\/svg>\n        <\/div>\n        <h4 class=\"c-title\">Discovery &amp; Strategy<\/h4>\n        <p class=\"c-text\">We understand your business objectives, target audience, and competitors to build a strategic roadmap that drives real growth.<\/p>\n      <\/div>\n\n      <!-- Card 02 -->\n      <div class=\"p-card\" data-step=\"1\">\n        <div class=\"c-num\">Step 02<\/div>\n        <div class=\"c-icon\">\n          <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\n        <\/div>\n        <h4 class=\"c-title\">UI\/UX Design<\/h4>\n        <p class=\"c-text\">Our experts craft intuitive, visually engaging interfaces that prioritize easy navigation, modern aesthetics, and conversion-driven layouts.<\/p>\n      <\/div>\n\n      <!-- Card 03 -->\n      <div class=\"p-card\" data-step=\"2\">\n        <div class=\"c-num\">Step 03<\/div>\n        <div class=\"c-icon\">\n          <svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\n        <\/div>\n        <h4 class=\"c-title\">Development<\/h4>\n        <p class=\"c-text\">Using modern frameworks and best coding practices, we build fast, scalable, and secure platforms that function flawlessly everywhere.<\/p>\n      <\/div>\n\n      <!-- Card 04 -->\n      <div class=\"p-card\" data-step=\"3\">\n        <div class=\"c-num\">Step 04<\/div>\n        <div class=\"c-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\n        <\/div>\n        <h4 class=\"c-title\">Testing &amp; QA<\/h4>\n        <p class=\"c-text\">Every website undergoes rigorous testing for performance, responsiveness, functionality, and security before we ever go live.<\/p>\n      <\/div>\n\n      <!-- Card 05 \u2014 WIDE -->\n      <div class=\"p-card \" data-step=\"4\">\n        <div>\n          <div class=\"c-num\" style=\"margin-bottom:0;\">Step 05<\/div>\n        <\/div>\n        <div class=\"c-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n        <\/div>\n        <div class=\"wide-body\">\n          <h4 class=\"c-title\">Launch &amp; Ongoing Support<\/h4>\n          <p class=\"c-text\">After successful deployment, our team provides technical support, updates, and optimization to keep your website secure and performing at its best.<\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MODAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"modal-overlay\" id=\"modalOverlay\">\n  <div class=\"modal\" id=\"modal\">\n    <button class=\"modal-close\" id=\"modalClose\">\n      <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n    <\/button>\n    <div class=\"modal-stripe\"><\/div>\n    <div class=\"modal-body\">\n      <div class=\"modal-eyebrow\">\n        <span class=\"modal-step-badge\" id=\"mBadge\">Step 01<\/span>\n        <span class=\"modal-phase\" id=\"mPhase\">Discover<\/span>\n      <\/div>\n      <div class=\"modal-icon-row\">\n        <div class=\"modal-icon\" id=\"mIcon\"><\/div>\n        <h3 class=\"modal-title\" id=\"mTitle\">Discovery &amp; Strategy<\/h3>\n      <\/div>\n      <div class=\"modal-divider\"><\/div>\n      <p class=\"modal-text\" id=\"mText\"><\/p>\n      <div class=\"modal-deliverables\">\n        <div class=\"deliverables-label\">Key Deliverables<\/div>\n        <div class=\"deliverables-list\" id=\"mDeliverables\"><\/div>\n      <\/div>\n      <div class=\"modal-footer\">\n        <div class=\"modal-nav\">\n          <button class=\"nav-btn\" id=\"prevBtn\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n          <\/button>\n          <button class=\"nav-btn\" id=\"nextBtn\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n          <\/button>\n        <\/div>\n        <a class=\"cta-btn\" href=\"#\" style=\"padding:12px 22px; font-size:10.5px;\">\n          Start Project <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const steps = [\n    {\n      badge: \"Step 01\", phase: \"Discover\",\n      title: \"Discovery & Strategy\",\n      icon: `<svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" stroke=\"#e01a23\" fill=\"none\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><path d=\"M11 8v6M8 11h6\"\/><\/svg>`,\n      text: \"We begin by understanding your business objectives, target audience, industry landscape, and competitors. This discovery phase allows us to create a comprehensive strategic roadmap that aligns your website with your long-term growth goals while ensuring maximum digital impact. We conduct in-depth market research, competitor analysis, and stakeholder interviews to uncover insights that drive every decision.\",\n      deliverables: [\"Business Brief\", \"Market Research\", \"Competitor Analysis\", \"Strategic Roadmap\", \"Goal Framework\", \"KPI Definition\"]\n    },\n    {\n      badge: \"Step 02\", phase: \"Design\",\n      title: \"UI\/UX Design\",\n      icon: `<svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" stroke=\"#e01a23\" fill=\"none\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>`,\n      text: \"Our design experts craft intuitive and visually engaging interfaces focused on enhancing user experience. We prioritize easy navigation, modern aesthetics, and conversion-driven layouts to ensure visitors stay longer and take meaningful actions. Every pixel is deliberate \u2014 from typography and colour selection to spacing and interactive micro-animations that delight users.\",\n      deliverables: [\"Wireframes\", \"UI Style Guide\", \"Prototype\", \"Responsive Mockups\", \"Component Library\", \"Design System\"]\n    },\n    {\n      badge: \"Step 03\", phase: \"Build\",\n      title: \"Development\",\n      icon: `<svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" stroke=\"#e01a23\" fill=\"none\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>`,\n      text: \"Using modern frameworks and best coding practices, our developers transform approved designs into high-performing websites. We focus on building fast, scalable, and secure platforms that function flawlessly across all devices and browsers. Our code is clean, documented, and built with future growth in mind \u2014 so you're never locked in.\",\n      deliverables: [\"Frontend Build\", \"Backend Integration\", \"CMS Setup\", \"API Connections\", \"SEO Foundation\", \"Performance Optimisation\"]\n    },\n    {\n      badge: \"Step 04\", phase: \"Test\",\n      title: \"Testing & Quality Assurance\",\n      icon: `<svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" stroke=\"#e01a23\" fill=\"none\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>`,\n      text: \"Before launch, every website undergoes rigorous testing to ensure optimal performance, responsiveness, functionality, and security. We identify and resolve potential issues early to deliver a seamless user experience from day one. Our QA process includes cross-browser testing, load testing, accessibility audits, and security vulnerability scanning.\",\n      deliverables: [\"Cross-Browser Testing\", \"Performance Audit\", \"Security Scan\", \"Accessibility Check\", \"Bug Report\", \"UAT Sign-Off\"]\n    },\n    {\n      badge: \"Step 05\", phase: \"Launch\",\n      title: \"Launch & Ongoing Support\",\n      icon: `<svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" stroke=\"#e01a23\" fill=\"none\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>`,\n      text: \"After successful deployment, we ensure a smooth website launch with minimal disruption. Our team continues to provide technical support, updates, and optimization services to keep your website secure, current, and performing at its best. We offer flexible maintenance plans tailored to your needs \u2014 from monthly check-ins to full managed services.\",\n      deliverables: [\"Live Deployment\", \"DNS & Hosting Setup\", \"Monitoring Setup\", \"Training Session\", \"Monthly Reports\", \"Priority Support\"]\n    }\n  ];\n\n  let current = 0;\n\n  function openModal(idx) {\n    current = idx;\n    renderModal();\n    document.getElementById('modalOverlay').classList.add('open');\n    document.body.style.overflow = 'hidden';\n  }\n\n  function closeModal() {\n    document.getElementById('modalOverlay').classList.remove('open');\n    document.body.style.overflow = '';\n  }\n\n  function renderModal() {\n    const s = steps[current];\n    document.getElementById('mBadge').textContent = s.badge;\n    document.getElementById('mPhase').textContent = s.phase;\n    document.getElementById('mTitle').innerHTML = s.title;\n    document.getElementById('mIcon').innerHTML = s.icon;\n    document.getElementById('mText').textContent = s.text;\n    const dl = document.getElementById('mDeliverables');\n    dl.innerHTML = s.deliverables.map(d => `<span class=\"d-tag\">${d}<\/span>`).join('');\n  }\n\n  \/\/ Open on card click\n  document.querySelectorAll('.p-card[data-step]').forEach(card => {\n    card.addEventListener('click', () => openModal(+card.dataset.step));\n  });\n\n  document.getElementById('modalClose').addEventListener('click', closeModal);\n  document.getElementById('modalOverlay').addEventListener('click', e => {\n    if (e.target === e.currentTarget) closeModal();\n  });\n\n  document.getElementById('prevBtn').addEventListener('click', () => {\n    current = (current - 1 + steps.length) % steps.length;\n    renderModal();\n  });\n\n  document.getElementById('nextBtn').addEventListener('click', () => {\n    current = (current + 1) % steps.length;\n    renderModal();\n  });\n\n  document.addEventListener('keydown', e => {\n    if (!document.getElementById('modalOverlay').classList.contains('open')) return;\n    if (e.key === 'Escape') closeModal();\n    if (e.key === 'ArrowLeft') { current = (current-1+steps.length)%steps.length; renderModal(); }\n    if (e.key === 'ArrowRight') { current = (current+1)%steps.length; renderModal(); }\n  });\n\n  \/\/ Scroll reveal\n  const cards = document.querySelectorAll('.p-card');\n  const obs = new IntersectionObserver(entries => {\n    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('revealed'); obs.unobserve(e.target); } });\n  }, { threshold: 0.15 });\n  cards.forEach(c => obs.observe(c));\n<\/script>\n\n<\/body>\n<\/html>\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-8836e5b e-con-full e-flex e-con e-parent\" data-id=\"8836e5b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-12f0533 e-con-full e-flex e-con e-child\" data-id=\"12f0533\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c56d4f8 elementor-widget elementor-widget-html\" data-id=\"c56d4f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<style>\n.bi-wrap {\n  --red:      #E01A23;\n  --red-soft: rgba(224,26,35,0.12);\n  --white:    #ffffff;\n  --dark:     #ffffff;\n  --muted:    rgba(255,255,255,0.55);\n  --border:   rgba(255,255,255,0.08);\n  --bg:       #111111;\n  --ease:     cubic-bezier(0.4,0,0.2,1);\n  box-sizing: border-box;\n}\n.bi-wrap *, .bi-wrap *::before, .bi-wrap *::after {\n  box-sizing: inherit; margin: 0; padding: 0;\n}\n\n\/* \u2500\u2500 Section \u2500\u2500 *\/\n.bi-section {\n  padding: 100px 0 120px;\n  background: linear-gradient(135deg, #0a0a0a 0%, #1a0304 55%, #2a0406 100%);\n  position: relative;\n  overflow: hidden;\n}\n\/* grid texture *\/\n.bi-section::before {\n  content: '';\n  position: absolute; inset: 0;\n  background-image:\n    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\n  background-size: 40px 40px;\n  pointer-events: none; z-index: 0;\n}\n\/* red glow *\/\n.bi-section::after {\n  content: '';\n  position: absolute; top: -120px; right: -120px;\n  width: 500px; height: 500px;\n  background: radial-gradient(circle, rgba(224,26,35,0.14) 0%, transparent 70%);\n  pointer-events: none; z-index: 0;\n}\n\n.bi-container {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 48px;\n  position: relative; z-index: 1;\n}\n\n\/* \u2500\u2500 Section header \u2500\u2500 *\/\n.bi-section-head {\n  text-align: center;\n  margin-bottom: 72px;\n  opacity: 0;\n  animation: biFadeUp 0.6s var(--ease) 0.1s forwards;\n}\n.bi-section-label {\n  display: inline-flex; align-items: center; gap: 10px;\n  font-size: 11px; font-weight: 500; letter-spacing: 0.2em;\n  text-transform: uppercase; color: var(--red);\n  margin-bottom: 18px;\n}\n.bi-section-label::before,\n.bi-section-label::after {\n  content: ''; display: block;\n  width: 24px; height: 1px;\n  background: var(--red); flex-shrink: 0;\n}\n.bi-section-title {\n  font-size: clamp(34px, 3.8vw, 54px);\n  font-weight: 800; line-height: 1.0;\n  letter-spacing: -0.02em; color: var(--white);\n}\n.bi-section-title span { color: var(--red); }\n\n\/* \u2500\u2500 2\u00d72 Grid \u2500\u2500 *\/\n.bi-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n.bi-card {\n  background: rgba(255,255,255,0.04);\n  border: 1px solid var(--border);\n  padding: 44px 40px 48px;\n  position: relative; overflow: hidden;\n  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s, background 0.3s;\n  opacity: 0; transform: translateY(20px);\n  animation: biFadeUp 0.6s var(--ease) forwards;\n}\n.bi-card:nth-child(1) { animation-delay: 0.12s; }\n.bi-card:nth-child(2) { animation-delay: 0.20s; }\n.bi-card:nth-child(3) { animation-delay: 0.28s; }\n.bi-card:nth-child(4) { animation-delay: 0.36s; }\n\n.bi-card:hover {\n  box-shadow: 0 8px 40px rgba(224,26,35,0.15);\n  transform: translateY(-4px);\n  border-color: rgba(224,26,35,0.35);\n  background: rgba(255,255,255,0.07);\n}\n\n\/* Red top accent bar *\/\n.bi-card::before {\n  content: '';\n  position: absolute; top: 0; left: 0;\n  width: 0; height: 3px;\n  background: var(--red);\n  transition: width 0.4s var(--ease);\n}\n.bi-card:hover::before { width: 100%; }\n\n\/* Corner triangle *\/\n.bi-card::after {\n  content: '';\n  position: absolute; top: 0; right: 0;\n  width: 0; height: 0; border-style: solid;\n  border-width: 0 48px 48px 0;\n  border-color: transparent rgba(255,255,255,0.04) transparent transparent;\n  transition: border-color 0.3s;\n}\n.bi-card:hover::after {\n  border-color: transparent rgba(224,26,35,0.18) transparent transparent;\n}\n\n\/* Card number *\/\n.bi-card-num {\n  font-size: 10px; font-weight: 700;\n  letter-spacing: 0.18em; color: var(--red);\n  margin-bottom: 20px; opacity: 0.75;\n}\n\n\/* Heading *\/\n.bi-card-heading {\n  font-size: 22px; font-weight: 800;\n  line-height: 1.15; letter-spacing: -0.02em;\n  color: var(--white); margin-bottom: 8px;\n  transition: color 0.2s;\n}\n.bi-card:hover .bi-card-heading { color: var(--red); }\n\n\/* Sub heading *\/\n.bi-card-sub {\n  font-size: 13px; font-weight: 600;\n  color: var(--red); letter-spacing: 0.04em;\n  margin-bottom: 22px;\n  padding-bottom: 18px;\n  border-bottom: 1px solid var(--border);\n}\n\n\/* Body text *\/\n.bi-card-body {\n  font-size: 13.5px; line-height: 1.78; color: var(--muted);\n}\n.bi-card-body p { margin-bottom: 12px; }\n.bi-card-body p:last-child { margin-bottom: 0; }\n\n\/* Check list (\u2714 items) *\/\n.bi-checklist {\n  list-style: none;\n  display: flex; flex-direction: column; gap: 11px;\n  margin-bottom: 0;\n}\n.bi-checklist li {\n  display: flex; align-items: flex-start; gap: 10px;\n  font-size: 13.5px; line-height: 1.6; color: var(--muted);\n}\n.bi-checklist li .bi-check {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 18px; height: 18px;\n  background: var(--red-soft);\n  border: 1px solid rgba(224,26,35,0.18);\n  flex-shrink: 0; margin-top: 1px;\n}\n.bi-checklist li .bi-check svg {\n  width: 10px; height: 10px;\n  stroke: var(--red); fill: none;\n  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;\n}\n.bi-check-label { font-weight: 600; color: var(--white); }\n.bi-check-desc { font-weight: 400; color: var(--muted); }\n\n\/* Bullet list (- items) *\/\n.bi-bulletlist {\n  list-style: none;\n  display: flex; flex-direction: column; gap: 9px;\n  margin: 12px 0;\n}\n.bi-bulletlist li {\n  display: flex; align-items: flex-start; gap: 10px;\n  font-size: 13.5px; line-height: 1.6; color: var(--muted);\n}\n.bi-bulletlist li::before {\n  content: '';\n  display: block; width: 5px; height: 5px;\n  border-radius: 0; background: var(--red);\n  margin-top: 7px; flex-shrink: 0;\n}\n\n\/* Comparison block (card 4) *\/\n.bi-compare {\n  display: grid;\n  grid-template-columns: 1fr 1px 1fr;\n  gap: 20px;\n  margin-top: 20px;\n}\n.bi-compare-divider {\n  background: var(--border); width: 1px;\n}.bi-compare-col-label {\n  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;\n  text-transform: uppercase; color: var(--red);\n  margin-bottom: 10px;\n}\n.bi-compare-col p {\n  font-size: 13px; line-height: 1.7; color: var(--muted);\n}\n\n@keyframes biFadeUp {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Responsive *\/\n@media (max-width: 900px) {\n  .bi-grid { grid-template-columns: 1fr; }\n  .bi-container { padding: 0 32px; }\n}\n@media (max-width: 560px) {\n  .bi-section { padding: 70px 0 80px; }\n  .bi-container { padding: 0 20px; }\n  .bi-card { padding: 32px 24px 36px; }\n  .bi-compare { grid-template-columns: 1fr; }\n  .bi-compare-divider { display: none; }\n}\n<\/style>\n\n<div class=\"bi-wrap\">\n  <section class=\"bi-section\">\n    <div class=\"bi-container\">\n\n      <!-- Section Header -->\n      <div class=\"bi-section-head\">\n        <div class=\"bi-section-label\">Static Website Insights<\/div>\n        <h2 class=\"bi-section-title\">Why  <span>Choose<\/span> a Static Website<\/h2>\n        <p style=\"color:#fff\">A static website is an excellent choice for organizations seeking a fast, secure, and professional online presence without the complexity of advanced functionality. Businesses that prioritize performance, reliability, and cost-efficiency can greatly benefit from static website design.<\/p>\n      <\/div>\n\n      <div class=\"bi-grid\">\n\n        <!-- \u2500\u2500 CARD 1: Benefits \u2500\u2500 -->\n        <div class=\"bi-card\">\n          <ul class=\"bi-checklist\">\n            <li>\n              <span class=\"bi-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\n              <span><span class=\"bi-check-label\">Startups<\/span><span class=\"bi-check-desc\">Startups looking for an affordable yet professional business website can leverage static website design to launch quickly. With lower development costs and fast loading speeds, static websites help new businesses establish credibility and attract potential customers from the start.<\/span><\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n        \n        <div class=\"bi-card\">\n          <ul class=\"bi-checklist\">\n            <li>\n              <span class=\"bi-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\n              <span><span class=\"bi-check-label\">Professional Services<\/span><span class=\"bi-check-desc\">Industries such as legal, healthcare, finance, and accounting require secure and trustworthy websites. A static website provides a stable platform to showcase expertise, highlight services, and build client confidence while maintaining strong website performance.<\/span><\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"bi-card\">\n          <ul class=\"bi-checklist\">\n            <li>\n              <span class=\"bi-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\n              <span><span class=\"bi-check-label\">Consulting Firms<\/span><span class=\"bi-check-desc\">Consulting firms benefit from corporate websites that communicate authority and professionalism. Static websites ensure high reliability, improved security, and fast user experiences \u2014 essential for organizations focused on reputation and client trust.<\/span><\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"bi-card\">\n          <ul class=\"bi-checklist\">\n            <li>\n              <span class=\"bi-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\n              <span><span class=\"bi-check-label\">Local Businesses<\/span><span class=\"bi-check-desc\">For local businesses aiming to improve online visibility, a static website helps customers easily find important details such as services, location, and contact information. Optimized static websites also support local SEO, making it easier for nearby customers to discover your business.<\/span><\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"bi-card\">\n          <ul class=\"bi-checklist\">\n            <li>\n              <span class=\"bi-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\n              <span><span class=\"bi-check-label\">Portfolio Websites<\/span><span class=\"bi-check-desc\">Creative professionals including designers, photographers, architects, and developers can showcase their work through visually appealing, high-speed portfolio websites. Static design ensures that projects load quickly, creating a better user experience and stronger engagement.<\/span><\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"bi-card\">\n          <ul class=\"bi-checklist\">\n            <li>\n              <span class=\"bi-check\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/span>\n              <span><span class=\"bi-check-label\">Corporate Profile Sites<\/span><span class=\"bi-check-desc\">Organizations that need a professional corporate website to present their company profile, mission, and services can rely on static websites for consistent performance and enhanced security. These websites are ideal for businesses that do not require frequent content updates.<\/span><\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n\n\n\n      <\/div><!-- \/grid -->\n      <p style=\"margin-top:25px;color:#fff\">\ud83d\udc49 \u201cOur static website design services deliver fast, secure, and SEO-friendly websites tailored to support your business growth.\u201d<\/p>\n    <\/div>\n  <\/section>\n<\/div>\n<!-- End ZroPixel Branding Info Block -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-465dbd3 e-con-full e-flex e-con e-parent\" data-id=\"465dbd3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0ef1db7 e-con-full e-flex e-con e-child\" data-id=\"0ef1db7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75f11f5 elementor-widget elementor-widget-html\" data-id=\"75f11f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.zp-cta-wrapper {\n  background: #ffffff;\n  padding: 0px 0px;\n}\n\n.zp-cta-box {\n  margin: auto;\n  background: linear-gradient(\n    90deg,\n    #ffffff 0%,\n    #ffffff 35%,\n    #e11d2e 80%,\n    #000000 100%\n  );\n  padding: 50px 50px;\n  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);\n}\n\n.zp-cta-content h2 {\n  font-size: 34px;\n  font-weight: 700;\n  margin-bottom: 18px;\n  color: #111;\n}\n\n.zp-cta-content p {\n  font-size: 18px;\n  line-height: 1.6;\n  margin-bottom: 30px;\n  color: #333;\n}\n\n.zp-cta-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  background: #e11d2e;\n  color: #ffffff;\n  padding: 14px 28px;\n  border-radius: 40px;\n  font-weight: 600;\n  text-decoration: none;\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n.zp-cta-btn:hover {\n  background: #000000;\n  transform: translateX(4px);\n}\n\n\/* POPUP STYLES *\/\n.zp-popup-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.6);\n  display: none;\n  justify-content: center;\n  align-items: center;\n  z-index: 9999;\n}\n\n.zp-popup-content {\n  background: #fff;\n  padding: 40px;\n  border-radius: 12px;\n  width: 90%;\n  max-width: 500px;\n  position: relative;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.zp-popup-close {\n  position: absolute;\n  top: 10px;\n  right: 15px;\n  font-size: 22px;\n  cursor: pointer;\n}\n\n@keyframes fadeIn {\n  from {opacity: 0; transform: scale(0.95);}\n  to {opacity: 1; transform: scale(1);}\n}\n\n@media (max-width: 768px) {\n  .zp-cta-box {\n    padding: 40px 25px;\n  }\n}\n<\/style>\n\n<section class=\"zp-cta-wrapper\">\n  <div class=\"zp-cta-box\">\n    <div class=\"zp-cta-content\">\n      <h2>Start Building Your Online Presence Today<\/h2>\n      <p>\n        Launch a professional website that communicates your brand clearly \n        and builds customer trust.\n      <\/p>\n\n      <a class=\"zp-cta-btn\" onclick=\"openZpPopup()\">\n        Contact Us Today <span>\u2192<\/span>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- POPUP -->\n<div class=\"zp-popup-overlay\" id=\"zpPopup\">\n  <div class=\"zp-popup-content\">\n    <span class=\"zp-popup-close\" onclick=\"closeZpPopup()\">\u00d7<\/span>\n\n    \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f3608-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"3608\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/zropixel_uat\/wp-json\/wp\/v2\/pages\/3510#wpcf7-f3608-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"3608\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f3608-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<div class=\"as-cta-2-form\">\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"text-60\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required as-cta-2-form-input as-p-1 wa_placeholder\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Full name *\" value=\"\" type=\"text\" name=\"text-60\" \/><\/span>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"email-60\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email as-cta-2-form-input as-p-1 wa_placeholder\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Business email *\" value=\"\" type=\"email\" name=\"email-60\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"tel-979\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel as-cta-2-form-input as-p-1 wa_placeholder\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"+9715XXXXXXXX\" value=\"\" type=\"tel\" name=\"tel-979\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"text-61\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required as-cta-2-form-input as-p-1 wa_placeholder\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Company Name*\" value=\"\" type=\"text\" name=\"text-61\" \/><\/span>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"textarea-60\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required as-cta-2-form-input as-p-1 wa_placeholder\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Your message\" name=\"textarea-60\"><\/textarea><\/span>\n   <div id=\"cf7sr-69ea22fc166d7\" class=\"cf7sr-g-recaptcha\" data-theme=\"light\" data-type=\"image\" data-size=\"normal\" data-sitekey=\"6LcHt4IsAAAAAB38Rqmslx_m7LHSEsNIUBGoscqK\"><\/div><span class=\"wpcf7-form-control-wrap cf7sr-recaptcha\" data-name=\"cf7sr-recaptcha\"><input type=\"hidden\" name=\"cf7sr-recaptcha\" value=\"\" class=\"wpcf7-form-control\"><\/span>\n\n    <button type=\"submit\" class=\"as-pr-btn-3\">\n        <span class=\"text\" data-back=\"SUBMIT NOW\" data-front=\"SUBMIT NOW\"><\/span>\n        <span class=\"icon\">\n            <i class=\"fa-solid fa-arrow-right\"><\/i>\n            <i class=\"fa-solid fa-arrow-right\"><\/i>\n        <\/span>\n    <\/button>\n<\/div><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n\n  <\/div>\n<\/div>\n\n<script>\nfunction openZpPopup() {\n  document.getElementById(\"zpPopup\").style.display = \"flex\";\n}\n\nfunction closeZpPopup() {\n  document.getElementById(\"zpPopup\").style.display = \"none\";\n}\n\nwindow.onclick = function(event) {\n  var popup = document.getElementById(\"zpPopup\");\n  if (event.target === popup) {\n    popup.style.display = \"none\";\n  }\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f559430 e-con-full e-flex e-con e-parent\" data-id=\"f559430\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-adf0d32 e-con-full e-flex e-con e-child\" data-id=\"adf0d32\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-907c4f9 elementor-widget elementor-widget-tx_brand elh-el tx_brand\" data-id=\"907c4f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;design_style&quot;:&quot;style_3&quot;}\" data-widget_type=\"tx_brand.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"as-partner-3-area wa-fix wa-p-relative pb-50 tx-section\">\r\n        <div class=\"as-partner-3-bg-img\">\r\n        <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2025\/11\/p3-bg-img-1-1.webp\" alt=\"p3-bg-img-1\">\r\n    <\/div>\r\n    \r\n    <div class=\"wa_marquee_left_nopause d-inline-block mb-50\">\r\n        <div class=\"as-partner-3-logo\">\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/wp.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/woo.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/shopify.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/react.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/wix.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/python.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/sql.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/html.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/magento.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/bootstrap.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/aws.png\" alt=\"\">\r\n            <\/div>\r\n                        <div class=\"single-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/zropixel.com\/zropixel_uat\/wp-content\/uploads\/2026\/02\/jquery.png\" alt=\"\">\r\n            <\/div>\r\n                    <\/div>\r\n    <\/div>\r\n\r\n    <!-- big-title -->\r\n        <h2 class=\"as-partner-3-big-title as-h-1 \">\r\n        Want to Start?    <\/h2>\r\n    <\/section>\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<div class=\"elementor-element elementor-element-843472b e-flex e-con-boxed e-con e-parent\" data-id=\"843472b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6d989d6 e-con-full e-flex e-con e-child\" data-id=\"6d989d6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a92b047 elementor-widget elementor-widget-tx_faq elh-el tx_faq\" data-id=\"a92b047\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;design_style&quot;:&quot;style_2&quot;}\" data-widget_type=\"tx_faq.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"as-faqs-2-area pt-130 wa-p-relative wa-fix tx-section \">\r\n    <div class=\"container as-container-2\">\r\n        <!-- section-title -->\r\n        <div class=\"as-faqs-2-sec-title mb-50\">\r\n                        <h2 class=\"tx-title as-sec-title-2 wa_title_spilt_1\">FAQ<\/h2>        <\/div>\r\n\r\n        <div class=\"as-faqs-2-wrap\">\r\n\r\n            <!-- left-img -->\r\n            \r\n            <!-- faqs-accordion -->\r\n            <div class=\"as-faqs-2-accordion\">\r\n                <div class=\"as-accordion\" id=\"accordionExample_767\">\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-0\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-0\">\r\n                            1. What is a static website?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-0\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-0\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                A static website is made up of fixed web pages that display the same content for every visitor. It is built using clean code, loads quickly, and is ideal for businesses that need a professional online presence without complex functionality.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-1\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-1\">\r\n                            2. Why is a professional logo important for my business?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-1\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-1\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                A logo is often the first thing customers notice about your brand. A professionally designed logo builds credibility, improves recognition, and helps your business stand out in a competitive UAE market.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-2\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-2\">\r\n                            3. How long does it take to design a logo?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-2\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-2\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Most logo design projects are completed within 5 to 10 business days, depending on the complexity, feedback, and revision requirements.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-3\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-3\">\r\n                            4. Will my logo be unique?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-3\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-3\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Yes. Every logo we create is fully custom and tailored to your business personality, industry, and target audience. We never use templates or reused designs.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-4\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-4\">\r\n                            5. How many logo concepts will I receive?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-4\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-4\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Typically, we provide multiple initial concepts so you can choose a direction that best represents your brand. We then refine the selected design until it aligns perfectly with your vision.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-5\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-5\">\r\n                            6. Do you provide revisions?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-5\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-5\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Yes. We include revision rounds to ensure the final logo meets your expectations and accurately represents your brand.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-767-6\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-767-6\">\r\n                            7. What file formats will I receive?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-767-6\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-767-6\"\r\n                        data-bs-parent=\"#accordionExample_767\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                You will receive high-resolution files in multiple formats such as AI, EPS, PNG, JPG, and PDF, making your logo suitable for websites, social media, signage, packaging, and print materials.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e946174 e-con-full e-flex e-con e-child\" data-id=\"e946174\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26ae723 elementor-widget elementor-widget-tx_faq elh-el tx_faq\" data-id=\"26ae723\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;design_style&quot;:&quot;style_2&quot;}\" data-widget_type=\"tx_faq.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"as-faqs-2-area pt-130 wa-p-relative wa-fix tx-section \">\r\n    <div class=\"container as-container-2\">\r\n        <!-- section-title -->\r\n        <div class=\"as-faqs-2-sec-title mb-50\">\r\n                                <\/div>\r\n\r\n        <div class=\"as-faqs-2-wrap\">\r\n\r\n            <!-- left-img -->\r\n            \r\n            <!-- faqs-accordion -->\r\n            <div class=\"as-faqs-2-accordion\">\r\n                <div class=\"as-accordion\" id=\"accordionExample_110\">\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-0\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-0\">\r\n                            8. Can you redesign my existing logo?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-0\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-0\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Absolutely. If your current logo feels outdated or no longer reflects your business growth, we can modernize it while maintaining brand familiarity.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-1\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-1\">\r\n                            9. Do you create logos for startups?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-1\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-1\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Yes. We frequently work with startups to design logos that create strong first impressions and establish a professional brand presence from the beginning.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-2\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-2\">\r\n                            10. Will my logo work across all platforms?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-2\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-2\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Yes. We design logos that are versatile and scalable, ensuring they look great on websites, mobile devices, social media, business cards, and large-format prints.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-3\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-3\">\r\n                            11. How much does logo design cost in the UAE?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-3\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-3\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Pricing depends on the level of customization, research, and design complexity. We offer flexible packages to suit startups, small businesses, and established companies.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-4\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-4\">\r\n                            12. Do you follow a strategy when designing logos?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-4\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-4\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Yes. Our process includes understanding your business, analyzing competitors, researching your audience, and aligning the design with your overall brand strategy.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-5\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-5\">\r\n                            13. What makes a good logo design?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-5\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-5\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                A strong logo is simple, memorable, timeless, versatile, and relevant to your industry. It should communicate your brand personality while remaining visually appealing.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-6\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-6\">\r\n                            14. Can you provide brand guidelines along with the logo?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-6\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-6\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Yes. We can create brand guidelines that define logo usage, colors, typography, and spacing to maintain consistency across all marketing channels.\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                                        <div class=\"as-accordion-item  wa_accordion_item  wow fadeInUp2\"  data-wow-delay=\".1s\">\r\n                        <button class=\"item-title as-h-2 collapsed\"\r\n                            type=\"button\"\r\n                            data-bs-toggle=\"collapse\"\r\n                            data-bs-target=\"#collapse-110-7\"\r\n                            aria-expanded=\"false\"\r\n                            aria-controls=\"collapse-110-7\">\r\n                            15. How do I get started with your logo design services in the UAE?                            <span class=\"icon\">\r\n                                <i class=\"fa-solid fa-plus\"><\/i>\r\n                            <\/span>\r\n                        <\/button>\r\n                        <div id=\"collapse-110-7\"\r\n                        class=\"accordion-collapse collapse \"\r\n                        aria-labelledby=\"heading-110-7\"\r\n                        data-bs-parent=\"#accordionExample_110\">\r\n                            <p class=\"as-p-2 item-disc\">\r\n                                Simply contact us for a consultation. We\u2019ll understand your vision, discuss your preferences, and begin crafting a logo that represents your business effectively.                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\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>{} Services Fast, Secure, and Professional Websites for Growing Businesses &#8220;A static website is the perfect solution for businesses looking to establish a strong online presence with a simple, elegant, and cost-effective platform. Our Static Website Design &amp; Development services focus on delivering visually appealing, high-speed, and secure websites that effectively showcase your brand, services, [&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":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-3510","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/pages\/3510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/comments?post=3510"}],"version-history":[{"count":58,"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/pages\/3510\/revisions"}],"predecessor-version":[{"id":4005,"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/pages\/3510\/revisions\/4005"}],"wp:attachment":[{"href":"https:\/\/zropixel.com\/zropixel_uat\/wp-json\/wp\/v2\/media?parent=3510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}