first commit

images/0email.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 16.7695V3.76953H22V16.7695H5ZM13.5 11.4865L6 5.94253V15.7675H21V5.94353L13.5 11.4865ZM13.5 10.3105L21 4.76953H6L13.5 10.3105ZM2 19.7695V8.65353H3V18.7685H18.385V19.7685L2 19.7695Z" fill="white"/>
+</svg>

images/arrowcompare.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26" cy="26" r="26" fill="white"/>
+<path d="M20.4766 18.3694C20.3731 18.2523 20.25 18.1594 20.1143 18.096C19.9787 18.0326 19.8331 18 19.6862 18C19.5392 18 19.3937 18.0326 19.258 18.096C19.1224 18.1594 18.9992 18.2523 18.8957 18.3694L13.3293 24.6134C13.225 24.7294 13.1421 24.8676 13.0856 25.0197C13.0291 25.1719 13 25.3351 13 25.5C13 25.6649 13.0291 25.8281 13.0856 25.9803C13.1421 26.1324 13.225 26.2706 13.3293 26.3866L18.8957 32.6306C18.9992 32.7477 19.1224 32.8406 19.258 32.904C19.3937 32.9674 19.5392 33 19.6862 33C19.8331 33 19.9787 32.9674 20.1143 32.904C20.25 32.8406 20.3731 32.7477 20.4766 32.6306C20.581 32.5145 20.6638 32.3764 20.7203 32.2242C20.7768 32.072 20.8059 31.9088 20.8059 31.744C20.8059 31.5791 20.7768 31.4159 20.7203 31.2637C20.6638 31.1115 20.581 30.9734 20.4766 30.8573L15.6895 25.5L20.4766 20.1427C20.581 20.0266 20.6638 19.8885 20.7203 19.7363C20.7768 19.5841 20.8059 19.4209 20.8059 19.256C20.8059 19.0912 20.7768 18.928 20.7203 18.7758C20.6638 18.6236 20.581 18.4855 20.4766 18.3694ZM37.6707 24.6134L32.1043 18.3694C32.0005 18.253 31.8772 18.1606 31.7416 18.0976C31.606 18.0346 31.4606 18.0021 31.3138 18.0021C31.0174 18.0021 30.733 18.1342 30.5234 18.3694C30.4196 18.4858 30.3373 18.6241 30.2811 18.7762C30.2249 18.9283 30.196 19.0914 30.196 19.256C30.196 19.5886 30.3138 19.9075 30.5234 20.1427L35.3105 25.5L30.5234 30.8573C30.419 30.9734 30.3362 31.1115 30.2797 31.2637C30.2232 31.4159 30.1941 31.5791 30.1941 31.744C30.1941 31.9088 30.2232 32.072 30.2797 32.2242C30.3362 32.3764 30.419 32.5145 30.5234 32.6306C30.6269 32.7477 30.75 32.8406 30.8857 32.904C31.0213 32.9674 31.1669 33 31.3138 33C31.4608 33 31.6063 32.9674 31.742 32.904C31.8776 32.8406 32.0008 32.7477 32.1043 32.6306L37.6707 26.3866C37.775 26.2706 37.8579 26.1324 37.9144 25.9803C37.9709 25.8281 38 25.6649 38 25.5C38 25.3351 37.9709 25.1719 37.9144 25.0197C37.8579 24.8676 37.775 24.7294 37.6707 24.6134Z" fill="#D06A1E"/>
+</svg>

images/email.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 16.7695V3.76953H22V16.7695H5ZM13.5 11.4865L6 5.94253V15.7675H21V5.94353L13.5 11.4865ZM13.5 10.3105L21 4.76953H6L13.5 10.3105ZM2 19.7695V8.65353H3V18.7685H18.385V19.7685L2 19.7695Z" fill="white"/>
+</svg>

images/heroarrow.svg

@@ -0,0 +1,23 @@
+<svg width="2270" height="106" viewBox="0 0 2270 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M471 57.3182L1035.65 57.3182C1077.92 57.3182 1101.84 5.86527 1134.18 5.90091C1168.95 6.19491 1192.38 57.3182 1235.18 57.3182L1799 57.3182V105.609L471 105.609V57.3182Z" fill="white"/>
+<g filter="url(#filter0_d_252_1153)">
+<circle cx="1135" cy="59.4487" r="31.9572" fill="#CB6958"/>
+</g>
+<path d="M1134.75 66.765L1134.78 46.3943C1134.78 46.2537 1134.83 46.1189 1134.93 46.0195C1135.03 45.9201 1135.17 45.8643 1135.31 45.8643C1135.45 45.8643 1135.58 45.9201 1135.68 46.0195C1135.78 46.1189 1135.84 46.2537 1135.84 46.3943L1135.81 66.7656C1135.81 66.9062 1135.76 67.041 1135.66 67.1404C1135.56 67.2398 1135.42 67.2957 1135.28 67.2957C1135.14 67.2957 1135.01 67.2398 1134.91 67.1404C1134.81 67.041 1134.75 66.9056 1134.75 66.765Z" fill="white"/>
+<path d="M1135.28 73.1631C1134.16 70.1518 1132.26 66.4148 1130.24 64.0989L1135.28 65.9255L1140.33 64.1058C1138.31 66.4195 1136.4 70.1534 1135.28 73.1631Z" fill="white"/>
+<rect y="57" width="471" height="49" fill="white"/>
+<rect y="57" width="471" height="49" fill="white"/>
+<rect x="1799" y="57" width="471" height="49" fill="white"/>
+<defs>
+<filter id="filter0_d_252_1153" x="1097.04" y="24.4915" width="77.9141" height="77.9146" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1" dy="4"/>
+<feGaussianBlur stdDeviation="3.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_1153"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_1153" result="shape"/>
+</filter>
+</defs>
+</svg>

