commit 05a46e5563f0bd52b604f2a12b1c9d458a49a371 Author: Goutam Date: Thu Apr 23 14:19:10 2026 +0530 initial commit diff --git a/images/0email.svg b/images/0email.svg new file mode 100644 index 0000000..769c747 --- /dev/null +++ b/images/0email.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/Advanced Digital.png b/images/Advanced Digital.png new file mode 100644 index 0000000..0d57f77 Binary files /dev/null and b/images/Advanced Digital.png differ diff --git a/images/ArtAvenueright.svg b/images/ArtAvenueright.svg new file mode 100644 index 0000000..6ee9737 --- /dev/null +++ b/images/ArtAvenueright.svg @@ -0,0 +1,12 @@ + +
 + + + + + + + + + + diff --git a/images/Choose.png b/images/Choose.png new file mode 100644 index 0000000..e1ef728 Binary files /dev/null and b/images/Choose.png differ diff --git a/images/High.png b/images/High.png new file mode 100644 index 0000000..3584b45 Binary files /dev/null and b/images/High.png differ diff --git a/images/Limited.png b/images/Limited.png new file mode 100644 index 0000000..42152cc Binary files /dev/null and b/images/Limited.png differ diff --git a/images/MainBackground.png b/images/MainBackground.png new file mode 100644 index 0000000..be2074f Binary files /dev/null and b/images/MainBackground.png differ diff --git a/images/Material1.png b/images/Material1.png new file mode 100644 index 0000000..1d2a08a Binary files /dev/null and b/images/Material1.png differ diff --git a/images/Material2.png b/images/Material2.png new file mode 100644 index 0000000..de7b2f8 Binary files /dev/null and b/images/Material2.png differ diff --git a/images/Material3.png b/images/Material3.png new file mode 100644 index 0000000..5049b2c Binary files /dev/null and b/images/Material3.png differ diff --git a/images/Material4.png b/images/Material4.png new file mode 100644 index 0000000..897b30f Binary files /dev/null and b/images/Material4.png differ diff --git a/images/Material5.png b/images/Material5.png new file mode 100644 index 0000000..fba7140 Binary files /dev/null and b/images/Material5.png differ diff --git a/images/Material7.png b/images/Material7.png new file mode 100644 index 0000000..06be826 Binary files /dev/null and b/images/Material7.png differ diff --git a/images/Material8.png b/images/Material8.png new file mode 100644 index 0000000..14fdbad Binary files /dev/null and b/images/Material8.png differ diff --git a/images/Material9.png b/images/Material9.png new file mode 100644 index 0000000..137008c Binary files /dev/null and b/images/Material9.png differ diff --git a/images/Multiple.png b/images/Multiple.png new file mode 100644 index 0000000..365c5cf Binary files /dev/null and b/images/Multiple.png differ diff --git a/images/Schedule.png b/images/Schedule.png new file mode 100644 index 0000000..1c6f248 Binary files /dev/null and b/images/Schedule.png differ diff --git a/images/Sketch.png b/images/Sketch.png new file mode 100644 index 0000000..9614109 Binary files /dev/null and b/images/Sketch.png differ diff --git a/images/Slow.png b/images/Slow.png new file mode 100644 index 0000000..36617c3 Binary files /dev/null and b/images/Slow.png differ diff --git a/images/Video.mp4 b/images/Video.mp4 new file mode 100644 index 0000000..820f985 Binary files /dev/null and b/images/Video.mp4 differ diff --git a/images/Visualafter.png b/images/Visualafter.png new file mode 100644 index 0000000..a1df6a3 Binary files /dev/null and b/images/Visualafter.png differ diff --git a/images/Visualafterright.png b/images/Visualafterright.png new file mode 100644 index 0000000..d09aa80 Binary files /dev/null and b/images/Visualafterright.png differ diff --git a/images/Visualbeforeright.png b/images/Visualbeforeright.png new file mode 100644 index 0000000..4f08aae Binary files /dev/null and b/images/Visualbeforeright.png differ diff --git a/images/Visualleft.png b/images/Visualleft.png new file mode 100644 index 0000000..59b3e0c Binary files /dev/null and b/images/Visualleft.png differ diff --git a/images/Whatwefi ve.png b/images/Whatwefi ve.png new file mode 100644 index 0000000..7b726ea Binary files /dev/null and b/images/Whatwefi ve.png differ diff --git a/images/Whatwethird.png b/images/Whatwethird.png new file mode 100644 index 0000000..1faace3 Binary files /dev/null and b/images/Whatwethird.png differ diff --git a/images/achiveAR.png b/images/achiveAR.png new file mode 100644 index 0000000..143263d Binary files /dev/null and b/images/achiveAR.png differ diff --git a/images/afterslide.png b/images/afterslide.png new file mode 100644 index 0000000..614e968 Binary files /dev/null and b/images/afterslide.png differ diff --git a/images/arrowcompare.svg b/images/arrowcompare.svg new file mode 100644 index 0000000..1667204 --- /dev/null +++ b/images/arrowcompare.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/beforeslide.png b/images/beforeslide.png new file mode 100644 index 0000000..98460ef Binary files /dev/null and b/images/beforeslide.png differ diff --git a/images/email.svg b/images/email.svg new file mode 100644 index 0000000..769c747 --- /dev/null +++ b/images/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/heroarrow.svg b/images/heroarrow.svg new file mode 100644 index 0000000..b989cdc --- /dev/null +++ b/images/heroarrow.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..bb19d98 Binary files /dev/null and b/images/logo.png differ diff --git a/images/withoutlimitbackground.png b/images/withoutlimitbackground.png new file mode 100644 index 0000000..0cab9bb Binary files /dev/null and b/images/withoutlimitbackground.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f515f32 --- /dev/null +++ b/index.html @@ -0,0 +1,650 @@ + + + + + Genral + + + + + + + + + + + +
