commit 3eeb6c7344514d5062c81bbaf6555c9581c224ec Author: Goutam Date: Mon Apr 20 16:56:53 2026 +0530 first 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..f933a17 Binary files /dev/null and b/images/Advanced Digital.png differ diff --git a/images/Choose.png b/images/Choose.png new file mode 100644 index 0000000..0c62ee1 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..a6f822f 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..da7da63 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..7b96460 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..ea8a410 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..fd1d168 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..371c676 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..08ad4a4 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..4d0064c 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..6565c62 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..3b1e104 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..dbbfbed Binary files /dev/null and b/images/Slow.png 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..ef239d4 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..98ef08a 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..87756bc 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..b568ab9 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..36d0a47 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..24a3aec --- /dev/null +++ b/index.html @@ -0,0 +1,537 @@ + + + + + Art Avenue + + + + + + + + + +
+ + + +
+ + + +
+ Art Avenue +
+ +
+
+

PROPOSAL — DIGITAL PROTOTYPING

+

+ Digital Product Prototyping That
+ Eliminates Guesswork +

+

+ High-Fidelity Visualization for Faster Decisions, Lower Costs &
+ Scalable Product Design +

+

+ From Idea — Iteration — Approval +

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

+ Introducing Advanced Digital Product + Manipulation & Prototyping +

+
+
+ +
+
+ +
+
+

2K+

+ YEARS OF
EXPERIENCE +
+
+
+

+ At AchievAR.ai, we help Art Avenue transform ideas into high-fidelity visual realities instantly. +

+

+ From a single concept, we generate multiple product variations with different materials, textures, and environments without manufacturing a single piece. +

+

+ One product concept → Endless variations +

+
+
+
+
+
+
+
+
+
+

Design Without Limits.
Visualize Before You Manufacture.

+
+
+

+ A premium digital prototyping solution crafted for Art Avenue, + enabling exploration, testing, and scaling of product designs + without physical sampling. +

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

The Challenge You Face

+

+ Your current product development process involves significant time, cost, and effort, + especially during the early stages of prototyping and design validation. +

+
+ +
+
+ +
+
+
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

+

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

+
+ +
+ +
+
+ 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

+

+ What this means for your bottom line and product
development efficiency +

+
+
+
+

50–70%

+

Reduction in prototyping cost

+
+
+

3x

+

Faster product approval cycles

+
+
+

10x

+

Increased design experimentation

+
+
+

100%

+

Better product-market fit

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

Why Choose Us

+

+ What this means for your bottom line and product development efficiency +

+
    +
  • We build decision-making tools, not just pretty visuals
    • +
  • Focus on business efficiency, not just aesthetics
    • +
  • Deep expertise in high-fidelity product visualization
    • +
  • Custom workflows tailored to your product type
    • +
+
+
+
+
+
+ +
+
+
+
+

Let's Test This With Your Product

+

+ We'd love to demonstrate what's possible with a quick pilot using your own product. +

+
+ Schedule a Demo + Start Your Free Pilot +
+
+
+
+
+ + + \ 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..9a62f35 --- /dev/null +++ b/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; + } \ No newline at end of file