index.html

@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <meta charset="UTF-8">
+      <title>Art Avenue </title>
+      <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <!-- Bootstrap -->
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+      <!-- Custom CSS -->
+      <link rel="stylesheet" href="style.css">
+      <link rel="stylesheet" href="responsive.css">
+   </head>
+   <body>
+      <section class="hero-section">
+         <!-- Video Background -->
+         <img class="hero-video" src="images/MainBackground.png" alt="">
+         <!-- Overlay -->
+         <div class="overlay"></div>
+         <!-- Top Left Logo -->
+         <div class="logo">
+            <div class="topflex-wrapp">
+               <a href="#"><img src="images/logo.png" alt=""></a>
+               <a href="#"><img src="images/achiveAR.png" alt=""></a>
+            </div>
+         </div>
+         <!-- Right Vertical Text -->
+         <div class="vertical-text">
+            Art Avenue
+         </div>
+         <!-- Content -->
+         <div class="container h-100 d-flex align-items-center justify-content-center text-center">
+            <div class="content text-white">
+               <p class="tagline">PROPOSAL — DIGITAL PROTOTYPING</p>
+               <h1 class="main-heading">
+                  Digital Product Prototyping That <br>
+                  Eliminates Guesswork
+               </h1>
+               <p class="subtext">
+                  High-Fidelity Visualization for Faster Decisions, Lower Costs & <br>
+                  Scalable Product Design
+               </p>
+               <p class="steps">
+                  From Idea — Iteration — Approval
+               </p>
+            </div>
+         </div>
+         <!-- Scroll Button -->
+         <div class="scroll-down" class="cta-section">
+            <img src="images/heroarrow.svg" alt="">
+         </div>
+      </section>
+      <section class="about-section ">
+         <div class="container">
+            <div class="row align-items-start">
+               <!-- LEFT SIDE -->
+               <div class="col-lg-6">
+                  <div class="heading-main">
+                     <h6>ABOUT US</h6>
+                     <h2>
+                        Introducing Advanced Digital Product 
+                        Manipulation & Prototyping
+                     </h2>
+                  </div>
+                  <div class="image-wrap">
+                     <img src="images/Advanced Digital.png" class="img-fluid img-top" alt="">
+                  </div>
+               </div>
+               <!-- RIGHT SIDE -->
+               <div class="col-lg-6">
+                  <div class="experience-box">
+                     <h1>2K+</h1>
+                     <span>YEARS OF <br> EXPERIENCE</span>
+                  </div>
+                  <hr>
+                  <div class="content-text">
+                     <p>
+                        At AchievAR.ai, we help Art Avenue transform ideas into high-fidelity visual realities instantly.
+                     </p>
+                     <p>
+                        From a single concept, we generate multiple product variations with different materials, textures, and environments without manufacturing a single piece.
+                     </p>
+                     <p class="highlight">
+                        One product concept → Endless variations
+                     </p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section class="compare-section">
+         <div class="container">
+            <div class="top-content">
+               <div class="heading-main">
+                  <h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2>
+               </div>
+               <div class="right-text">
+                  <p>
+                     A premium digital prototyping solution crafted for Art Avenue,
+                     enabling exploration, testing, and scaling of product designs
+                     without physical sampling.
+                  </p>
+               </div>
+            </div>
+            <div class="wrapper">
+               <div class="before">
+                  <img src="images/beforeslide.png">
+                  <span class="label">BEFORE</span>
+               </div>
+               <div class="after">
+                  <img src="images/afterslide.png">
+                  <span class="label">AFTER</span>
+               </div>
+               <div class="scroller">
+                  <div class="circle"></div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <script>
+         let isDown = false;
+         const wrapper = document.querySelector(".wrapper");
+         const after = document.querySelector(".after");
+         const scroller = document.querySelector(".scroller");
+         
+         scroller.addEventListener("mousedown", () => isDown = true);
+         window.addEventListener("mouseup", () => isDown = false);
+         
+         window.addEventListener("mousemove", (e) => {
+         if (!isDown) return;
+         
+         let rect = wrapper.getBoundingClientRect();
+         let x = e.clientX - rect.left;
+         
+         x = Math.max(0, Math.min(x, rect.width));
+         
+         after.style.width = x + "px";
+         scroller.style.left = x + "px";
+         });
+      </script>
+      <section class="challenge-section">
+         <div class="container text-center">
+            <!-- Heading -->
+            <div class="heading-main mb-5">
+               <h2>The Challenge You Face</h2>
+               <p>
+                  Your current product development process involves significant time, cost, and effort,
+                  especially during the early stages of prototyping and design validation.
+               </p>
+            </div>
+            <!-- Cards Wrapper -->
+            <div class="challenge-wrapper">
+               <div class="row g-0">
+                  <!-- Card 1 -->
+                  <div class="col-lg-3 col-md-6">
+                     <div class="challenge-card">
+                        <h5>Multiple Physical Samples</h5>
+                        <img src="images/Multiple.png" alt="">
+                        <p>
+                           Creating variations in materials, textures, colors, and patterns requires.
+                        </p>
+                     </div>
+                  </div>
+                  <!-- Card 2 -->
+                  <div class="col-lg-3 col-md-6">
+                     <div class="challenge-card">
+                        <h5>Slow Decision-Making</h5>
+                        <img src="images/Slow.png" alt="">
+                        <p>
+                           Waiting for samples delays approvals and extends product development cycles
+                        </p>
+                     </div>
+                  </div>
+                  <!-- Card 3 -->
+                  <div class="col-lg-3 col-md-6">
+                     <div class="challenge-card">
+                        <h5>High Production Costs</h5>
+                        <img src="images/High.png" alt="">
+                        <p>
+                           Every iteration adds manufacturing costs and material waste
+                        </p>
+                     </div>
+                  </div>
+                  <!-- Card 4 -->
+                  <div class="col-lg-3 col-md-6">
+                     <div class="challenge-card">
+                        <h5>Limited Experimentation</h5>
+                        <img src="images/Limited.png" alt="">
+                        <p>
+                           Budget constraints prevent exploring multiple design directions
+                        </p>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section class="approach-section">
+         <div class="container text-center">
+            <!-- Heading -->
+            <div class="heading-main">
+               <h2>Why This Approach Works</h2>
+               <p>Delivering Faster Decisions with Smarter Visualization</p>
+            </div>
+            <div class="row g-4">
+               <!-- LEFT: OLD WAY -->
+               <div class="col-lg-6">
+                  <div class="approach-card old-way text-start">
+                     <h6 class="label red">TRADITIONAL PROTOTYPING</h6>
+                     <h2 class="title">The Old Way</h2>
+                     <div class="steps-grid">
+                        <div class="step red">→ Design</div>
+                        <div class="step red">→ Reproduce</div>
+                        <div class="step red">→ Prototype</div>
+                        <div class="step red">→ Delay</div>
+                        <div class="step red">→ Modify</div>
+                     </div>
+                  </div>
+               </div>
+               <!-- RIGHT: NEW WAY -->
+               <div class="col-lg-6">
+                  <div class="approach-card new-way text-start">
+                     <h6 class="label gold">OUR APPROACH</h6>
+                     <h2 class="title">The New Way</h2>
+                     <div class="steps-grid">
+                        <div class="step gold">→ Design</div>
+                        <div class="step gold">→ Digitally Test</div>
+                        <div class="step gold">→ Refine</div>
+                        <div class="step gold">→ Approve</div>
+                        <div class="step gold">→ Produce</div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <section class="evolution-section">
+         <div class="container">
+            <div class="evolutionwrap">
+               <!-- TOP HEADINGS -->
+               <div class="evolution-header">
+                  <div class="phase phase-left">
+                     <h3>Phase 1 : Raw Sketch</h3>
+                     <p>IDEA & CONCEPTUALIZATION</p>
+                  </div>
+                  <div class="phase phase-right">
+                     <h3>Phase 2 : Photorealistic Prototype</h3>
+                     <p>DIGITAL VISUALIZATION & REFINEMENT</p>
+                  </div>
+               </div>
+               <!-- MAIN IMAGE BOX -->
+               <div class="evolution-box">
+                  <!-- LEFT LABEL -->
+                  <div class="tag tag-left">Ideation</div>
+                  <!-- RIGHT LABEL -->
+                  <div class="tag tag-right">H-FI Visualization</div>
+                  <!-- CENTER IMAGE -->
+                  <img src="images/Sketch.png" alt="Evolution Design" class="evolution-image">
+               </div>
+            </div>
+         </div>
+      </section>
+      <section class="services-section">
+         <div class="container text-center">
+            <!-- Heading -->
+            <div class="heading-main mb-5">
+               <h2>What We Do</h2>
+               <p>
+                  Comprehensive digital prototyping services tailored to your 
+                  product development needs
+               </p>
+            </div>
+            <!-- Grid -->
+            <div class="row g-4">
+               <!-- 01 -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="service-card">
+                     <span class="number">01</span>
+                     <h5>Client Asset Integration</h5>
+                     <p>
+                        Integrate your existing textures, fabrics, and 3D models. Apply materials to multiple products and test endless combinations instantly.
+                     </p>
+                  </div>
+               </div>
+               <!-- 02 -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="service-card">
+                     <span class="number">02</span>
+                     <h5>Reference-Based Creation</h5>
+                     <p>
+                        Don’t have digital assets? Start from a single image, sketch, or existing product. We build high-quality visual outputs from it.
+                     </p>
+                  </div>
+               </div>
+               <!-- IMAGE -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="image-card">
+                     <img src="images/Whatwethird.png" alt="">
+                  </div>
+               </div>
+               <!-- 03 -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="service-card">
+                     <span class="number">03</span>
+                     <h5>Material & Texture Swapping</h5>
+                     <p>
+                        Seamlessly import existing product images, references, and design assets to start your digital transformation instantly.
+                     </p>
+                  </div>
+               </div>
+               <!-- 04 -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="service-card">
+                     <span class="number">04</span>
+                     <h5>Seamless Pattern Creation</h5>
+                     <p>
+                        Create and apply custom patterns, prints, and textures across your entire product line with precision.
+                     </p>
+                  </div>
+               </div>
+               <!-- IMAGE -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="image-card">
+                     <img src="images/Whatwefi ve.png" alt="">
+                  </div>
+               </div>
+               <!-- 05 -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="service-card">
+                     <span class="number">05</span>
+                     <h5>Cross-Product Scaling</h5>
+                     <p>
+                        Apply successful design elements across multiple product categories, ensuring cohesive collections.
+                     </p>
+                  </div>
+               </div>
+               <!-- 06 -->
+               <div class="col-lg-3 col-md-6">
+                  <div class="service-card">
+                     <span class="number">06</span>
+                     <h5>Contextual Staging</h5>
+                     <p>
+                        Visualize products in realistic interior settings to understand how designs perform in real-world environments.
+                     </p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <!-- VISUAL -->
+      <section class="visualprototyping">
+         <div class="container">
+            <!-- Heading -->
+            <div class="heading-main mb-5 text-center">
+               <h2>Visual Prototyping in Action</h2>
+               <p>
+                  Comprehensive digital prototyping services tailored to your <br> product development needs
+               </p>
+            </div>
+            <div class="row g-4">
+               <!-- CARD 1 -->
+               <div class="col-md-6">
+                  <div class="compare-card">
+                     <div class="wrapper">
+                        <div class="before">
+                           <img src="images/Visualafter.png">
+                           <span class="label">BEFORE</span>
+                        </div>
+                        <div class="after">
+                           <img src="images/Visualleft.png">
+                           <span class="label">AFTER</span>
+                        </div>
+                        <div class="scroller">
+                           <div class="circle"></div>
+                        </div>
+                     </div>
+                     <p>Material Transformation</p>
+                  </div>
+               </div>
+               <!-- CARD 2 -->
+               <div class="col-md-6">
+                  <div class="compare-card">
+                     <div class="wrapper">
+                        <div class="before">
+                           <img src="images/Visualafterright.png">
+                           <span class="label">BEFORE</span>
+                        </div>
+                        <div class="after">
+                           <img src="images/Visualbeforeright.png">
+                           <span class="label">AFTER</span>
+                        </div>
+                        <div class="scroller">
+                           <div class="circle"></div>
+                        </div>
+                     </div>
+                     <p>Design Iteration</p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <script>
+         document.querySelectorAll(".wrapper").forEach(wrapper => {
+         
+         let isDown = false;
+         const after = wrapper.querySelector(".after");
+         const scroller = wrapper.querySelector(".scroller");
+         
+         scroller.addEventListener("mousedown", () => isDown = true);
+         window.addEventListener("mouseup", () => isDown = false);
+         
+         window.addEventListener("mousemove", (e) => {
+         if (!isDown) return;
+         
+         let rect = wrapper.getBoundingClientRect();
+         let x = e.clientX - rect.left;
+         
+         x = Math.max(0, Math.min(x, rect.width));
+         
+         after.style.width = x + "px";
+         scroller.style.left = x + "px";
+         });
+         
+         });
+      </script>
+      <section class="material-section">
+         <div class="container">
+            <div class="optionmult">
+               <!-- TITLE -->
+               <h3 class="material-title">Multiple Material Options</h3>
+               <!-- TOP IMAGES -->
+               <div class="material-grid top-grid">
+                  <div class="material-item"><img src="images/Material1.png"></div>
+                  <div class="material-item"><img src="images/Material2.png"></div>
+                  <div class="material-item"><img src="images/Material3.png"></div>
+                  <div class="material-item"><img src="images/Material4.png"></div>
+               </div>
+            </div>
+            <!-- CENTER VIDEO -->
+            <div class="material-video">
+               <img src="/images/Material5.png" class="video-thumb">
+               <div class="play-btn">
+                  ▶
+               </div>
+            </div>
+            <!-- BOTTOM IMAGES -->
+            <div class="material-grid bottom-grid">
+               <!--   
+                  <button class="nav-btn left">←</button> -->
+               <div class="material-item"><img src="images/Material9.png"></div>
+               <div class="material-item"><img src="images/Material7.png"></div>
+               <div class="material-item"><img src="images/Material8.png"></div>
+               <div class="material-item"><img src="images/Material9.png"></div>
+               <!--   
+                  <button class="nav-btn right">→</button> -->
+            </div>
+         </div>
+      </section>
+      <!-- SECTION 1 : IMPACT -->
+      <section class="impact-section">
+         <div class="container text-center">
+            <div class="heading-main">
+               <h2>Expected Business Impact</h2>
+               <p class="impact-subtitle mb-5">
+                  What this means for your bottom line and  product <br> development efficiency
+               </p>
+            </div>
+            <div class="impact-grid">
+               <div class="impact-card">
+                  <h3>50–70%</h3>
+                  <p>Reduction in prototyping cost</p>
+               </div>
+               <div class="impact-card">
+                  <h3>3x</h3>
+                  <p>Faster product approval cycles</p>
+               </div>
+               <div class="impact-card">
+                  <h3>10x</h3>
+                  <p>Increased design experimentation</p>
+               </div>
+               <div class="impact-card">
+                  <h3>100%</h3>
+                  <p>Better product-market fit</p>
+               </div>
+            </div>
+         </div>
+      </section>
+      <!-- SECTION 2 : WHY CHOOSE US -->
+      <section class="why-section">
+         <div class="container">
+            <div class="row align-items-center">
+               <!-- LEFT IMAGES -->
+               <div class="col-lg-6">
+                  <div class="why-images">
+                     <img src="images/Choose.png" class="img-small">
+                  </div>
+               </div>
+               <!-- RIGHT CONTENT -->
+               <div class="col-lg-6">
+                  <div class="why-content">
+                     <h2>Why Choose Us</h2>
+                     <p class="why-subtext">
+                        What this means for your bottom line and product development efficiency
+                     </p>
+                     <ul>
+                        <li>We build decision-making tools, not just pretty visuals</li>
+                        <li>Focus on business efficiency, not just aesthetics</li>
+                        <li>Deep expertise in high-fidelity product visualization</li>
+                        <li>Custom workflows tailored to your product type</li>
+                     </ul>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <!-- SECTION 3 : CTA -->
+      <section class="cta-section">
+         <div class="container">
+            <div class="cta-box">
+               <div class="cta-content">
+                  <h2>Let's Test This With Your Product</h2>
+                  <p>
+                     We'd love to demonstrate what's possible with a quick pilot using your own product.
+                  </p>
+                  <div class="cta-buttons">
+                     <a href="#" class="btn-primary">Schedule a Demo</a>
+                     <a href="#" class="btn-outline"><img src="images/email.svg" alt="">Start Your Free Pilot</a>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </section>
+      <footer>
+         <p>Designed By AchievAR.ai</p>
+      </footer>
+   </body>
+</html>