+ + + +
+ + + + + +
+
+

PROPOSAL — DIGITAL PROTOTYPING

+

+ Smarter Product Design Starts with Digital Prototyping +

+

+ Visualize, test, and refine your products with high-quality 3D prototyping, so you can
make faster decisions, reduce costs, and move to production with confidence. +

+

+ From Idea → Design → Iteration → Approval → Production +

+
+
+ + +
+
+
+
+ +
+
+
ABOUT US
+

+ Turn Your Product Ideas into Clear, Testable Visuals +

+
+
+ +
+
+ +
+
+

2,000+

+ Designs Visualized
Across Industries +
+
+
+

+ We help businesses like yours create high-quality digital prototypes that allow you to see, test, and refine your product before a single unit is manufactured. +

+

+ From materials and textures to colors and finishes, you can explore multiple variations quickly making it easier to choose what works best without wasting time or budget. +

+

+ One idea can lead to countless possibilities, when you have the right visualization. +

+
+
+
+
+
+
+
+
+
+

Design Without Limits.
Visualize Before You Manufacture.

+
+
+

+ With digital prototyping, you can explore multiple directions, compare options side by side, and finalize designs faster without delays or added costs. +

+
+
+
+
+ + BEFORE +
+ +
+ + AFTER +
+ +
+
+
+
+
+
+ + +
+
+ +
+

What’s Slowing Down Your Product Development?

+

+ If your current process feels slow, expensive, or limiting, you're not alone. +

+
+ +
+
+ +
+
+
Multiple Physical Samples
+ +

+ Creating variations in materials, textures, colors, and patterns requires. +

+
+
+ +
+
+
Slow Decision-Making
+ +

+ Waiting for samples delays approvals and extends product development cycles +

+
+
+ +
+
+
High Production Costs
+ +

+ Every iteration adds manufacturing costs and material waste +

+
+
+ +
+
+
Limited Experimentation
+ +

+ Budget constraints prevent exploring multiple design directions +

+
+
+
+
+
+
+
+
+ +
+

Why This Approach Works

+

Delivering Faster Decisions with Smarter Visualization

+
+
+ +
+
+
TRADITIONAL PROTOTYPING
+

The Old Way

+
+
→ Design
+
→ Reproduce
+
→ Prototype
+
→ Delay
+
→ Modify
+
+
+
+ +
+
+
OUR APPROACH
+

The New Way

+
+
→ Design
+
→ Digitally Test
+
→ Refine
+
→ Approve
+
→ Produce
+
+
+
+
+
+
+
+
+
+ + +
+
+

Phase 1 : Raw Sketch

+

IDEA & CONCEPTUALIZATION

+
+ +
+

Phase 2 : Photorealistic Prototype

+

DIGITAL VISUALIZATION & REFINEMENT

+
+
+ + +
+ +
+ Ideation +
+ +
+ H-FI Visualization +
+ + Evolution Design + +
+ +
+
+
+ +
+
+ + +
+

What We Do

+

+ We Built Around Your Design Process +

+
+ + +
+ + +
+
+ 01 +
Client Asset Integration
+

+ Integrate your existing textures, fabrics, and 3D models. Apply materials to multiple products and test endless combinations instantly. +

+
+
+ + +
+
+ 02 +
Reference-Based Creation
+

+ Don’t have digital assets? Start from a single image, sketch, or existing product. We build high-quality visual outputs from it. +

+
+
+ + +
+
+ +
+
+ + +
+
+ 03 +
Material & Texture Swapping
+

+ Seamlessly import existing product images, references, and design assets to start your digital transformation instantly. +

+
+
+ + +
+
+ 04 +
Seamless Pattern Creation
+

+ Create and apply custom patterns, prints, and textures across your entire product line with precision. +

+
+
+ + +
+
+ +
+
+ + +
+
+ 05 +
Cross-Product Scaling
+

+ Apply successful design elements across multiple product categories, ensuring cohesive collections. +

+
+
+ + +
+
+ 06 +
Contextual Staging
+

+ Visualize products in realistic interior settings to understand how designs perform in real-world environments. +