responsive.css

@@ -0,0 +1,341 @@
+/* =========================
+   LARGE DEVICES (1200px ↓)
+========================= */
+@media (max-width: 1200px) {
+
+    .main-heading {
+      font-size: 42px;
+    }
+  
+    .vertical-text {
+      right: 10px;
+      font-size: 14px;
+    }
+  
+    .experience-box h1 {
+      font-size: 48px;
+    }
+  
+  }
+  
+  /* =========================
+     TABLET DEVICES (992px ↓)
+  ========================= */
+  @media (max-width: 992px) {
+  
+    .main-heading {
+      font-size: 34px;
+    }
+  
+    .subtext {
+      font-size: 14px;
+    }
+  
+    .vertical-text {
+      display: none;
+    }
+  
+    .about-section .row {
+      flex-direction: column;
+    }
+  
+    .experience-box {
+      margin-top: 20px;
+      text-align: left;
+    }
+  
+    .top-content {
+      flex-direction: column;
+      text-align: center;
+    }
+  
+    .right-text {
+      margin-top: 0px;
+      width: 100%;
+      font-size: 14px;
+    }
+  
+  }
+  
+  /* =========================
+     MOBILE DEVICES (768px ↓)
+  ========================= */
+  @media (max-width: 768px) {
+  
+    .main-heading {
+      font-size: 26px;
+      line-height: 1.4;
+    }
+  
+    .tagline {
+      font-size: 12px;
+    }
+  
+    .subtext {
+      font-size: 13px;
+    }
+  
+    .steps {
+      font-size: 12px;
+    }
+  
+    .logo img {
+      height: 35px;
+    }
+  .hero-section img {
+    width: 100%;
+    border-radius: unset;
+}
+    .hero-section {
+      height: 83vh;
+      padding: 0px 0;
+      border-radius: 0;
+      margin-bottom: 0;
+      width: 100%;
+      margin: 0;
+    }
+  
+    .compare-section .wrapper {
+      height: 300px;
+    }
+  
+    .challenge-card {
+      padding: 20px;
+    }
+  
+    .approach-card {
+      padding: 20px;
+      margin: 0;
+    }
+  
+    .evolution-header {
+      flex-direction: column;
+      text-align: center;
+    }
+  
+    .evolution-box {
+      height: auto;
+    }
+  
+  }
+  
+  /* =========================
+     SMALL MOBILE (576px ↓)
+  ========================= */
+  @media (max-width: 576px) {
+  
+    .main-heading {
+      font-size: 22px;
+    }
+  
+    .subtext br {
+      display: none;
+    }
+  
+    .content {
+      padding: 0 -5px;
+    }
+  
+    .hero-video {
+      object-fit: cover;
+      height: 100%;
+    }
+  .challenge-section {
+    padding: 40px 0px;
+}
+    .heading-main p {
+    max-width: 100%;
+    margin: auto;
+    color: rgb(56 56 56);
+    font-size: 16px;
+    margin: 0 0 30px !important;
+}
+      .cta-box h2 {
+    font-size: 26px;
+    margin: 0;
+}
+      .btn-primary {
+    background: rgb(203, 105, 88);
+    padding: 10px 9px;
+    color: rgb(255, 255, 255);
+    border-radius: 0px;
+    margin-right: 10px;
+    text-decoration: none;
+    font-size: 14px;
+}
+      .btn-outline {
+    border: 1px solid rgb(255, 255, 255);
+    padding: 9px 9px;
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    font-size: 14px;
+}
+      .why-content h2 {
+    font-size: 28px;
+    margin: 0 0 10px;
+}
+      .why-content {
+    padding: 0 0px;
+}
+      .cta-section {
+    padding: 39px 0px;
+}
+      .img-small {
+    width: 100%;
+    border-radius: 10px;
+    margin-bottom: 30px;
+}
+      .why-section {
+    padding: 40px 0px 0;
+}
+      .impact-card h3 {
+    font-family: "Instrument Serif", serif;
+    font-size: 37px;
+}
+    .impact-card {
+    padding: 24px 10px;
+    background: #FFFFFF;
+}
+    .video-thumb {
+    width: 100%;
+    border-radius: 20px;
+    height: 300px;
+    object-fit: cover;
+}
+    .material-video {
+       padding: 10px 10px;
+       margin: 9px 0;
+    }
+    .optionmult {
+    padding: 10px 10px;
+}
+    .wrapper {
+    height: 250px;
+}
+    .compare-card {
+    border: 1px solid #EFEFEF;
+    box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
+    border-radius: 15px;
+    padding: 15px 15px;
+}
+    .visualprototyping {
+    padding: 40px 0;
+}
+    .heading-main {
+    margin: 0 0 0px !important;
+}
+    .image-card img {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+    border-radius: 18px;
+}
+    .number {
+    margin-bottom: 0px;
+}
+    .service-card {
+    padding: 17px;
+}
+    .service-card p {
+    margin: 15px 0px 0px;
+}
+    .services-section {
+    background: rgb(245, 241, 237);
+    padding: 40px 0px;
+}
+    .evolutionwrap {
+    padding: 15px;
+}
+    .phase h3 {
+    font-size: 16px;
+    font-weight: 500;
+}
+    .phase p {
+    font-size: 12px;
+}
+    .evolution-section {
+    padding: 40px 0px;
+}
+    .step {
+    padding: 11px 10px;
+    font-size: 15px;
+}
+    .label {
+    font-size: 12px;
+    letter-spacing: 1px;
+    margin-bottom: 10px;
+}
+    .title {
+    font-size: 24px;
+    margin-bottom: 25px;
+    font-weight: 500;
+}
+    .challenge-card h5 {
+    font-size: 16px;
+    font-weight: 500;
+    width: 100%;
+    margin-bottom: 20px;
+    color: rgb(17, 17, 17);
+}
+    .scroll-down {
+      bottom: -2px;
+    }
+  .heading-main h2 {
+    font-size: 24px;
+    font-weight: 500;
+    margin-bottom: 10px;
+    line-height: 32px;
+}
+    .compare-section {
+    padding: 40px 0px;
+}
+    .image-wrap {
+    position: relative;
+    margin-top: 20px;
+}
+    .about-section {
+    padding: 30px 0px;
+}
+    .material-grid {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+    }
+  
+    .impact-grid {
+      grid-template-columns: 1fr;
+    }
+  
+    .cta-box {
+      padding: 17px;
+    }
+  
+    .cta-buttons {
+      flex-direction: column;
+      gap: 10px;
+      display: block;
+    }
+  
+  }
+  
+  /* =========================
+     EXTRA SMALL (400px ↓)
+  ========================= */
+  @media (max-width: 400px) {
+  
+    .main-heading {
+      font-size: 33px;
+    }
+  
+    .tagline {
+      font-size: 13px;
+    }
+  
+    .subtext {
+      font-size: 14px;
+    }
+  
+    .logo img {
+      height: 28px;
+    }
+  
+  }