+
+
+ +
+
+
+ + + + +
+
+ +
+

Visual Prototyping in Action

+

+ Comprehensive digital prototyping services tailored to your
product development needs +

+
+
+ +
+
+
+
+ + BEFORE +
+
+ + AFTER +
+
+
+
+
+

Material Transformation

+
+
+ +
+
+
+
+ + BEFORE +
+
+ + AFTER +
+
+
+
+
+

Design Iteration

+
+
+
+
+
+ +
+
+ +
+ + +

+ Multiple Material Options +

+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + + +
+ + + +
+
+ +
+
+
+

Expected Business Impact

+

+ How digital prototyping improves your costs,
speed, and decision-making +

+
+
+
+

50–70%

+

Reduction in prototyping cost

+
+
+

3x

+

Faster product approval cycles

+
+
+

10x

+

Increased design experimentation

+
+
+

100%

+

Better product-market fit

+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+

Why Businesses Trust Our Approach

+

+ Because better decisions lead to better products and better profits +

+
    +
  • We built Clarity-Driven Decisions
    • +
  • Focus on Business-Driven Design
    • +
  • High-Fidelity 3D Visualization
    • +
  • Custom Product Workflows
    • +
+
+
+
+
+
+ +
+
+
+
+

Let's Test This With Your Product

+

+ We’ll take one of your products and show you how digital prototyping can help you design faster, avoid costly mistakes, and move forward with confidence. +

+
+ Schedule a Demo +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/responsive.css b/responsive.css new file mode 100644 index 0000000..57a7e2f --- /dev/null +++ b/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; + } + + } \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e69c717 --- /dev/null +++ b/style.css @@ -0,0 +1,854 @@ +@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; +} + +::-webkit-scrollbar { + width: 1px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.3); +} + +* { + 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: 20px auto 70px; + border-radius: 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: center; + 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: 5%; + top: 34%; + 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: 40px 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: 50px 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: 50px 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: 50px 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; + z-index: 9999; +} + +.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: 50px 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 rgb(239, 239, 239); + box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; + border-radius: 15px; + padding: 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: rgb(245, 241, 237); + padding: 50px 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: rgb(255, 255, 255); + border: 1px solid rgb(239, 239, 239); + border-radius: 15px; +} + +.impact-card h3 { + font-family: "Instrument Serif", serif; + font-size: 52px; +} + +.impact-card p { + font-size: 15px; + color: rgb(58, 58, 58); +} + +.why-section { + padding: 60px 0px 0px; +} + +.why-images { +} + +.img-small { + width: 95%; + border-radius: 10px; +} + +.img-large { + width: 55%; + border-radius: 10px; +} + +.why-content h2 { + font-size: 37px; + margin: 0px 0px 10px; +} + +.why-subtext { + color: rgb(58, 58, 58); + 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: 0px 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 rgb(239, 239, 239); + box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; + border-radius: 15px; + padding: 20px; +} + +.compare-section { + padding: 50px 0px; +} + +.top-content { + display: flex; + justify-content: space-between; + margin-bottom: 40px; +} + +.left-text h1 { + font-size: 36px; + font-weight: 500; + color: rgb(34, 34, 34); +} + +.right-text { + width: 35%; + font-size: 15px; + color: rgb(102, 102, 102); + line-height: 1.6; +} + +.wrapper { + position: relative; + width: 100%; + height: 506px; + overflow: hidden; + border-radius: 6px; +} + +.wrapper img { + height: 100%; + object-fit: cover; +} + +.before, .after { + position: absolute; + top: 0px; + left: 0px; + height: 100%; +} + +.after { + width: 50%; + overflow: hidden; +} + +.wrapper .label { + position: absolute; + top: 20px; + color: rgb(255, 255, 255); + font-size: 14px; + letter-spacing: 2px; +} + +.before .label { + right: 20px; +} + +.after .label { + right: 20px; +} + +.scroller { + position: absolute; + top: 0px; + 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: rgb(201, 107, 44); + font-size: 18px; +} + +.visualprototyping { + padding: 50px 0px 0px; +} + +.compare-card .wrapper { + height: 340px; +} + +.compare-card { + border: 1px solid rgb(239, 239, 239); + box-shadow: rgba(233, 233, 233, 0.43) 15px 20px 45px; + border-radius: 15px; + padding: 20px; +} + +.compare-card p { + text-align: center; + margin: 20px 0px 0px; + font-size: 20px; + font-weight: 500; + color: black; +} + +.material-item { + transition: 0.3s; +} + +.material-item:hover { + transform: translateY(-5px) !important; +} + +.impact-card { + transition: 0.3s; +} + +.impact-card:hover { + transform: translateY(-5px) !important; +} + +.vertical-text img { + width: 49px; +} + +.video-player { + width: 100%; +} + +.video-player { + display: none; +} + +.hide { + display: none !important; +} + +.material-video { + width: 100%; +} + +.video-player { + width: 100%; + height: auto; + display: block; + object-fit: cover; + border-radius: 19px; +}