style.css

@@ -0,0 +1,693 @@
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Parkinsans:wght@300..800&display=swap"); body, html {
+    margin: 0px;
+    padding: 0px;
+    font-family: Parkinsans, sans-serif;
+    }
+    /* Chrome, Edge, Safari */
+    ::-webkit-scrollbar {
+    width: 1px;   
+    }
+    ::-webkit-scrollbar-track {
+    background: transparent; 
+    }
+    ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3); 
+    }
+    /* Firefox */
+    * {
+    scrollbar-width: thin; 
+    scrollbar-color: rgba(0,0,0,0.3) transparent;
+    }
+    h2 {
+    font-family: "Instrument Serif", serif;
+    }
+    .hero-section {
+    position: relative;
+    height: 90vh;
+    width: 98%;
+    margin: 0px auto;
+    border-radius: 20px;
+    margin-bottom: 70px;
+    /* overflow: hidden; */
+    margin-top: 20px;
+    }
+    .hero-video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+    z-index: 1;
+    border-radius: 20px;
+    overflow: hidden;
+    }
+    .topflex-wrapp {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0px 20px;
+    }
+    .overlay {
+    }
+    .logo {
+    position: absolute;
+    top: 10px;
+    color: white;
+    z-index: 3;
+    width: 100%;
+    }
+    .logo h4 {
+    letter-spacing: 3px;
+    font-weight: 600;
+    }
+    .logo span {
+    font-size: 12px;
+    opacity: 0.7;
+    }
+    .vertical-text {
+    position: absolute;
+    right: 8%;
+    top: 70%;
+    transform: rotate(90deg) translateY(-50%);
+    transform-origin: right center;
+    z-index: 3;
+    font-weight: bold;
+    font-size: 83px;
+    color: transparent;
+    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.42);
+    font-family: Parkinsans, sans-serif;
+    }
+    .content {
+    z-index: 3;
+    }
+    .tagline {
+    font-size: 14px;
+    letter-spacing: 2px;
+    margin-bottom: 2px;
+    font-family: Parkinsans, sans-serif;
+    color: rgb(254, 197, 187);
+    }
+    .main-heading {
+    font-size: 71px;
+    font-family: "Instrument Serif", serif;
+    letter-spacing: 2px;
+    }
+    .subtext {
+    margin-top: 2px;
+    font-size: 20px;
+    font-family: Parkinsans, sans-serif;
+    margin-bottom: 30px;
+    }
+    .steps {
+    font-size: 14px;
+    font-family: Parkinsans, sans-serif;
+    background: linear-gradient(90deg, rgba(253, 169, 19, 0) 0%, rgba(253, 169, 19, 0.3) 49.04%, rgba(253, 169, 19, 0) 100%);
+    border-radius: 100px;
+    width: fit-content;
+    margin: 0px auto;
+    padding: 6px 50px;
+    }
+    .scroll-down {
+    position: absolute;
+    bottom: -39px;
+    width: 100%;
+    cursor: pointer;
+    z-index: 3;
+    }
+    .scroll-down img {
+    width: 100%;
+    height: 100%;
+    }
+    .about-section {
+    padding: 70px 0px;
+    }
+    .heading-main h6 {
+    color: rgb(196, 139, 43);
+    font-size: 14px;
+    letter-spacing: 1px;
+    margin-bottom: 10px;
+    font-family: Parkinsans, sans-serif;
+    }
+    .image-wrap {
+    position: relative;
+    margin-top: 30px;
+    }
+    .img-top {
+    width: 90%;
+    }
+    .img-bottom {
+    width: 65%;
+    position: absolute;
+    right: 0px;
+    bottom: -80px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px;
+    }
+    .experience-box {
+    display: flex;
+    align-items: center;
+    gap: 28px;
+    margin-top: 150px;
+    }
+    .experience-box h1 {
+    font-size: 120px;
+    font-weight: 700;
+    margin: 0px;
+    color: rgb(26, 18, 6);
+    font-family: Parkinsans, sans-serif;
+    }
+    .experience-box span {
+    color: rgb(189, 123, 5);
+    font-size: 20px;
+    }
+    hr {
+    margin: 30px 0px;
+    opacity: 0.3;
+    }
+    .content-text p {
+    color: rgb(85, 85, 85);
+    font-size: 16px;
+    line-height: 1.7;
+    margin: 0px 0px 30px;
+    }
+    .content-text .highlight {
+    font-weight: 600;
+    color: rgb(0, 0, 0);
+    }
+    .challenge-section {
+    padding: 80px 0px;
+    }
+    .heading-main p {
+    max-width: 700px;
+    margin: auto;
+    color: rgb(102, 102, 102);
+    font-size: 16px;
+    line-height: 1.6;
+    }
+    .challenge-wrapper {
+    background: rgb(255, 255, 255);
+    overflow: hidden;
+    border: 1px solid rgb(239, 239, 239);
+    box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px;
+    border-radius: 15px;
+    }
+    .challenge-card {
+    padding: 30px 25px;
+    text-align: left;
+    height: 100%;
+    border-right: 1px solid rgb(238, 238, 238) !important;
+    }
+    .challenge-card:last-child {
+    border-width: medium;
+    border-style: none;
+    border-color: currentcolor;
+    border-image: initial;
+    }
+    .challenge-card h5 {
+    font-size: 20px;
+    font-weight: 500;
+    width: 70%;
+    margin-bottom: 20px;
+    color: rgb(17, 17, 17);
+    }
+    .challenge-card img {
+    width: 100%;
+    border-radius: 12px;
+    margin-bottom: 15px;
+    }
+    .challenge-card p {
+    font-size: 15px;
+    color: rgb(58, 58, 58);
+    line-height: 1.6;
+    }
+    .approach-section {
+    }
+    .heading-main p {
+    color: rgb(102, 102, 102);
+    font-size: 16px;
+    }
+    .approach-card {
+    padding: 40px;
+    margin-top: 40px;
+    background: rgb(255, 255, 255);
+    border: 1px solid rgb(239, 239, 239);
+    box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px;
+    border-radius: 15px;
+    }
+    .label {
+    font-size: 16px;
+    letter-spacing: 1px;
+    margin-bottom: 10px;
+    }
+    .label.red {
+    color: rgb(229, 57, 53);
+    }
+    .label.gold {
+    color: rgb(255, 144, 48);
+    }
+    .title {
+    font-size: 34px;
+    margin-bottom: 25px;
+    font-weight: 500;
+    }
+    .steps-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    }
+    .step {
+    padding: 14px 18px;
+    border-radius: 10px;
+    font-size: 18px;
+    background: rgb(249, 249, 249);
+    }
+    .step.red {
+    background: rgba(238, 43, 43, 0.04);
+    border: 1px solid rgba(238, 43, 43, 0.18);
+    border-radius: 8px;
+    }
+    .step.gold {
+    background: rgb(255, 249, 237);
+    border: 1px solid rgb(245, 228, 193);
+    border-radius: 8px;
+    }
+    .services-section {
+    background: rgb(245, 241, 237);
+    padding: 70px 0px;
+    }
+    .heading-main h2 {
+    font-size: 37px;
+    font-weight: 500;
+    margin-bottom: 10px;
+    line-height: 52px;
+    }
+    .heading-main p {
+    max-width: 650px;
+    margin: auto;
+    color: rgb(56 56 56);
+    font-size: 16px;
+    }
+    .service-card {
+    background: rgb(255, 255, 255);
+    padding: 35px;
+    border-radius: 18px;
+    text-align: left;
+    height: 100%;
+    border: 1px solid rgb(230, 226, 220);
+    }
+    .number {
+    font-size: 39px;
+    display: block;
+    margin-bottom: 15px;
+    color: rgb(17, 17, 17);
+    font-family: "Instrument Serif", serif;
+    }
+    .service-card h5 {
+    font-size: 20px;
+    margin-bottom: 15px;
+    line-height: 30px;
+    }
+    .service-card p {
+    font-size: 14px;
+    color: rgb(32, 32, 32);
+    line-height: 1.6;
+    margin: 42px 0px 0px;
+    }
+    .image-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 18px;
+    }
+    .evolution-section {
+    padding: 80px 0px;
+    }
+    .evolution-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    }
+    .phase h3 {
+    font-size: 22px;
+    font-weight: 500;
+    }
+    .phase p {
+    font-size: 18px;
+    letter-spacing: 1px;
+    color: rgb(58, 58, 58);
+    }
+    .evolution-box {
+    position: relative;
+    background: rgb(255, 255, 255);
+    border-radius: 20px;
+    }
+    .evolution-image {
+    width: 100%;
+    border-radius: 15px;
+    }
+    .tag {
+    position: absolute;
+    top: -20px;
+    border: 1px solid rgba(208, 208, 208, 0.37);
+    padding: 8px 18px;
+    background: rgb(255, 255, 255);
+    border-radius: 30px;
+    font-size: 13px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+    }
+    .tag-left {
+    left: 120px;
+    }
+    .tag-right {
+    right: 111px;
+    }
+    .evolution-arrow {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgb(17, 17, 17);
+    color: rgb(255, 255, 255);
+    padding: 10px 25px;
+    border-radius: 30px;
+    font-size: 14px;
+    letter-spacing: 2px;
+    }
+    .material-section {
+    padding: 80px 0px;
+    }
+    .material-title {
+    text-align: center;
+    margin-bottom: 25px;
+    font-size: 20px;
+    color: rgb(51, 51, 51);
+    }
+    .material-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    }
+    .material-item img {
+    width: 100%;
+    border-radius: 15px;
+    display: block;
+    }
+    .material-video {
+    position: relative;
+    margin: 30px 0px;
+    border: 1px solid #EFEFEF;
+    box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
+    border-radius: 15px;
+    padding: 20px 20px;
+    }
+    .video-thumb {
+    width: 100%;
+    border-radius: 20px;
+    }
+    .play-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgb(255, 255, 255);
+    color: rgb(255, 77, 77);
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
+    cursor: pointer;
+    }
+    .bottom-grid {
+    position: relative;
+    align-items: center;
+    }
+    .nav-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgb(255, 255, 255);
+    border-width: medium;
+    border-style: none;
+    border-color: currentcolor;
+    border-image: initial;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px;
+    cursor: pointer;
+    }
+    .nav-btn.left {
+    left: -20px;
+    }
+    .nav-btn.right {
+    right: -20px;
+    }
+    .impact-section {
+    background: #F5F1ED;
+    padding: 80px 0px;
+    }
+    .impact-title {
+    font-size: 28px;
+    margin-bottom: 10px;
+    }
+    .impact-subtitle {
+    font-size: 14px;
+    color: rgb(102, 102, 102);
+    margin-bottom: 40px;
+    }
+    .impact-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    }
+    .impact-card {
+    padding: 40px 20px;
+    background: #FFFFFF;
+    border: 1px solid #EFEFEF;
+    border-radius: 15px;
+    }
+    .impact-card h3 {
+    font-size: 28px;
+    font-family: "Instrument Serif", serif;
+    font-size: 52px;
+    }
+    .impact-card p {
+    font-size: 15px;
+    color: #3A3A3A;
+    }
+    .why-section {
+    padding: 80px 0px;
+    }
+    .why-images {
+    }
+    .img-small {
+    width: 95%;
+    border-radius: 10px;
+    }
+    .img-large {
+    width: 55%;
+    border-radius: 10px;
+    }
+    .why-content h2 {
+    font-size: 37px;
+    margin: 0 0 10px;
+    }
+    .why-subtext {
+    color: #3A3A3A;
+    margin-bottom: 20px;
+    }
+    .why-content ul {
+    list-style: none;
+    padding: 0px;
+    margin-top: 31px;
+    }
+    .why-content ul li {
+    margin-bottom: 17px;
+    position: relative;
+    padding-left: 24px;
+    }
+    .why-content ul li::before {
+    content: "→";
+    position: absolute;
+    left: 0px;
+    }
+    .cta-section {
+    padding: 60px 0px;
+    }
+    .cta-box {
+    position: relative;
+    border-radius: 15px;
+    overflow: hidden;
+    background: url("images/Schedule.png") center center / cover no-repeat;
+    padding: 90px 40px;
+    color: rgb(255, 255, 255);
+    }
+    .cta-box::before {
+    content: "";
+    position: absolute;
+    inset: 0px;
+    background: linear-gradient(269.86deg, rgba(0, 0, 0, 0) -26.8%, rgba(0, 0, 0, 0) -12.79%, rgba(0, 2, 9, 0.65) 49.44%, rgb(0, 4, 16) 99.87%);
+    width: 100%;
+    }
+    .cta-content {
+    position: relative;
+    z-index: 2;
+    max-width: 500px;
+    }
+    .cta-buttons {
+    margin-top: 20px;
+    }
+    .btn-primary {
+    background: rgb(203, 105, 88);
+    padding: 13px 26px;
+    color: rgb(255, 255, 255);
+    border-radius: 0px;
+    margin-right: 10px;
+    text-decoration: none;
+    }
+    .btn-outline {
+    border: 1px solid rgb(255, 255, 255);
+    padding: 13px 27px;
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    }
+    .btn-outline img {
+    padding-right: 10px;
+    }
+    .why-content {
+    padding: 0 30px;
+    }
+    .evolutionwrap {
+    background: rgb(255, 255, 255);
+    border: 1px solid rgb(239, 239, 239);
+    box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px;
+    border-radius: 15px;
+    padding: 30px;
+    }
+    footer p {
+    text-align: center;
+    }
+    .cta-box p {
+    margin: 20px 0px 38px;
+    font-weight: 200;
+    }
+    .cta-box h2 {
+    font-size: 33px;
+    }
+    .optionmult {
+    border: 1px solid #EFEFEF;
+    box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
+    border-radius: 15px;
+    padding: 20px 20px;
+    }
+    .compare-section {
+    padding: 60px 80px;
+    }
+    /* TOP TEXT */
+    .top-content {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    }
+    .left-text h1 {
+    font-size: 36px;
+    font-weight: 500;
+    color: #222;
+    }
+    .right-text {
+    width: 35%;
+    font-size: 15px;
+    color: #666;
+    line-height: 1.6;
+    }
+    /* SLIDER */
+    .wrapper {
+    position: relative;
+    width: 100%;
+    height: 450px;
+    overflow: hidden;
+    border-radius: 6px;
+    }
+    .wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    }
+    /* BEFORE AFTER */
+    .before, .after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    }
+    .after {
+    width: 50%;
+    overflow: hidden;
+    }
+    /* LABEL */
+    .wrapper .label {
+    position: absolute;
+    top: 20px;
+    color: #fff;
+    font-size: 14px;
+    letter-spacing: 2px;
+    }
+    .before .label {
+    right: 20px;
+    }
+    .after .label {
+    right: 20px;
+    }
+    /* SCROLLER */
+    .scroller {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    width: 5px;
+    background: white;
+    cursor: pointer;
+    }
+    .compare-section {
+    background: url(./images/withoutlimitbackground.png);
+    }
+    .circle {
+    position: absolute;
+    background-image: url(/images/arrowcompare.svg);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 53px;
+    height: 50px;
+    background-repeat: round;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #c96b2c;
+    font-size: 18px;
+    }
+    .visualprototyping {
+    padding: 70px 0;
+    }
+    .compare-card {
+    border: 1px solid #EFEFEF;
+    box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
+    border-radius: 15px;
+    padding: 20px 20px;
+    }
+    .compare-card P {
+    text-align: center;
+    margin: 0;
+    margin-top: 20px;
+    font-size: 20px;
+    font-weight: 500;
+    color: black;
+    }