Build an Online Gift store in Angular

Last Updated : 18 Jul, 2024

Creating an online gift store using Angular is a great way to showcase your web development skills. Angular provides a robust framework for building dynamic, responsive, and feature-rich web applications. This article will guide you through the process of setting up a basic online gift store using Angular.

We will create an online gift store where users can browse products, add them to their cart, and proceed to checkout. The cart's contents will be saved in the local storage to persist across page refreshes

Project Preview

jpeg-optimizer_Screenshot-2024-07-17-185538 — Final output preview

Prerequisites

Node.js (v16 or higher)
Angular CLI (v17.3.8)
TypeScript (v5.4.2)

Functionalities

We will build an online gift store with the following functionalities:

Product Listing: Display a list of products fetched from a service.
Add to Cart: Add products to the cart and persist the cart in local storage.
Search and Sort: Allow users to search and sort the product list.
Cart Management: View, remove items from the cart, and clear the cart.
Checkout: Proceed to checkout and clear the cart.

Steps to Create Online Gift Store

Step 1: Set Up AngularJS Environment

1. Install Angular CLI

npm install -g @angular/cli

2. Create a new directory for your project and navigate into it.

ng new online-gift-store-gfg --standalone
cd online-gift-store-gfg

3. Install Required Dependencies

npm install @angular/forms json-server tailwindcss postcss

4. Configure TailwindCSS and PostCSS:

Create a tailwind.config.js file in the root directory by using the following command and add the following code in the file.

npx tailwindcss init


module.exports = {
    content: ['./src/**/*.{html,ts}'],
    theme: {
        extend: {},
  },
    plugins: [],
};

5. Create a postcss.config.js(src/postcss.config.js) file in the root directory:

module.exports = {
   plugins: {
        tailwindcss: {},
        autoprefixer: {},
  },
};

6. Add TailwindCSS to your styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 2. Generate Components and Services

ng generate component navbar --standalone
ng generate component product-list --standalone
ng generate component product-detail --standalone
ng generate component cart --standalone
ng generate component checkout --standalone
ng generate service services/product
ng generate service services/cart

Dependencies

 "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.10",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
},
"devDependencies": {
    "@angular-devkit/build-angular": "^17.3.8",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "autoprefixer": "^10.4.19",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4",
    "typescript": "~5.4.2"
}

Folder Structure

jpeg-optimizer_collage-(1) — Project structure

Example: Create the required files as seen in the folder structure and add the following codes.

HTML

<!-- src/index.html -->
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>OnlineGiftStoreGfg</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;
                400;500&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

</head>

<body>
    <app-root></app-root>
</body>

</html>

HTML

<!-- src/app/cart/cart.component.html -->
 
<div class="p-24">
    <table *ngIf="cartItems.length > 0; else emptyCart" border="1">
        <tr>
            <th>Image</th>
            <th>Product</th>
            <th>Price</th>
            <th>Increase</th>
            <th>Quantity</th>
            <th>Descrease</th>
            <th>Remove</th>
            <th>Total</th>
        </tr>
        <tr *ngFor="let item of cartItems">
            <td>
                <img [src]="item.product.imageUrl" alt="Product Image" class="w-full h-auto" />
            </td>
            <td>
                {{ item.product.description }}
            </td>
            <td>
                {{ item.product.price | currency }}
            </td>
            <td>
                <button class="bg-green-500 rounded-full h-8 w-8 text-white" 
                        type="button" name="button"
                    (click)="increaseQuantity(item.product.id)">
                    +
                </button>
            </td>
            <td>
                <span class="text-center">{{ item.quantity }}</span>
            </td>
            <td>
                <button class="bg-green-500 rounded-full h-8 w-8 text-white"
                        type="button" name="button"
                    (click)="decreaseQuantity(item.product.id)">
                    -
                </button>
            </td>
            <td>
                <button class="bg-red-500 rounded-md h-8 w-8 text-white" 
                        (click)="removeFromCart(item.product.id)">
                    X
                </button>
            </td>
            <td>
                {{ item.quantity * item.product.price | currency }}
            </td>
        </tr>
    </table>
</div>

<div class="flex justify-between p-5 fixed w-full bg-black bottom-0 z-10 text-white">
    <div class="total-price">
        <h3>Total Cost: {{ totalCost() | currency }}</h3>
    </div>
    <button [disabled]="!hasItems()" (click)="checkout()"
        class="p-2 bg-green-700 text-white font-mono shadow-md rounded-md">
        Checkout
    </button>
</div>
<ng-template #emptyCart>
    <div class="flex justify-center">
        <p style="padding: 20px">
            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0
                                   4680 3120" viewBox="0 0 4680 3120"
                width="550" height="550">
                <path fill="#ffecd4"
                    d="M1445.963 743.523C575.23 640.132 245.717 2061.686 1318.036
                       1637.974s511.791 100.207 1648.275 216.633c1136.484 116.426 1585.918-1570.916 245.447-1564.06-1340.471 6.856-1317.921 506.157-1765.795 452.976zM1412.561 2154.531c-811.96 23.923-1182.667 57.133-818.728 344.268s998.175 9.266 1477.441 252.401c479.266 243.135 2721.534-127.737 1639.898-462.027-1156.102-357.304-2041.473-142.219-2298.611-134.642z"
                    class="colorffecd4 svgShape"></path>
                <path fill="#f85d42"
                    d="M3634.621 2439.283H2584.679a33.174 33.174 0 0 1-18.454-5.583c-7.743-5.163-13.24-13.509-14.543-23.327l-93.991-708.76c-1.215-9.164 1.404-17.856 6.541-24.577 6.045-7.908 15.578-13.085 26.456-13.085h1226.461c9.954 0 18.796 4.34 24.861 11.152 6.065 6.812 9.353 16.096 8.202 25.984l-82.529 708.759c-.977 8.39-5.019 15.749-10.929 21.011s-13.686 8.426-22.133 8.426z"
                    class="colorf85d42 svgShape"></path>
                <path fill="#e0492f"
                    d="M3755.129 1704.216H2449.382a45.906 45.906 0 0 1-20.23-4.666c-15.311-7.492-25.855-23.224-25.855-41.419v-50.525c0-14.589 6.78-27.596 17.36-36.04a45.894 45.894 0 0 1 28.726-10.046h1305.748c12.726 0 24.248 5.158 32.587 13.498 8.34 8.34 13.498 19.861 13.498 32.587v50.525c0 16.921-9.119 31.712-22.711 39.726a45.869 45.869 0 0 1-23.376 6.36z"
                    class="colore0492f svgShape"></path>
                <path fill="#f85d42"
                    d="m3084.929 1235.131-260.611 445.133c-1.448 2.474-3.924 4.167-7.112 5.097-7.993 2.329-20.463-.145-32.452-7.164l-33.291-19.491c-9.613-5.628-16.83-12.957-20.282-19.821-2.571-5.111-3.054-9.965-.886-13.668l260.611-445.133c2.54-4.338 8.238-6.276 15.398-5.902 7.16.374 15.781 3.06 24.166 7.97l33.291 19.491c11.149 6.528 19.075 15.342 21.643 23.068 1.295 3.893 1.228 7.512-.475 10.42z"
                    class="colorf85d42 svgShape"></path>
                <circle cx="2802.501" cy="1610.194" r="33.958" fill="#ffffff"
                    transform="rotate(-45.001 2802.495 1610.234)" class="colorfff svgShape"></circle>
                <path fill="#f85d42"
                    d="m3119.582 1235.131 260.612 445.133c1.448 2.474 3.924 4.167 7.112 5.097 7.993 2.329 20.463-.145 32.452-7.164l33.291-19.491c9.613-5.628 16.83-12.957 20.282-19.821 2.571-5.111 3.054-9.965.886-13.668l-260.611-445.133c-2.54-4.338-8.239-6.276-15.398-5.902-7.16.374-15.781 3.06-24.166 7.97l-33.291 19.491c-11.149 6.528-19.075 15.342-21.644 23.068-1.295 3.893-1.228 7.512.475 10.42z"
                    class="colorf85d42 svgShape"></path>
                <circle cx="3402.011" cy="1610.194" r="33.958" fill="#ffffff"
                    transform="rotate(-45.001 3402.008 1610.24)" class="colorfff svgShape"></circle>
                <path fill="#e0492f"
                    d="M2727.406 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.99 4.908-21.382 4.908h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.087 1.299 3.283 2.815 3.283 4.435zM2727.406 1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.99 4.907-21.382 4.907h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.087 1.301 3.283 2.817 3.283 4.437zM2940.248 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.989 4.908-21.382 4.908h-26.082c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.085 1.299 3.282 2.815 3.282 4.435zM2940.248 1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.989 4.907-21.382 4.907h-26.082c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.085 1.301 3.282 2.817 3.282 4.437zM3153.09 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.99 4.908-21.382 4.908h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.086 1.299 3.283 2.815 3.283 4.435zM3153.09 1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.99 4.907-21.382 4.907h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.086 1.301 3.283 2.817 3.283 4.437zM3365.931 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.989 4.908-21.382 4.908h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.082c8.735 0 16.371 1.731 20.508 4.311 2.087 1.299 3.284 2.815 3.284 4.435zM3365.931 1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.989 4.907-21.382 4.907h-26.083c-7.532 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.082c8.735 0 16.371 1.731 20.508 4.311 2.087 1.301 3.284 2.817 3.284 4.437zM3578.772 2105.624v247.841c0 1.377-.866 2.68-2.409 3.84-3.868 2.906-11.99 4.908-21.382 4.908h-26.083c-7.531 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.39-5.186-5.452v-247.841c0-2.416 2.663-4.602 6.968-6.185s10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.087 1.299 3.283 2.815 3.283 4.435zM3578.772 1785.884v247.841c0 1.378-.866 2.681-2.409 3.84-3.868 2.906-11.99 4.907-21.382 4.907h-26.083c-7.531 0-14.246-1.287-18.605-3.295-3.246-1.495-5.186-3.391-5.186-5.453v-247.841c0-2.416 2.663-4.602 6.968-6.185 4.305-1.583 10.253-2.562 16.823-2.562h26.083c8.735 0 16.371 1.731 20.508 4.311 2.087 1.301 3.283 2.817 3.283 4.437z"
                    class="colore0492f svgShape"></path>
                <circle cx="3750.439" cy="1610.194" r="219.108" fill="#ffa608"
                    transform="rotate(-45.001 3750.439 1610.245)" class="colorffa608 svgShape"></circle>
                <path fill="#ffffff"
                    d="M3749.353 1665.866c-26.661 0-45.992-11.518-57.994-34.555-8.862-17.075-13.29-39.103-13.29-66.086 0-23.035 5.84-43.253 17.519-60.652 14.015-20.86 33.184-31.292 57.509-31.292 23.033 0 40.914 9.303 53.644 27.91 10.71 15.705 16.068 34.674 16.068 56.905 0 35.923-6.123 62.865-18.365 80.827-12.245 17.962-30.607 26.943-55.091 26.943zm3.624-161.171c-13.049 0-23.521 6.484-31.414 19.452-6.927 11.278-10.391 24.366-10.391 39.266 0 19.653 1.854 34.794 5.56 45.426 5.96 17.156 16.833 25.735 32.621 25.735 13.208 0 23.115-6.02 29.719-18.062 6.604-12.041 9.91-30.103 9.91-54.187 0-19.25-3.003-33.667-9.002-43.253-6.003-9.585-15.005-14.377-27.003-14.377zM3654.49 1718.768c0 1.618.048 4.216.149 7.794.098 3.577.149 6.175.149 7.794 0 1.647-.554 3.002-1.662 4.067-1.107 1.065-2.512 1.597-4.216 1.597-1.703 0-3.109-.532-4.216-1.597-1.107-1.065-1.66-2.42-1.66-4.067 0-1.618-.05-4.216-.149-7.794-.1-3.577-.149-6.175-.149-7.794 0-2.527.142-5.692.426-9.497.283-3.804.425-6.97.425-9.497 0-1.646.554-3.003 1.662-4.067 1.107-1.065 2.512-1.597 4.216-1.597 1.703 0 3.109.532 4.216 1.597 1.107 1.064 1.661 2.421 1.661 4.067 0 2.527-.142 5.693-.427 9.497-.283 3.805-.425 6.97-.425 9.497zm-3.621-31.217c-1.817 0-3.393-.61-4.727-1.831-1.335-1.22-2.001-2.711-2.001-4.471 0-1.761.667-3.251 2.001-4.472 1.333-1.22 2.91-1.831 4.727-1.831 1.817 0 3.386.61 4.707 1.831 1.321 1.221 1.98 2.712 1.98 4.472 0 1.76-.66 3.251-1.98 4.471-1.321 1.221-2.89 1.831-4.707 1.831zM3695.672 1704.459a40.34 40.34 0 0 1-2.108-.064 40.403 40.403 0 0 0-2.108-.064c-1.165 0-2.513.114-4.046.34.51 11.471.766 18.966.766 22.486 0 .37.014 1.058.042 2.066a97.37 97.37 0 0 1 .043 2.449c0 6.531-2.06 9.795-6.175 9.795-1.562 0-2.911-.483-4.046-1.448-1.25-1.022-1.874-2.3-1.874-3.833 0-1.022.042-2.555.127-4.599.085-2.044.128-3.578.128-4.6 0-3.435-.255-10.789-.766-22.06-1.761-.085-4.422-.32-7.985-.703-3.564-.383-5.345-2.221-5.345-5.515 0-1.59.539-2.939 1.618-4.046 1.079-1.107 2.471-1.661 4.174-1.661 1.051 0 3.464.17 7.24.511-.028-.908-.099-2.413-.212-4.514-.115-1.817-.171-3.222-.171-4.216 0-1.59.582-2.91 1.746-3.961 1.164-1.05 2.569-1.576 4.216-1.576 4.201 0 6.303 3.535 6.303 10.605l-.085 3.492c1.76-.255 3.194-.383 4.302-.383 3.264 0 5.493.213 6.686.639 2.271.795 3.407 2.527 3.407 5.196 0 1.618-.554 2.967-1.66 4.046-1.108 1.078-2.514 1.618-4.217 1.618zM3728.166 1740.701c-6.786 0-12.336-1.618-16.652-4.855-4.77-3.577-7.155-8.617-7.155-15.119 0-7.182 1.888-13.259 5.665-18.228 4.201-5.508 9.866-8.262 16.992-8.262 4.94 0 9.042.795 12.308 2.385 4.287 2.101 6.431 5.366 6.431 9.795 0 3.123-1.746 5.892-5.239 8.305-1.591 1.107-4.785 2.725-9.583 4.855l-14.352 6.346c1.363 1.476 3.009 2.584 4.94 3.322 1.931.739 4.145 1.107 6.644 1.107 3.804 0 7.027-.781 9.668-2.342 2.355-1.391 4.243-2.087 5.664-2.087 2.952 0 4.429 1.434 4.429 4.302 0 3.236-2.371 5.877-7.112 7.921-3.975 1.703-8.191 2.555-12.648 2.555zm-1.15-36.157c-2.64 0-4.897.88-6.771 2.641-1.875 1.761-3.379 4.401-4.515 7.922a2481.41 2481.41 0 0 1 9.583-4.131c3.833-1.732 6.885-3.336 9.156-4.813-1.902-1.079-4.387-1.619-7.453-1.619zM3766.495 1701.052c4.287-4.968 8.347-7.453 12.18-7.453 4.373 0 7.581 1.66 9.625 4.983 1.731-1.533 3.648-2.683 5.749-3.449 2.101-.767 4.373-1.15 6.815-1.15 5.564 0 9.34 2.768 11.328 8.305.397 1.136 1.007 4.983 1.831 11.541.795 4.599 1.817 12.266 3.066 22.998.114 1.618-.441 2.953-1.661 4.003-1.221 1.05-2.655 1.576-4.302 1.576-3.265 0-5.181-1.618-5.75-4.855-.51-2.924-1.036-7.055-1.575-12.393-.568-5.848-1.036-9.993-1.406-12.436-.766-5.081-1.746-7.623-2.938-7.623-.654 0-2.144.654-4.472 1.959-2.327 1.306-4.031 2.428-5.11 3.365 0 3.237.384 7.893 1.15 13.969.795 6.218 1.193 10.874 1.193 13.969 0 1.618-.553 2.966-1.661 4.046-1.107 1.078-2.513 1.619-4.216 1.619-1.704 0-3.109-.54-4.216-1.619-1.107-1.079-1.661-2.427-1.661-4.046 0-3.237-.348-7.999-1.043-14.289-.696-6.288-1.043-11.051-1.043-14.288 0-1.817-.156-3.265-.469-4.344-3.294 1.902-6.602 5.068-9.923 9.497-.143.199-.384.497-.725.894-.114 5.736-.169 10.236-.169 13.5 0 .795-.03 1.867-.085 3.215a76.217 76.217 0 0 0-.085 3.002c0 1.533-.625 2.741-1.875 3.62-1.136.823-2.54 1.235-4.215 1.235-2.414 0-4.046-1.051-4.898-3.152-.596-1.419-.894-3.677-.894-6.771v-15.843c0-1.419-.057-3.499-.171-6.239-.114-2.74-.169-4.819-.169-6.239 0-2.527.454-4.813 1.362-6.857 1.107-2.555 2.668-3.833 4.685-3.833 1.589 0 3.008.618 4.259 1.852 1.248 1.235 1.874 2.591 1.874 4.067-.001-.595-.129.626-.385 3.664zM3853.204 1707.567c-2.812 0-4.5-1.177-5.068-3.535a20.304 20.304 0 0 0-3.493-.298c-6.843 0-10.264.937-10.264 2.81 0 1.107 2.058 2.598 6.175 4.472 5.622 2.584 9.427 4.599 11.414 6.047 4.117 2.981 6.175 6.346 6.175 10.093 0 4.884-2.271 8.589-6.813 11.116-3.663 2.016-8.164 3.024-13.5 3.024-3.777 0-7.227-.582-10.349-1.746-4.259-1.589-6.388-3.932-6.388-7.027 0-2.839 1.689-4.259 5.068-4.259 1.305 0 3.194.412 5.664 1.235 2.471.824 4.373 1.235 5.708 1.235 5.763 0 8.659-1.164 8.687-3.493 0-1.448-2.002-3.052-6.005-4.812-5.848-2.584-9.597-4.443-11.243-5.579-4.003-2.811-6.005-6.232-6.005-10.264 0-5.707 3.024-9.554 9.071-11.541 3.549-1.164 8.944-1.746 16.184-1.746 2.838 0 4.94.37 6.302 1.107 1.875.994 2.812 2.825 2.812 5.494-.001 5.112-1.379 7.667-4.132 7.667z"
                    class="colorfff svgShape"></path>
                <path fill="#ffa608"
                    d="M3848.416 1347.74c-8.708 0-15.766-7.059-15.766-15.766v-204.959c0-8.707 7.059-15.766 15.766-15.766s15.766 7.059 15.766 15.766v204.959c0 8.707-7.059 15.766-15.766 15.766zM3989.722 1489.047c0-8.707 7.059-15.766 15.766-15.766h204.959c8.708 0 15.766 7.059 15.766 15.766s-7.059 15.766-15.766 15.766h-204.959c-8.707 0-15.766-7.059-15.766-15.766zM3948.334 1389.128c-6.157-6.157-6.157-16.14 0-22.297l144.928-144.928c6.157-6.157 16.139-6.157 22.297 0 6.157 6.157 6.157 16.14 0 22.297l-144.928 144.928c-6.157 6.157-16.14 6.157-22.297 0z"
                    class="colorffa608 svgShape"></path>
                <path fill="#efc68f"
                    d="M3434.131 2414.729c-4.37 22.012 9.849 57.964 11.766 57 1.917-.964 5.273-12.259 4.829-6.546s2.529 16.742 3.756 14.066c1.228-2.676.94-8.365 3-6.998s4.269 8.49 20.683 22.366 24.913 14.063 24.84 12.212c-.073-1.851 4.652-3.712 13.371 2.025 8.718 5.738 8.373 4.71 7.878-1.732-.495-6.442-2.854-18.979-8.423-26.301-5.569-7.321 10.267 1.399 25.643 3.317 15.375 1.918 25.523-.673 26.059-1.911.536-1.238-5.154-5.643-.632-6.373 4.522-.73 12.808 3.466 13.109.227.301-3.239-.484-9.406-3.163-11.662-2.678-2.256 15.683 1.763 25.85-3.349 10.167-5.113 3.74-5.355 3.738-6.64s16.181-5.349 12.988-7.946c-3.193-2.597-14.198-4.354-14.303-5.245-.105-.891 8.765-3.721 3.96-6.623-4.805-2.902-22.703-6.597-24.487-7.415-1.784-.818 9.948-10.75 8.164-11.568-1.784-.818-7.359 4.129-7.573.292s6.124-5.904 1.888-6.65c-4.236-.747-15.138-2.469-31.325.138s-23.011 8.484-24.76 7.819c-1.749-.664 23.5-19.28 24.722-24.27 1.222-4.989-5.91.528-3.656-2.665 2.255-3.193 9.229-10.56 8.145-12.716s-17.852-6.076-25.811-2.203c-7.959 3.874 4.614-5.408 1.937-7.15-2.677-1.742-29.661.205-38.288 4.2-8.627 3.995 2.942-2.337-1.517-4.041s-11.155 7.497-13.627 5.652c-2.472-1.845 9.919-6.703 2.687-8.042-7.233-1.338-46.511 27.335-51.448 48.732z"
                    class="colorefc68f svgShape"></path>
                <path fill="#d8a96f"
                    d="M3557.806 2477.983s-20.991-7.457-45.124-31.082l-.088-.02c26.026 5.432 55.913 7.741 89.463 4.132 0 0-32.044 1.392-69.182-3.991 30.529-14.03 52.68-14.009 52.68-14.009s-19.206-1.107-58.481 13.119c-16.899-2.744-34.545-6.942-50.492-13.338a295 295 0 0 1-20.391-9.068c37.641-26.794 71.042-33.668 71.042-33.668s-27.444 3.01-76.186 31.074c-33.947-17.614-47.279-34.09-52.819-36.858-5.764-2.763-19.425-2.069 12.748 19.322 12.333 8.2 29.521 18.562 51.302 27.657 22.217 46.23 39.871 61.936 39.871 61.936s-19.923-19.87-35.046-59.974a277.618 277.618 0 0 0 39.896 12.433l-.397-.087c32.546 26.966 51.204 32.422 51.204 32.422z"
                    class="colord8a96f svgShape"></path>
                <path fill="#efc68f"
                    d="M2487.026 2412.473c-4.371 22.012 9.849 57.964 11.766 57 1.917-.964 5.273-12.259 4.829-6.546-.444 5.713 2.529 16.741 3.756 14.066 1.228-2.676.94-8.365 3-6.998 2.059 1.366 4.269 8.49 20.683 22.366 16.413 13.876 24.913 14.063 24.84 12.212-.073-1.85 4.652-3.712 13.37 2.026s8.373 4.71 7.878-1.732-2.854-18.98-8.423-26.301c-5.569-7.321 10.268 1.399 25.643 3.317s25.523-.673 26.059-1.91-5.154-5.643-.631-6.373c4.522-.73 12.808 3.466 13.109.227.301-3.24-.484-9.406-3.163-11.662-2.678-2.256 15.683 1.763 25.85-3.349s3.74-5.355 3.738-6.64c-.003-1.285 16.181-5.349 12.988-7.946-3.193-2.597-14.198-4.354-14.303-5.245-.105-.891 8.765-3.721 3.96-6.623-4.805-2.902-22.703-6.597-24.487-7.415-1.784-.818 9.948-10.75 8.164-11.568s-7.359 4.129-7.573.292c-.215-3.838 6.123-5.904 1.888-6.651s-15.138-2.469-31.325.138c-16.187 2.607-23.011 8.483-24.76 7.819-1.749-.664 23.5-19.28 24.722-24.269 1.222-4.989-5.911.528-3.656-2.665s9.229-10.56 8.145-12.716c-1.084-2.157-17.852-6.076-25.811-2.203s4.614-5.408 1.937-7.15-29.661.205-38.288 4.2c-8.627 3.995 2.942-2.337-1.517-4.041s-11.155 7.497-13.627 5.652c-2.472-1.845 9.919-6.703 2.687-8.042-7.233-1.339-46.51 27.333-51.448 48.73z"
                    class="colorefc68f svgShape"></path>
                <path fill="#d8a96f"
                    d="M2610.702 2475.728s-20.991-7.457-45.124-31.083l-.088-.019c26.026 5.432 55.913 7.741 89.463 4.132 0 0-32.044 1.391-69.182-3.991 30.529-14.03 52.68-14.009 52.68-14.009s-19.206-1.107-58.482 13.119c-16.899-2.744-34.545-6.942-50.492-13.338a294.75 294.75 0 0 1-20.39-9.068c37.641-26.794 71.042-33.668 71.042-33.668s-27.444 3.01-76.186 31.074c-33.946-17.614-47.279-34.09-52.819-36.858-5.764-2.763-19.425-2.069 12.748 19.322 12.333 8.2 29.521 18.562 51.302 27.657 22.217 46.231 39.871 61.937 39.871 61.937s-19.923-19.87-35.046-59.974a277.658 277.658 0 0 0 39.896 12.433l-.397-.087c32.546 26.965 51.204 32.421 51.204 32.421z"
                    class="colord8a96f svgShape"></path>
                <path fill="#efc68f"
                    d="M1078.926 2504.611c-4.37 22.012 9.849 57.964 11.766 57 1.917-.964 5.273-12.258 4.829-6.545-.444 5.713 2.529 16.741 3.756 14.065 1.228-2.676.94-8.364 3-6.998 2.059 1.366 4.269 8.49 20.683 22.366s24.913 14.063 24.84 12.212c-.073-1.851 4.652-3.712 13.37 2.026 8.718 5.738 8.373 4.71 7.878-1.732-.495-6.442-2.854-18.98-8.422-26.301-5.569-7.321 10.267 1.399 25.642 3.317s25.523-.673 26.059-1.91c.536-1.238-5.154-5.643-.632-6.373s12.808 3.466 13.109.227c.301-3.239-.484-9.406-3.163-11.662-2.678-2.256 15.683 1.763 25.85-3.349 10.167-5.113 3.74-5.355 3.738-6.64s16.181-5.349 12.988-7.947-14.198-4.354-14.303-5.245c-.105-.891 8.765-3.721 3.96-6.624-4.805-2.902-22.703-6.596-24.487-7.415-1.784-.819 9.948-10.75 8.164-11.568-1.784-.819-7.359 4.129-7.573.292-.214-3.838 6.123-5.904 1.888-6.651-4.235-.747-15.138-2.469-31.325.138-16.187 2.608-23.011 8.484-24.76 7.819s23.5-19.28 24.722-24.269c1.222-4.989-5.911.528-3.656-2.665s9.229-10.56 8.145-12.716c-1.084-2.156-17.852-6.076-25.811-2.203-7.959 3.874 4.614-5.408 1.937-7.15s-29.661.205-38.289 4.2 2.942-2.337-1.517-4.041c-4.459-1.703-11.155 7.497-13.627 5.652-2.472-1.845 9.919-6.703 2.687-8.042-7.231-1.337-46.508 27.335-51.446 48.732z"
                    class="colorefc68f svgShape"></path>
                <path fill="#d8a96f"
                    d="M1202.602 2567.866s-20.991-7.457-45.124-31.082l-.088-.02c26.026 5.432 55.913 7.741 89.463 4.132 0 0-32.044 1.392-69.182-3.99 30.529-14.03 52.68-14.009 52.68-14.009s-19.206-1.106-58.481 13.119c-16.899-2.744-34.545-6.942-50.492-13.338a294.75 294.75 0 0 1-20.39-9.068c37.641-26.794 71.042-33.668 71.042-33.668s-27.444 3.01-76.186 31.074c-33.946-17.614-47.279-34.09-52.819-36.858-5.764-2.763-19.425-2.069 12.748 19.323 12.333 8.2 29.521 18.562 51.302 27.657 22.217 46.231 39.871 61.936 39.871 61.936s-19.923-19.869-35.046-59.974a277.492 277.492 0 0 0 39.896 12.433l-.397-.088c32.545 26.964 51.203 32.421 51.203 32.421z"
                    class="colord8a96f svgShape"></path>
                <path fill="#efc68f"
                    d="M2804.84 2607.138c4.37 22.012-9.849 57.964-11.766 57-1.917-.964-5.273-12.258-4.829-6.545s-2.529 16.741-3.756 14.065c-1.228-2.676-.94-8.364-3-6.998-2.06 1.366-4.269 8.49-20.683 22.366s-24.913 14.063-24.84 12.212c.073-1.851-4.653-3.712-13.371 2.026s-8.373 4.71-7.878-1.732c.495-6.442 2.854-18.98 8.423-26.301 5.569-7.321-10.267 1.399-25.643 3.317-15.375 1.918-25.523-.673-26.059-1.91-.536-1.238 5.154-5.643.632-6.373-4.522-.73-12.808 3.466-13.109.227-.301-3.24.484-9.406 3.163-11.662 2.678-2.256-15.683 1.763-25.85-3.35-10.167-5.113-3.74-5.355-3.738-6.64s-16.181-5.349-12.988-7.947c3.193-2.597 14.198-4.354 14.303-5.245.105-.891-8.765-3.721-3.96-6.624 4.805-2.902 22.703-6.596 24.487-7.415 1.784-.818-9.948-10.75-8.164-11.568 1.784-.818 7.359 4.13 7.573.292.214-3.838-6.124-5.904-1.888-6.651 4.236-.747 15.138-2.469 31.325.138 16.187 2.607 23.011 8.483 24.76 7.819 1.75-.664-23.5-19.28-24.722-24.269-1.222-4.989 5.911.528 3.656-2.665-2.254-3.192-9.229-10.56-8.145-12.716 1.085-2.156 17.852-6.076 25.811-2.203 7.959 3.874-4.614-5.408-1.937-7.15 2.677-1.742 29.661.205 38.288 4.2 8.627 3.995-2.942-2.337 1.517-4.041s11.155 7.497 13.627 5.652c2.472-1.845-9.919-6.704-2.687-8.042 7.233-1.336 46.511 27.336 51.448 48.733z"
                    class="colorefc68f svgShape"></path>
                <path fill="#d8a96f"
                    d="M2681.164 2670.393s20.991-7.457 45.124-31.083l.088-.019c-26.026 5.432-55.913 7.741-89.463 4.132 0 0 32.044 1.391 69.182-3.991-30.529-14.03-52.68-14.009-52.68-14.009s19.206-1.106 58.481 13.119c16.899-2.744 34.545-6.942 50.492-13.338a295 295 0 0 0 20.391-9.068c-37.641-26.794-71.042-33.668-71.042-33.668s27.444 3.01 76.186 31.074c33.947-17.615 47.279-34.09 52.819-36.858 5.764-2.763 19.425-2.069-12.748 19.323-12.333 8.2-29.521 18.562-51.302 27.657-22.217 46.231-39.871 61.936-39.871 61.936s19.923-19.869 35.046-59.974a277.492 277.492 0 0 1-39.896 12.433l.397-.087c-32.545 26.964-51.204 32.421-51.204 32.421z"
                    class="colord8a96f svgShape"></path>
                <path fill="#efc68f"
                    d="M3359.557 752.07c-1.752 3.804-3.759 8.679-5.875 13.887-2.108 5.206-4.29 10.676-6.223 15.73-1.933 5.051-3.589 9.634-4.634 12.986-1.052 3.356-1.486 5.494-1.112 5.598.752.189 2.99-1.28 4.56-2.335 1.582-1.094 2.586-1.753 1.158.231-2.837 3.972-6.985 13.333-4.84 12.147 2.155-1.192 4.734-5.545 5.268-3.451.286 1.038-.11 3.164-.1 7.361.011 2.097.129 4.716.571 7.99a73.556 73.556 0 0 0 2.651 11.876c1.44 4.667 3.135 8.454 4.852 11.396 1.718 2.965 3.454 5.164 5.004 6.675 1.552 1.526 2.916 2.432 3.931 2.854 1.017.403 1.685.339 1.891-.043.418-.766 1.966-1.045 4.162-.153 2.205.83 5.065 2.909 8.337 6.714 3.289 3.823 5.11 5.46 6.279 5.409 1.179-.04 1.762-1.721 2.796-4.583 1.038-2.849 2.077-7.202 2.375-11.787.311-4.585-.109-9.401-1.607-13.294-.743-1.948-.547-2.681.361-2.597.912.091 2.548.98 4.788 2.192 1.12.61 2.393 1.324 3.8 2.053a92.602 92.602 0 0 0 4.599 2.182c1.655.741 3.416 1.393 5.264 1.99 1.848.6 3.778 1.119 5.735 1.464 3.941.747 7.637.994 11.004 1.014 3.322-.051 6.337-.294 8.797-.75 4.982-.842 7.927-2.184 8.256-2.786.618-1.242-5.189-4.719-.417-5.96 2.355-.663 5.743-.31 8.574-.343 2.84-.003 5.176-.267 5.255-1.864.207-3.186-1.108-8.765-4.003-10.277-.717-.384-.089-.675 1.416-1.022 1.492-.368 3.854-.826 6.644-1.541 2.748-.766 5.954-1.758 8.982-3.24 3.061-1.431 5.948-3.343 8.178-5.591 4.401-4.58 4.863-6.324 4.311-6.929-.564-.617-2.2-.211-2.379-.795-.182-.582 3.291-3.626 6.158-6.885 2.88-3.243 5.176-6.584 3.253-6.791-1.934-.229-5.503.76-8.625 1.545-3.15.774-5.824 1.419-6.019 1.056-.195-.363 1.426-2.142 2.414-3.885.977-1.764 1.277-3.465-1.324-3.55-1.292-.042-3.309.215-5.621.546l-3.61.561-3.755.535c-2.458.356-4.813.616-6.653.767-1.836.156-3.14.231-3.581.165-.851-.103.377-3.041 1.464-5.935.524-1.474 1.025-2.935 1.281-4.031.257-1.097.245-1.856-.176-1.875-1.67-.087-4.261 5.452-5.801 2.366-1.523-3.056 2.468-6.305-1.044-5.795-3.504.491-12.235 1.893-23.203 4.842-5.507 1.443-9.124 3.002-11.666 4.219-1.248.631-2.226 1.14-2.965 1.467-.737.33-1.236.472-1.559.292-.323-.18.399-1.174 1.616-2.603 1.202-1.456 2.866-3.393 4.421-5.505 1.564-2.104 3.013-4.38 3.986-6.369.965-2.004 1.47-3.704 1.257-4.679-.461-1.977-1.358-1.794-2.113-1.514-.757.29-1.344.745-1.146-.501.214-1.224.716-3.326.945-5.235.194-1.959.117-3.724-.668-4.49-.385-.379-1.424-.817-2.77-1.242-1.352-.43-2.982-.827-4.671-1.208a39.93 39.93 0 0 0-2.472-.462 21.219 21.219 0 0 0-2.318-.286c-1.415-.062-2.657-.005-3.379.551-1.527 1.013-1.32.098-1.027-1.227.265-1.38.569-3.136-.458-3.923-.509-.397-1.726-.806-3.219-1.202-1.527-.438-3.333-.883-5.108-1.362-3.572-.916-6.838-2.01-8.104-1.635-.635.221-.915.235-1.003.129-.088-.106.018-.328.131-.664.227-.7.457-1.779-.571-3.07-.51-.655-.896-.787-1.236-.71-.34.075-.622.414-.891.782-.549.66-1.049 1.467-1.589.3-1.005-2.255 2.093-2.215-.49-5.536-1.311-1.685-3.007-.15-5.882 3.427-1.43 1.795-3.17 4.09-5.082 6.792-1.896 2.713-3.981 5.826-5.736 9.42z"
                    class="colorefc68f svgShape"></path>
                <path fill="#d8a96f"
                    d="M3431.54 838.945s-1.345-.353-3.662-1.257a61.322 61.322 0 0 1-9.434-4.792 70.586 70.586 0 0 1-6.024-4.208 73.095 73.095 0 0 1-6.406-5.657 76.127 76.127 0 0 1-6.407-7.216 85.545 85.545 0 0 1-6.081-8.838l-.065-.036c9.641 5.2 21.68 8.528 35.376 8.512 13.642-.058 28.985-3.51 44.257-12.135l-1.351.637c-.888.404-2.178 1.008-3.861 1.693-3.373 1.355-8.228 3.155-14.211 4.578-5.962 1.445-13.006 2.556-20.55 2.699-7.54.153-15.556-.648-23.308-2.7 6.523-2.428 12.362-4.714 17.575-6.773l13.586-5.452c1.889-.794 3.638-1.449 5.14-2.06 1.502-.609 2.809-1.11 3.882-1.506 2.117-.829 3.306-1.216 3.306-1.216s-1.053.275-3.072.994c-2.052.675-5.057 1.798-9.042 3.268-8.003 2.882-19.707 7.457-36.148 11.312-6.849-2.289-13.307-5.605-18.89-9.792-5.596-4.184-10.331-9.2-14.007-14.776-3.447-5.264-5.893-10.422-7.666-15.457l7.5-1.961c2.34-.572 4.52-1.137 6.578-1.606a259.741 259.741 0 0 1 10.834-2.315c3.117-.62 5.77-1.026 7.631-1.329l2.186-.297c.508-.061.785-.078.785-.078s-.237-.019-.688-.022c-.457-.013-1.104.032-1.976.047-1.73.053-4.206.273-7.319.585-3.123.319-6.8.759-11.214 1.251-1.096.156-2.256.235-3.447.403-1.205.096-2.444.274-3.749.378-2.601.257-5.416.515-8.483.708a76.329 76.329 0 0 1-2.182-10.287 82.191 82.191 0 0 1-.538-4.774 90.335 90.335 0 0 1-.112-12.788c.157-2.571.385-4.909.67-7.103a133.178 133.178 0 0 1 1.845-10.694c.599-2.778 1.089-4.732 1.351-5.821.488-2.206 1.239-4.539.564-2.642-.33.94-1.052 2.885-2.148 6.439-1.066 3.566-2.578 8.759-3.594 16.35a93.446 93.446 0 0 0-.746 9.471c-.075 3.346.014 7.012.416 10.748.785 7.547 2.74 15.751 6.652 23.925-.318 11.587-.303 21.539.127 29.926.418 8.382 1.235 15.21 2.204 20.584.964 5.371 2.067 9.3 2.926 11.859.86 2.554 1.462 3.769 1.462 3.769s-.623-1.483-1.448-4.318c-.826-2.837-1.836-7.06-2.625-12.478-.797-5.421-1.359-12.051-1.496-19.735-.15-7.684.135-16.423.684-26.065 2.404 4.369 5.396 8.589 9.086 12.649a66.254 66.254 0 0 0 13.205 11.035l-.281-.177c10.026 15.728 21.306 24.406 29.354 29.03 4.051 2.327 7.348 3.676 9.604 4.487 2.243.78 3.445 1.024 3.445 1.024z"
                    class="colord8a96f svgShape"></path>
                <path fill="#efc68f"
                    d="M2355.428 1177.425c-2.965 2.959-6.845 6.526-11.002 10.312-4.157 3.777-8.536 7.715-12.611 11.276-4.072 3.559-7.801 6.697-10.585 8.836-2.786 2.146-4.642 3.293-4.868 2.978-.437-.641.168-3.248.616-5.086.48-1.863.751-3.033-.617-1.007-2.747 4.035-10.098 11.162-9.726 8.739.374-2.434 3.568-6.359 1.418-6.136-1.073.091-2.932 1.196-6.873 2.637a61.073 61.073 0 0 1-7.695 2.225 73.452 73.452 0 0 1-12.06 1.616c-4.877.261-9.017-.02-12.37-.615-3.376-.588-6.04-1.457-7.993-2.39-1.969-.929-3.29-1.896-4.037-2.703-.73-.815-.9-1.464-.613-1.79.575-.657.301-2.206-1.295-3.958-1.541-1.782-4.48-3.748-9.181-5.503-4.724-1.765-6.889-2.908-7.245-4.023-.37-1.12 1.006-2.249 3.335-4.207 2.315-1.958 6.041-4.438 10.24-6.302 4.196-1.876 8.86-3.146 13.031-3.086 2.085.024 2.705-.413 2.313-1.236-.401-.825-1.8-2.053-3.712-3.735-.96-.84-2.069-1.788-3.239-2.856a91.49 91.49 0 0 1-3.636-3.562c-1.267-1.297-2.487-2.725-3.686-4.252-1.201-1.527-2.356-3.158-3.356-4.876-2.063-3.44-3.572-6.823-4.754-9.976-1.1-3.134-1.914-6.048-2.336-8.515-.932-4.966-.69-8.194-.238-8.711.951-1.009 6.221 3.239 5.737-1.669-.191-2.44-1.693-5.497-2.642-8.165-.979-2.666-1.538-4.949-.067-5.575 2.918-1.295 8.608-1.989 11.027.205.608.54.664-.149.47-1.682-.17-1.527-.557-3.902-.85-6.767-.231-2.843-.407-6.195-.063-9.548.285-3.367 1.082-6.736 2.421-9.607 2.777-5.712 4.254-6.748 5.012-6.44.774.316.958 1.991 1.568 1.958.609-.03 2.265-4.341 4.333-8.157 2.048-3.823 4.389-7.132 5.248-5.399.883 1.735 1.189 5.427 1.53 8.628.362 3.224.681 5.956 1.089 6.013.408.058 1.518-2.078 2.812-3.608 1.318-1.526 2.811-2.396 3.789.016.486 1.198.941 3.18 1.43 5.463l.721 3.581.795 3.708c.515 2.43 1.085 4.73 1.579 6.508.489 1.777.868 3.026 1.083 3.418.391.763 2.723-1.404 5.063-3.425 1.202-1.001 2.401-1.976 3.341-2.595.94-.62 1.657-.871 1.82-.483.659 1.537-3.644 5.883-.216 6.262 3.394.373 5.064-4.495 5.798-1.023.75 3.457 2.452 12.136 3.474 23.447.549 5.667.336 9.599.072 12.406-.161 1.389-.3 2.483-.352 3.289-.054.806-.016 1.323.265 1.564.281.241.963-.78 1.884-2.416.951-1.631 2.193-3.862 3.638-6.051 1.434-2.195 3.069-4.341 4.599-5.942 1.548-1.598 2.968-2.659 3.956-2.796 2.014-.251 2.153.654 2.151 1.459-.011.81-.234 1.518.866.903 1.074-.624 2.874-1.821 4.586-2.695 1.771-.859 3.454-1.397 4.444-.925.489.23 1.259 1.054 2.122 2.17.871 1.12 1.806 2.512 2.748 3.966.461.723.899 1.452 1.288 2.16.416.719.782 1.419 1.07 2.076.547 1.306.923 2.492.651 3.361-.423 1.783.364 1.273 1.506.54 1.204-.726 2.746-1.618 3.84-.926.549.34 1.353 1.341 2.241 2.606.938 1.282 1.98 2.823 3.043 4.323 2.094 3.036 4.25 5.722 4.335 7.04.012.673.096.94.226.986.129.046.302-.13.578-.352.579-.455 1.511-1.044 3.078-.525.791.252 1.048.569 1.093.914.047.345-.173.727-.426 1.106-.429.743-1.014 1.491.268 1.595 2.464.164 1.355-2.729 5.365-1.453 2.034.648 1.179 2.77-1.184 6.704a150.478 150.478 0 0 1-4.618 7.116c-1.893 2.718-4.093 5.75-6.86 8.639z"
                    class="colorefc68f svgShape"></path>
                <path fill="#d8a96f"
                    d="M2249.031 1139.896s.796 1.141 2.445 3.002a61.344 61.344 0 0 0 7.756 7.197 70.66 70.66 0 0 0 6.031 4.199 72.832 72.832 0 0 0 7.523 4.056c2.729 1.284 5.748 2.474 8.985 3.519a85.635 85.635 0 0 0 10.395 2.652l.057.049c-8.211-7.25-15.494-17.398-20.212-30.255-4.66-12.822-6.722-28.413-3.906-45.724l-.131 1.488c-.072.973-.193 2.392-.255 4.208-.106 3.633-.117 8.812.615 14.918.705 6.094 2.096 13.088 4.568 20.217 2.462 7.128 5.983 14.374 10.587 20.939.024-6.96.152-13.229.283-18.832l.421-14.634c.093-2.047.103-3.915.157-5.535.053-1.62.071-3.019.072-4.163.046-2.273-.001-3.522-.001-3.522s.106 1.083.129 3.226c.076 2.159.06 5.367.057 9.614.061 8.506-.188 21.07 1.876 37.83 4.514 5.636 9.858 10.55 15.716 14.343 5.859 3.805 12.203 6.515 18.706 8.038 6.131 1.416 11.816 1.929 17.153 1.853l-.751-7.716c-.271-2.393-.496-4.635-.766-6.728a258.757 258.757 0 0 0-1.571-10.967c-.496-3.139-1.031-5.769-1.39-7.62l-.477-2.154c-.118-.498-.198-.763-.198-.763s.099.216.258.638c.17.424.352 1.047.639 1.87.549 1.642 1.198 4.041 1.98 7.07.78 3.041 1.638 6.643 2.701 10.956.233 1.082.559 2.198.813 3.374.326 1.164.587 2.388.94 3.649.658 2.53 1.388 5.26 2.267 8.205a76.405 76.405 0 0 0 10.407-1.507 81.71 81.71 0 0 0 4.666-1.145 90.264 90.264 0 0 0 12.039-4.313 104.85 104.85 0 0 0 6.434-3.083 132.831 132.831 0 0 0 9.398-5.427c2.4-1.522 4.064-2.657 4.996-3.279 1.901-1.221 3.832-2.731 2.284-1.443-.767.635-2.344 1.984-5.3 4.241-2.978 2.232-7.329 5.446-14.101 9.023a93.404 93.404 0 0 1-8.63 3.973c-3.114 1.226-6.585 2.41-10.23 3.323-7.354 1.872-15.728 2.872-24.749 2.025-10.763 4.303-20.107 7.727-28.127 10.222-8.01 2.504-14.7 4.097-20.078 5.045-5.374.951-9.442 1.274-12.14 1.352-2.693.076-4.042-.069-4.042-.069s1.607.072 4.552-.133c2.948-.205 7.259-.716 12.616-1.848 5.363-1.125 11.779-2.888 19.037-5.415 7.262-2.514 15.365-5.801 24.223-9.649-4.931-.746-9.924-2.096-15.009-4.155a66.217 66.217 0 0 1-14.918-8.579l.263.202c-18.223-3.974-30.265-11.56-37.385-17.514-3.584-2.997-5.988-5.625-7.53-7.462-1.503-1.838-2.148-2.882-2.148-2.882z"
                    class="colord8a96f svgShape"></path>
                <path fill="#efc68f"
                    d="M2419.975 1143.294a1.214 1.214 0 0 1-.741-2.174 239.72 239.72 0 0 0 6.6-5.27 1.214 1.214 0 0 1 1.547 1.869 246.141 246.141 0 0 1-6.666 5.324 1.214 1.214 0 0 1-.74.251zM2439.264 1126.802a1.213 1.213 0 0 1-.832-2.095 287.723 287.723 0 0 0 11.893-11.902 1.213 1.213 0 0 1 1.764 1.664 291.372 291.372 0 0 1-11.994 12.003c-.233.22-.532.33-.831.33zm23.201-24.554a1.214 1.214 0 0 1-.924-1.997 346.027 346.027 0 0 0 10.565-13.114 1.213 1.213 0 0 1 1.924 1.476 348.13 348.13 0 0 1-10.64 13.206 1.208 1.208 0 0 1-.925.429zm20.58-26.802a1.212 1.212 0 0 1-.993-1.907 404.802 404.802 0 0 0 9.349-14.019 1.213 1.213 0 0 1 2.046 1.304 407.75 407.75 0 0 1-9.406 14.103 1.21 1.21 0 0 1-.996.519zm18.183-28.489a1.214 1.214 0 0 1-1.046-1.824 460.132 460.132 0 0 0 8.23-14.713 1.212 1.212 0 1 1 2.137 1.146 465.013 465.013 0 0 1-8.273 14.791c-.225.385-.631.6-1.048.6zm15.96-29.773a1.213 1.213 0 0 1-1.087-1.747 505.677 505.677 0 0 0 7.174-15.245 1.212 1.212 0 1 1 2.212.996 503.384 503.384 0 0 1-7.209 15.318 1.215 1.215 0 0 1-1.09.678zm13.876-30.799a1.214 1.214 0 0 1-1.121-1.675 532.7 532.7 0 0 0 6.17-15.694 1.214 1.214 0 0 1 2.272.852 541.617 541.617 0 0 1-6.199 15.767c-.193.467-.644.75-1.122.75zm11.873-31.655a1.213 1.213 0 0 1-1.148-1.603 540.415 540.415 0 0 0 5.176-16.065 1.213 1.213 0 0 1 2.32.708 546.299 546.299 0 0 1-5.2 16.138 1.214 1.214 0 0 1-1.148.822zm-57.45-11.06h-.442a1.213 1.213 0 1 1 0-2.426h.442c5.479 0 10.995-.149 16.393-.442a1.22 1.22 0 0 1 1.277 1.145 1.213 1.213 0 0 1-1.145 1.277 305.65 305.65 0 0 1-16.525.446zm-17.334-.478-.067-.002a329.97 329.97 0 0 1-16.907-1.369 1.213 1.213 0 0 1 .258-2.412 327.439 327.439 0 0 0 16.782 1.358 1.214 1.214 0 0 1-.066 2.425zm50.639-1.375a1.213 1.213 0 0 1-.136-2.418 272.23 272.23 0 0 0 16.658-2.414 1.214 1.214 0 0 1 .423 2.389 275.437 275.437 0 0 1-16.807 2.436 1.594 1.594 0 0 1-.138.007zm-84.231-2.209c-.063 0-.127-.005-.191-.015a339.309 339.309 0 0 1-16.669-3.068 1.212 1.212 0 0 1-.937-1.436 1.207 1.207 0 0 1 1.436-.937 338.006 338.006 0 0 0 16.55 3.045 1.213 1.213 0 0 1-.189 2.411zm117.505-3.711a1.212 1.212 0 0 1-.289-2.39 238.56 238.56 0 0 0 16.177-4.595 1.212 1.212 0 1 1 .746 2.308 241.517 241.517 0 0 1-16.342 4.641 1.173 1.173 0 0 1-.292.036zm-150.566-3.231a1.22 1.22 0 0 1-.309-.04 335.13 335.13 0 0 1-16.294-4.73 1.213 1.213 0 0 1 .736-2.312 331.362 331.362 0 0 0 16.175 4.695 1.214 1.214 0 0 1-.308 2.387zm182.701-7.178a1.214 1.214 0 0 1-.459-2.336 209.22 209.22 0 0 0 15.279-6.968 1.212 1.212 0 1 1 1.096 2.164 212.02 212.02 0 0 1-15.457 7.05c-.151.061-.306.09-.459.09zm-214.905-3.082a1.19 1.19 0 0 1-.428-.079 306.697 306.697 0 0 1-15.707-6.429 1.212 1.212 0 1 1 .982-2.218 304.5 304.5 0 0 0 15.581 6.378 1.213 1.213 0 0 1-.428 2.348zm183.513-.041a1.212 1.212 0 0 1-1.171-1.531 528.794 528.794 0 0 0 4.152-16.346 1.214 1.214 0 0 1 2.361.559 535.876 535.876 0 0 1-4.171 16.422c-.148.54-.637.896-1.171.896zm61.49-12.136a1.212 1.212 0 0 1-.638-2.245 190.44 190.44 0 0 0 13.859-9.43 1.212 1.212 0 1 1 1.452 1.942 192.089 192.089 0 0 1-14.036 9.551 1.199 1.199 0 0 1-.637.182zm-275.897-1.519c-.187 0-.377-.043-.555-.135a261.606 261.606 0 0 1-14.834-8.265 1.213 1.213 0 0 1 1.251-2.079 258.95 258.95 0 0 0 14.696 8.188 1.213 1.213 0 0 1-.558 2.291zm-28.925-17.451c-.242 0-.486-.072-.698-.222a203.197 203.197 0 0 1-13.474-10.364 1.212 1.212 0 1 1 1.559-1.857 201.423 201.423 0 0 0 13.313 10.24 1.213 1.213 0 0 1-.7 2.203zm331.811-1.234a1.214 1.214 0 0 1-.812-2.114 181.81 181.81 0 0 0 11.917-11.789 1.213 1.213 0 1 1 1.784 1.644 184.194 184.194 0 0 1-12.077 11.947 1.214 1.214 0 0 1-.812.312zm-80.685-.554a1.214 1.214 0 0 1-1.19-1.454 499.515 499.515 0 0 0 3.073-16.582 1.213 1.213 0 1 1 2.392.402 503.866 503.866 0 0 1-3.088 16.662 1.212 1.212 0 0 1-1.187.972zm-276.917-19.986c-.315 0-.63-.122-.868-.365-4.079-4.177-7.84-8.498-11.18-12.844a1.213 1.213 0 0 1 1.924-1.478c3.281 4.27 6.979 8.519 10.991 12.628a1.213 1.213 0 0 1-.867 2.059zm380.445-4.254a1.214 1.214 0 0 1-.963-1.949c3.361-4.4 6.578-9.033 9.563-13.769a1.214 1.214 0 0 1 2.053 1.293 190.263 190.263 0 0 1-9.687 13.948c-.239.313-.6.477-.966.477zm-97.945-9.099a1.212 1.212 0 0 1-1.204-1.371 448.244 448.244 0 0 0 1.882-16.752 1.205 1.205 0 0 1 1.32-1.095 1.213 1.213 0 0 1 1.095 1.32 453.102 453.102 0 0 1-1.891 16.843 1.215 1.215 0 0 1-1.202 1.055zm-302.912-13.445c-.425 0-.836-.223-1.059-.619-2.863-5.102-5.241-10.328-7.07-15.534a1.212 1.212 0 1 1 2.288-.804c1.782 5.075 4.103 10.172 6.896 15.152a1.213 1.213 0 0 1-1.055 1.805zm418.851-5.966a1.213 1.213 0 0 1-1.077-1.769 208.097 208.097 0 0 0 7.073-15.211 1.212 1.212 0 1 1 2.239.933 210.095 210.095 0 0 1-7.156 15.39 1.213 1.213 0 0 1-1.079.657zm-112.826-14.246-.065-.002a1.214 1.214 0 0 1-1.148-1.274 381.81 381.81 0 0 0 .508-16.841 1.213 1.213 0 0 1 1.213-1.203h.01c.67.005 1.208.552 1.203 1.222a383.626 383.626 0 0 1-.511 16.948 1.213 1.213 0 0 1-1.21 1.15zm-316.993-11.494a1.213 1.213 0 0 1-1.2-1.048 79.588 79.588 0 0 1-.736-10.769c0-2.099.086-4.228.255-6.33a1.204 1.204 0 0 1 1.306-1.111 1.213 1.213 0 0 1 1.112 1.306 77.243 77.243 0 0 0-.246 6.135c0 3.468.24 6.98.714 10.44a1.213 1.213 0 0 1-1.205 1.377zm442.831-5.372a1.216 1.216 0 0 1-1.152-1.595 242.385 242.385 0 0 0 4.711-16.118 1.213 1.213 0 0 1 2.35.6 245.462 245.462 0 0 1-4.759 16.28 1.209 1.209 0 0 1-1.15.833zm-125.612-16.925c-.646 0-1.184-.51-1.211-1.163a304.86 304.86 0 0 0-1.159-16.79 1.212 1.212 0 0 1 1.089-1.325 1.201 1.201 0 0 1 1.325 1.089c.536 5.489.929 11.183 1.169 16.925a1.212 1.212 0 0 1-1.16 1.263l-.053.001zm-314.577-11.108a1.213 1.213 0 0 1-1.163-1.558c1.571-5.299 3.709-10.635 6.358-15.86a1.214 1.214 0 0 1 2.163 1.096c-2.583 5.094-4.667 10.293-6.196 15.452-.155.528-.639.87-1.162.87zm448.572-4.645a1.212 1.212 0 0 1-1.192-1.438 291.772 291.772 0 0 0 2.628-16.603 1.204 1.204 0 0 1 1.359-1.047 1.213 1.213 0 0 1 1.047 1.358 294.082 294.082 0 0 1-2.651 16.741c-.11.583-.619.989-1.191.989zm-137.324-17.864a1.212 1.212 0 0 1-1.195-1.018 227.112 227.112 0 0 0-3.294-16.479 1.214 1.214 0 0 1 .896-1.463 1.218 1.218 0 0 1 1.463.896c1.28 5.336 2.4 10.94 3.329 16.656a1.211 1.211 0 0 1-1.199 1.408zm-296.209-7.57a1.213 1.213 0 0 1-.988-1.915c3.155-4.443 6.753-8.9 10.692-13.25a1.213 1.213 0 0 1 1.798 1.628c-3.876 4.279-7.412 8.662-10.512 13.026a1.213 1.213 0 0 1-.99.511zm437.888-8.032a1.212 1.212 0 0 1-1.21-1.305c.416-5.481.708-11.135.866-16.805.018-.669.57-1.228 1.246-1.179a1.21 1.21 0 0 1 1.178 1.246 353.883 353.883 0 0 1-.872 16.921 1.214 1.214 0 0 1-1.208 1.122zm-415.347-17.051a1.21 1.21 0 0 1-.818-2.108 222.334 222.334 0 0 1 12.984-10.947 1.212 1.212 0 1 1 1.493 1.911 220.366 220.366 0 0 0-12.842 10.827 1.206 1.206 0 0 1-.817.317zm265.716-.156c-.507 0-.979-.32-1.15-.827-1.828-5.447-3.896-10.692-6.145-15.591a1.212 1.212 0 1 1 2.204-1.012c2.285 4.977 4.385 10.303 6.24 15.831a1.213 1.213 0 0 1-1.149 1.599zm150.596-16.548a1.213 1.213 0 0 1-1.212-1.194 425.481 425.481 0 0 0-.603-16.834 1.213 1.213 0 0 1 1.144-1.278 1.227 1.227 0 0 1 1.278 1.144c.316 5.694.519 11.391.606 16.93.01.67-.524 1.221-1.194 1.232h-.019zm-389.759-4.15a1.212 1.212 0 0 1-.686-2.213 320.214 320.214 0 0 1 11.906-7.764l2.332-1.442a1.214 1.214 0 0 1 1.271 2.067l-2.323 1.435a317.372 317.372 0 0 0-11.814 7.704c-.212.144-.45.213-.686.213zm224.984-9.883a1.21 1.21 0 0 1-1.029-.569c-3.031-4.839-6.361-9.358-9.895-13.43a1.213 1.213 0 0 1 1.832-1.59c3.616 4.167 7.02 8.787 10.119 13.732a1.214 1.214 0 0 1-1.027 1.857zm-196.257-7.896a1.213 1.213 0 0 1-.601-2.267 435.329 435.329 0 0 1 14.884-8.096 1.213 1.213 0 1 1 1.116 2.153 432.193 432.193 0 0 0-14.8 8.051c-.19.108-.396.159-.599.159zm359.184-11.803c-.62 0-1.149-.473-1.206-1.102a511.061 511.061 0 0 0-1.822-16.757 1.212 1.212 0 0 1 2.406-.302 510.75 510.75 0 0 1 1.83 16.837 1.212 1.212 0 0 1-1.208 1.324zm-329.173-3.71a1.214 1.214 0 0 1-.51-2.314 317.768 317.768 0 0 1 15.577-6.708 1.213 1.213 0 1 1 .898 2.254 314.248 314.248 0 0 0-15.457 6.656 1.205 1.205 0 0 1-.508.112zm144.107-1.886c-.266 0-.535-.087-.759-.267a86.02 86.02 0 0 0-13.898-9.105 1.212 1.212 0 1 1 1.125-2.149 88.524 88.524 0 0 1 14.291 9.362 1.213 1.213 0 0 1-.759 2.159zm-112.709-10.554a1.214 1.214 0 0 1-.375-2.366 219.22 219.22 0 0 1 16.339-4.646 1.212 1.212 0 1 1 .568 2.358 216.233 216.233 0 0 0-16.156 4.594c-.125.041-.251.06-.376.06zm83.009-5.028c-.116 0-.233-.017-.35-.052-5.179-1.558-10.664-2.696-16.302-3.381a1.213 1.213 0 1 1 .292-2.408c5.775.702 11.396 1.869 16.708 3.467a1.213 1.213 0 0 1-.348 2.374zm-50.18-2.792a1.213 1.213 0 0 1-.168-2.414c5.799-.823 11.507-1.305 16.968-1.431.675-.047 1.225.514 1.24 1.184a1.212 1.212 0 0 1-1.184 1.24c-5.365.124-10.978.598-16.683 1.409a1.28 1.28 0 0 1-.173.012zM2702.716 637.863a1.212 1.212 0 0 1-1.196-1.024 609.927 609.927 0 0 0-1.376-8.36 1.213 1.213 0 1 1 2.39-.411c.485 2.821.946 5.618 1.382 8.394a1.212 1.212 0 0 1-1.2 1.401zM3561.706 697.734l-2.063-.006a1.213 1.213 0 0 1-1.206-1.22c.004-.67.571-1.112 1.22-1.206l2.048.006c4.969 0 9.97-.112 14.865-.333a1.235 1.235 0 0 1 1.266 1.157 1.213 1.213 0 0 1-1.157 1.266c-4.931.223-9.969.336-14.973.336zm-19.026-.526-.068-.002a364.457 364.457 0 0 1-16.984-1.335 1.212 1.212 0 0 1-1.083-1.329 1.202 1.202 0 0 1 1.329-1.083c5.621.574 11.297 1.02 16.871 1.326a1.213 1.213 0 0 1-.065 2.423zm50.878-1.029a1.213 1.213 0 0 1-.118-2.419 290.653 290.653 0 0 0 16.769-2.161 1.216 1.216 0 0 1 1.388 1.007 1.215 1.215 0 0 1-1.007 1.389 295.33 295.33 0 0 1-16.91 2.179 1.681 1.681 0 0 1-.122.005zm-226.812-1.072a1.215 1.215 0 0 1-1.184-1.483 228.965 228.965 0 0 1 4.424-16.461 1.213 1.213 0 0 1 2.318.715 226.062 226.062 0 0 0-4.377 16.285 1.212 1.212 0 0 1-1.181.944zm142.16-1.34c-.059 0-.119-.004-.179-.013a387.815 387.815 0 0 1-16.788-2.874 1.212 1.212 0 1 1 .462-2.38 382.676 382.676 0 0 0 16.682 2.856 1.212 1.212 0 0 1-.177 2.411zm118.167-2.947a1.213 1.213 0 0 1-.265-2.396 240.55 240.55 0 0 0 16.341-4.273 1.217 1.217 0 0 1 1.511.813 1.213 1.213 0 0 1-.813 1.51 242.776 242.776 0 0 1-16.507 4.316c-.089.02-.178.03-.267.03zm-151.495-3.516c-.094 0-.189-.011-.284-.033a398.285 398.285 0 0 1-16.473-4.326 1.213 1.213 0 1 1 .666-2.332 393.777 393.777 0 0 0 16.371 4.299 1.213 1.213 0 0 1-.28 2.392zm183.978-6.286a1.212 1.212 0 0 1-.44-2.343 184.867 184.867 0 0 0 15.424-6.81 1.213 1.213 0 0 1 1.083 2.171 187.177 187.177 0 0 1-15.627 6.901 1.262 1.262 0 0 1-.44.081zm-216.624-3.037c-.127 0-.255-.02-.383-.063a404.749 404.749 0 0 1-16.043-5.709 1.215 1.215 0 0 1-.704-1.565c.239-.626.94-.939 1.565-.703a403.102 403.102 0 0 0 15.947 5.675 1.214 1.214 0 0 1-.382 2.365zm-31.737-12.051c-.159 0-.322-.031-.477-.098a408.265 408.265 0 0 1-15.508-7.033 1.213 1.213 0 0 1 1.048-2.188 405.844 405.844 0 0 0 15.416 6.991c.615.263.901.977.636 1.592-.196.46-.644.736-1.115.736zm278.653-.13a1.213 1.213 0 0 1-.656-2.233c4.851-3.115 9.408-6.461 13.545-9.947a1.212 1.212 0 1 1 1.563 1.855c-4.217 3.553-8.859 6.963-13.799 10.133-.202.13-.429.192-.653.192zm-313.129-3.077a1.213 1.213 0 0 1-1.131-1.651 257.655 257.655 0 0 1 4.159-10.084 412.888 412.888 0 0 1-14.607-8.157 1.213 1.213 0 1 1 1.225-2.092 412.352 412.352 0 0 0 14.365 8.026 254.996 254.996 0 0 1 1.536-3.364 1.212 1.212 0 1 1 2.199 1.023 258.211 258.211 0 0 0-6.617 15.525 1.21 1.21 0 0 1-1.129.774zm338.9-18.837a1.214 1.214 0 0 1-.917-2.007c3.746-4.323 7.028-8.89 9.753-13.571a1.212 1.212 0 1 1 2.096 1.22c-2.802 4.813-6.172 9.503-10.016 13.94-.24.276-.577.418-.916.418zm-364.337-9.766c-.224 0-.451-.062-.654-.193a415.81 415.81 0 0 1-14.133-9.493 1.212 1.212 0 0 1 1.394-1.985 413.43 413.43 0 0 0 14.05 9.438 1.212 1.212 0 0 1-.657 2.233zm39.717-2.142a1.212 1.212 0 0 1-1.064-1.791 293.05 293.05 0 0 1 8.566-14.725 1.213 1.213 0 1 1 2.061 1.281 289.386 289.386 0 0 0-8.495 14.602 1.216 1.216 0 0 1-1.068.633zm341.444-17.284a1.213 1.213 0 0 1-1.153-1.588 75.49 75.49 0 0 0 3.367-16.31 1.213 1.213 0 0 1 2.416.227 78.016 78.016 0 0 1-3.476 16.834 1.216 1.216 0 0 1-1.154.837zm-408.944-.074c-.257 0-.516-.081-.736-.249-4.482-3.428-8.96-7-13.31-10.615a1.212 1.212 0 1 1 1.551-1.866 419.124 419.124 0 0 0 13.233 10.554 1.213 1.213 0 0 1-.738 2.176zm85.388-11.462a1.214 1.214 0 0 1-.992-1.91 317.4 317.4 0 0 1 10.162-13.681 1.214 1.214 0 0 1 1.703-.205c.526.414.618 1.176.205 1.703a315.44 315.44 0 0 0-10.084 13.576 1.21 1.21 0 0 1-.994.517zm-111.491-10.235a1.21 1.21 0 0 1-.812-.312 429.512 429.512 0 0 1-12.411-11.651 1.213 1.213 0 0 1 1.695-1.735 426.052 426.052 0 0 0 12.341 11.585 1.212 1.212 0 0 1-.813 2.113zm438.255-11.735a1.212 1.212 0 0 1-1.203-1.075c-.616-5.364-1.767-10.877-3.423-16.387a1.214 1.214 0 0 1 2.323-.697c1.696 5.646 2.877 11.302 3.508 16.808a1.211 1.211 0 0 1-1.205 1.351zm-305.808-4.739a1.212 1.212 0 0 1-.913-2.01 335.399 335.399 0 0 1 11.539-12.556 1.212 1.212 0 1 1 1.744 1.686 333.808 333.808 0 0 0-11.455 12.465 1.216 1.216 0 0 1-.915.415zm-156.727-7.244c-.322 0-.643-.127-.881-.38a440.024 440.024 0 0 1-11.453-12.592 1.213 1.213 0 1 1 1.825-1.597 440.977 440.977 0 0 0 11.39 12.522 1.212 1.212 0 0 1-.881 2.047zm180.348-17.183a1.211 1.211 0 0 1-.828-2.099 337.946 337.946 0 0 1 12.764-11.333 1.21 1.21 0 0 1 1.708.146 1.211 1.211 0 0 1-.145 1.708 334.699 334.699 0 0 0-12.671 11.251 1.209 1.209 0 0 1-.828.327zm272.639-3.266c-.458 0-.896-.261-1.101-.703l-.371-.788a155.52 155.52 0 0 0-7.56-14.057 1.212 1.212 0 1 1 2.072-1.26 158.324 158.324 0 0 1 7.678 14.275l.38.809a1.211 1.211 0 0 1-.591 1.61 1.17 1.17 0 0 1-.507.114zm-475.338-5.097a1.21 1.21 0 0 1-.943-.449l-.449-.556c-3.452-4.28-6.874-8.479-10.264-12.597a1.212 1.212 0 1 1 1.872-1.542c3.395 4.125 6.823 8.33 10.281 12.617l.445.551a1.212 1.212 0 0 1-.942 1.976zm228.678-13.541a1.214 1.214 0 0 1-.735-2.18 321.36 321.36 0 0 1 13.85-9.941 1.211 1.211 0 1 1 1.361 2.007 319.47 319.47 0 0 0-13.744 9.867 1.203 1.203 0 0 1-.732.247zm228.983-10.251c-.358 0-.711-.157-.951-.458a118.768 118.768 0 0 0-11.334-12.378 1.212 1.212 0 1 1 1.665-1.762 120.917 120.917 0 0 1 11.569 12.632 1.214 1.214 0 0 1-.949 1.966zm-479.241-2.412a1.21 1.21 0 0 1-.928-.432 1444.818 1444.818 0 0 0-11-12.908 1.212 1.212 0 0 1 1.837-1.584 1433.45 1433.45 0 0 1 11.017 12.93 1.211 1.211 0 0 1-.926 1.994zm278.369-6.382a1.211 1.211 0 0 1-.625-2.253 291.75 291.75 0 0 1 14.873-8.345 1.213 1.213 0 0 1 1.124 2.15 288.41 288.41 0 0 0-14.749 8.275 1.2 1.2 0 0 1-.623.173zm176.243-14.384c-.237 0-.477-.069-.687-.214a106.227 106.227 0 0 0-14.513-8.389 1.213 1.213 0 0 1 1.045-2.19 108.808 108.808 0 0 1 14.844 8.581 1.212 1.212 0 0 1-.689 2.212zm-146.144-1.318a1.213 1.213 0 0 1-.493-2.321 247.39 247.39 0 0 1 15.819-6.397 1.212 1.212 0 0 1 .83 2.278 246.19 246.19 0 0 0-15.664 6.335c-.16.072-.328.105-.492.105zm-330.641-3.616a1.21 1.21 0 0 1-.909-.409 1253.173 1253.173 0 0 0-11.32-12.623 1.212 1.212 0 1 1 1.794-1.632 1259.37 1259.37 0 0 1 11.343 12.648 1.213 1.213 0 0 1-.908 2.016zm362.54-7.955a1.212 1.212 0 0 1-.326-2.381 199.998 199.998 0 0 1 16.625-3.902 1.213 1.213 0 0 1 .45 2.383 197.628 197.628 0 0 0-16.423 3.854 1.193 1.193 0 0 1-.326.046zm83.746-1.687c-.115 0-.232-.017-.348-.051a118.853 118.853 0 0 0-16.387-3.653 1.212 1.212 0 0 1-1.019-1.38 1.21 1.21 0 0 1 1.38-1.019 121.396 121.396 0 0 1 16.723 3.727 1.213 1.213 0 0 1-.349 2.376zm-50.418-4.541a1.213 1.213 0 0 1-.107-2.421 153.54 153.54 0 0 1 17.092-.588c.67.015 1.2.57 1.185 1.239-.015.67-.582 1.224-1.24 1.185a152.095 152.095 0 0 0-16.821.58 1.345 1.345 0 0 1-.109.005zm-418.706-10.927c-.323 0-.647-.129-.885-.384-3.947-4.216-7.84-8.311-11.681-12.285a1.213 1.213 0 0 1 1.745-1.685 1070.06 1070.06 0 0 1 11.707 12.312 1.213 1.213 0 0 1-.886 2.042zm-23.588-24.403c-.31 0-.621-.118-.857-.355a923.46 923.46 0 0 0-12.09-11.876 1.21 1.21 0 0 1-.031-1.714 1.21 1.21 0 0 1 1.714-.031 915.465 915.465 0 0 1 12.123 11.906 1.212 1.212 0 0 1-.859 2.07zm-24.441-23.543c-.294 0-.59-.107-.823-.323a763.218 763.218 0 0 0-12.561-11.367 1.213 1.213 0 0 1 1.607-1.817 763.252 763.252 0 0 1 12.602 11.404 1.213 1.213 0 0 1-.825 2.103zm-25.429-22.469c-.275 0-.552-.094-.78-.284a603.377 603.377 0 0 0-13.108-10.718 1.213 1.213 0 0 1 1.509-1.899 611.286 611.286 0 0 1 13.16 10.762 1.212 1.212 0 0 1-.781 2.139zm-26.581-21.084c-.251 0-.505-.078-.722-.24a471.69 471.69 0 0 0-13.753-9.857 1.213 1.213 0 0 1 1.377-1.996c4.54 3.128 9.19 6.461 13.824 9.908a1.212 1.212 0 0 1-.726 2.185zm-27.95-19.219c-.22 0-.444-.06-.644-.186a341.135 341.135 0 0 0-14.52-8.649 1.215 1.215 0 0 1-.464-1.652 1.215 1.215 0 0 1 1.652-.464 344.33 344.33 0 0 1 14.623 8.711 1.212 1.212 0 0 1-.647 2.24zm-29.594-16.553a1.22 1.22 0 0 1-.529-.121c-5.243-2.543-10.434-4.836-15.432-6.814a1.213 1.213 0 1 1 .893-2.255c5.053 2 10.301 4.318 15.597 6.886a1.213 1.213 0 0 1-.529 2.304zm-31.553-12.349c-.111 0-.223-.015-.334-.047-5.751-1.648-11.267-2.845-16.395-3.561a1.212 1.212 0 0 1-1.033-1.368 1.208 1.208 0 0 1 1.369-1.033c5.241.731 10.869 1.953 16.728 3.631.644.185 1.016.856.832 1.5-.154.53-.64.878-1.167.878zm-33.874-3.872-.294-1.177-1.155-.371c.233-.724.798-.817 1.653-.958a1.213 1.213 0 1 1 .394 2.394c-.353.058-.552.101-.598.112z"
                    class="colorefc68f svgShape"></path>
                <path fill="#7e892c"
                    d="M2037.778 2447.788c-7.531 99.196 20.609 209.192 89.111 203.891s118.635-72.491 114.616-203.891c-4.019-131.4-203.727 0-203.727 0z"
                    class="color7e892c svgShape"></path>
                <path fill="#dbeafc"
                    d="M2050.193 2463.551c-6.609 77.729 18.085 163.921 78.198 159.767 60.114-4.154 104.107-56.804 100.58-159.767-3.526-102.964-178.778 0-178.778 0z"
                    class="colordbeafc svgShape"></path>
                <path fill="#a9be3a"
                    d="M2045.697 2466.43c-2.321 120.779 98.728 170.599 143.352 110.814s39.983-121.462 39.983-121.462l-183.335 10.648z"
                    class="colora9be3a svgShape"></path>
                <path fill="#ffffff"
                    d="M2130.142 2522.051c-1.894-.232-3.924-.761-6.088-1.586-2.266-.865-9.161-3.496-10.374-9.667-1.25-6.362 4.04-11.315 9.156-16.105 2.155-2.017 4.383-4.104 5.74-5.959 3.179-4.349 5.111-11.987 2.92-16.424-1.457-2.951-4.929-4.507-10.32-4.629-4.593-.102-10.136-.806-12.281-5.366-2.361-5.02 1.293-9.642 5.163-14.536 3.063-3.874 7.258-9.18 5.919-11.989-2.224-4.668-9.635-10.208-14.062-13.517-4.574-3.42-8.187-6.12-5.819-10.599 2.502-4.735 6.624-3.323 17.638.458a5.378 5.378 0 0 1 2.782 7.993c3.72 3.263 7.259 7.024 9.172 11.038 4.219 8.855-2.376 17.198-7.191 23.289-.571.723-1.269 1.605-1.9 2.448.254.012.528.021.821.028 12.105.271 17.406 5.926 19.725 10.621 4.3 8.708 1.302 20.443-3.881 27.533-1.952 2.671-4.555 5.108-7.072 7.464-1.877 1.759-4.886 4.575-5.735 6.119.466.366 1.46.997 3.436 1.751 3.28 1.251 5.122 1.157 5.703.696 1.067-.846 1.489-4.257 1.153-6.741-.397-2.933 1.65-5.649 4.581-6.061 2.928-.409 5.643 1.611 6.068 4.54.168 1.155 1.45 11.43-5.073 16.655-2.739 2.19-6.149 3.04-10.181 2.546z"
                    class="colorfff svgShape"></path>
                <path fill="#3a95aa"
                    d="M1853.418 2276.156s279.83-69.542 310.405-91.056c30.575-21.514 4.985-80.718-112.854-59.523s-197.551 150.579-197.551 150.579z"
                    class="color3a95aa svgShape"></path>
                <path fill="#f9ae93"
                    d="M2210.9 2167.165s-15.555 79.732-26.656 130.076c-5.034 22.783-9.144 39.564-10.499 40.188-4.346 2.001-82.636 11.188-109.874-18.222l-1.979-28.786-2.991-43.48-5.873-85.735-2.065-30.034 63.424 14.264 96.513 21.729z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="M2210.9 2167.165s-115.489 48.751-151.999 79.775l-5.873-85.735c18.696-7.293 40.748-12.435 61.359-15.77l96.513 21.73z"
                    class="colorf6816b svgShape"></path>
                <path fill="#ffffff"
                    d="M2184.244 2297.24c-5.034 22.783-9.144 65.296-10.499 65.92-4.346 2.001-82.636 11.187-109.874-18.223l-1.979-54.517c42.34 12.608 92.361 10.134 122.352 6.82z"
                    class="colorfff svgShape"></path>
                <path fill="#a9be3a"
                    d="M2063.862 2352.554c17.049-25.279 63.304-44.642 79.978-31.734 16.674 12.908 36.037 48.063 36.037 48.063l-116.015-16.329z"
                    class="colora9be3a svgShape"></path>
                <path fill="#f9ae93"
                    d="M2242.441 2447.927c-54.496 24.397-53.786 21.471-53.786 21.471l-38.532.021-59.766.043-55.163.043 5.766-110.971.689-13.146 10.456-.323 3.636-.129 75.063-2.366 115.231-3.636c-.002.001 50.923 84.617-3.594 108.993z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="m2090.356 2469.463-55.163.043 5.766-110.971c5.357-6.54 9.294-11.273 11.144-13.468l3.636-.129c40.533 21.406 39.048 87.348 34.617 124.525z"
                    class="colorf6816b svgShape"></path>
                <path fill="#ffffff"
                    d="M2242.441 2447.927c-54.496 24.397-53.786 21.471-53.786 21.471l-38.532.021c6.347-25.882 17.319-90.683-19.32-126.849l50.839-1.614 64.392-2.023c-.001.002 50.924 84.618-3.593 108.994z"
                    class="colorfff svgShape"></path>
                <path fill="#dbeafc"
                    d="M2242.441 2447.927c-54.496 24.397-53.786 21.471-53.786 21.471l-38.532.021s28.141-3.916 55.399-31.519c26.936-27.323 7.594-83.023-23.881-96.943l64.392-2.023c0 .001 50.925 84.617-3.592 108.993z"
                    class="colordbeafc svgShape"></path>
                <path fill="#a9be3a"
                    d="M2328.885 2528.606c-14.285 11.123-14.092 42.749-6.841 82.486 1.721 9.381 1.571 19.621.323 29.798-1.979 16.631-6.863 33.068-11.188 45.266-56.905-12.758-83.906-141.995-90.209-158.173-7.122-18.179-56.583-26.011-52.474-38.554 4.087-12.521 73.192-40.662 72.353-90.92-.215-12.78-2.151-22.353-5.293-29.625-4.582-10.542-11.704-16.2-19.922-19.643-.022-.021-.043-.021-.065-.043-8.434-3.528-17.986-4.755-27.043-6.497-24.074-4.69-41.394-24.978 1.506-28.162 0 0 106.625-9.531 120.243-22.397a71.39 71.39 0 0 1 3.335-2.969c19.965 22.827 1.958 62.585 2.065 80.765.107 20.847 24.505 10.413 17.061 36.122-7.444 25.731-16.265 32.853-10.435 72.697 5.831 39.823 20.848 38.704 6.584 49.849z"
                    class="colora9be3a svgShape"></path>
                <path fill="#ffffff"
                    d="M2386.974 2342.356c-13.317 43.416-30.12 88.531-26.613 135.734 3.076 41.523 2.582 139.477-9.596 179.021-1.656 5.422-3.528 9.746-5.658 12.672-4.862 6.712-9.165 11.833-12.865 15.749-7.422 2.022-14.437 2.108-21.063.624 4.325-12.198 9.208-28.635 11.188-45.266 1.248-10.176 1.398-20.417-.323-29.798-7.25-39.737-7.444-71.363 6.841-82.486 14.264-11.145-.753-10.026-6.583-49.849-5.83-39.844 2.991-46.965 10.435-72.697 7.444-25.71-16.954-15.275-17.061-36.122-.108-18.18 17.9-57.938-2.065-80.765 8.885-7.573 26.742-20.676 44.986-30.25 28.097 11.941 39.866 46.019 28.377 83.433z"
                    class="colorfff svgShape"></path>
                <path fill="#7e892c"
                    d="M2412.361 2425.337c-33.068 41.286-35.068 79.71-30.873 114.456 3.227 26.72 15.856 85.627-11.381 121.19-8.175 10.693-19.944 19.255-36.638 24.225-.388.107-.818.237-1.227.323 3.7-3.916 8.003-9.036 12.865-15.749 2.13-2.926 4.002-7.25 5.658-12.672 12.177-39.543 12.672-137.498 9.596-179.021-3.507-47.203 13.296-92.318 26.613-135.734 11.489-37.414-.28-71.492-28.377-83.433 20.223-10.585 40.877-16.889 50.129-6.454 18.824 21.257 36.724 131.583 3.635 172.869zM2322.366 2640.889c-1.979 16.631-6.863 33.068-11.188 45.266-56.905-12.758-83.906-141.995-90.209-158.173-7.122-18.179-56.583-26.011-52.474-38.554 4.087-12.521 73.192-40.662 72.353-90.92-.215-12.78-2.151-22.353-5.293-29.625 17.255 25.838 20.826 64.134 6.885 87.649-12.091 20.396 20.913 136.81 79.926 184.357z"
                    class="color7e892c svgShape"></path>
                <path fill="#dbeafc"
                    d="M2350.765 2657.111c-1.656 5.422-3.528 9.746-5.658 12.672-4.862 6.712-9.165 11.833-12.865 15.749-7.422 2.022-14.437 2.108-21.063.624 4.325-12.198 9.208-28.635 11.188-45.266 8.906 7.163 18.394 12.757 28.398 16.221z"
                    class="colordbeafc svgShape"></path>
                <path fill="#ffffff"
                    d="M2247.125 2621.621c-1.908 0-3.988-.277-6.237-.833-2.354-.582-9.519-2.354-11.473-8.333-2.016-6.163 2.633-11.723 7.127-17.1 1.893-2.264 3.851-4.606 4.971-6.613 2.626-4.704 3.614-12.52.899-16.657-1.805-2.752-5.441-3.873-10.807-3.338-4.571.458-10.158.434-12.843-3.831-2.955-4.695.11-9.728 3.355-15.056 2.568-4.218 6.086-9.995 4.415-12.621-2.776-4.362-10.805-8.959-15.603-11.705-4.956-2.837-8.871-5.078-7.066-9.812 1.907-5.005 6.17-4.104 17.563-1.693a5.378 5.378 0 0 1 3.734 7.595c4.09 2.785 8.06 6.088 10.447 9.839 5.266 8.276-.265 17.359-4.303 23.991-.479.787-1.064 1.747-1.588 2.661.254-.019.526-.043.818-.072 12.048-1.205 17.998 3.763 20.871 8.141 5.328 8.12 3.781 20.132-.5 27.801-1.613 2.889-3.899 5.625-6.111 8.27-1.649 1.974-4.293 5.136-4.947 6.772.507.306 1.57.812 3.623 1.319 3.408.843 5.225.525 5.746-.004.956-.969.959-4.406.323-6.831-.75-2.863.95-5.808 3.81-6.573 2.856-.763 5.797.912 6.575 3.768.307 1.125 2.831 11.169-3.008 17.148-2.447 2.509-5.728 3.767-9.791 3.767z"
                    class="colorfff svgShape"></path>
                <path fill="#64acc1"
                    d="M2210.9 2167.165c-114.757-14.888-222.695 29.066-289.325 65.554-41.501 22.719-66.995 42.534-68.136 43.416 9.961-25.968 19.147-80.012 26.312-131.883.667-4.97 1.334-9.918 1.979-14.823 7.702-58.498 12.543-110.347 12.543-110.347-.021.065-.043.151-.086.215a116.59 116.59 0 0 1-4.991 11.575c0 .021 0 .021-.022.043-25.709 52.387-92.339 104.388-136.315 134.658-24.139 16.631-41.458 26.699-41.458 26.699s-5.916 11.123-11.79 26.893c0 .021-.021.021-.021.043-9.746 26.183-19.363 65.167-1.463 87.09 10.219 12.5 55.27 20.654 109.766 25.968h.043c98.514 9.595 227.858 9.896 238.013 9.896 15.77 0 24.376 12.909 15.77 129.022-4.281 57.744-26.269 115.855-48.407 159.722-22.332 44.363-44.793 74.117-49.117 74.117-8.283 0-519.701-193.328-654.338-244.059-.15-.043-.301-.107-.452-.151-4.948-1.872-9.358-3.529-13.231-4.991-82.271-30.959-103.656-106.518-70.761-236.658 10.521-41.716 26.635-89.048 48.106-142.317l207.786-140.704 243.865-165.144 24.978-16.91s38.855-21.945 140.295-76.871c28.184-15.254 61.208-33.046 99.568-53.635 176.418-94.663 259.614-61.681 275.384 48.752 15.772 110.454-54.495 494.83-54.495 494.83z"
                    class="color64acc1 svgShape"></path>
                <path fill="#3a95aa"
                    d="M1752.86 2165.573c-24.139 16.631-41.458 26.699-41.458 26.699s47.267-162.993 40.899-222.544c.818 4.066 19.707 101.698.559 195.845zM1695.826 1982.249c-130.937 195.866-380.158 124.783-470.411 236.916 10.521-41.716 26.635-89.048 48.106-142.317l207.786-140.704c108.604 11.897 214.519 46.105 214.519 46.105zM2013.313 2630.906c-22.332 44.363-44.793 74.117-49.117 74.117-8.283 0-519.701-193.328-654.338-244.059 247.437 85.434 551.886 183.883 703.455 169.942z"
                    class="color3a95aa svgShape"></path>
                <path fill="#3a95aa"
                    d="M1881.731 2129.428c7.702-58.498 12.543-110.347 12.543-110.347-.021.065-.043.151-.086.215a116.59 116.59 0 0 1-4.991 11.575c0 .021 0 .021-.022.043-25.709 52.387-92.339 104.388-136.315 134.658 147.438-134.658 224.739-370.09 229.407-384.59l-102.516 363.269c.668-4.969 1.335-9.917 1.98-14.823z"
                    class="color3a95aa svgShape"></path>
                <path fill="#0a2f54" d="M1982.461 1780.315c-.021.065-.043.172-.108.366l.108-.366z"
                    class="color0a2f54 svgShape"></path>
                <path fill="#3a95aa"
                    d="M1807.894 2332.266c-83.734-5.917-205.14-10.908-205.14-10.908s74.547-55.184 96.836-102.15c-9.746 26.183-19.363 65.167-1.463 87.09 10.22 12.5 55.271 20.654 109.767 25.968zM1890.444 1677.218c-19.04 46.622-61.961 130.979-151.267 229.988 0 0-23.236-69.362-14.006-136.207l24.978-16.91s38.855-21.944 140.295-76.871z"
                    class="color3a95aa svgShape"></path>
                <path fill="#ffffff"
                    d="M1400.865 2100.672a2.001 2.001 0 0 1-1.762-2.942 280.663 280.663 0 0 1 2.905-5.304 2 2 0 1 1 3.487 1.961 275.24 275.24 0 0 0-2.864 5.228 1.999 1.999 0 0 1-1.766 1.057zM1822.222 2445.415c-1.104 0-2.031-.896-2.031-2s.864-2 1.969-2h.063c1.175 0 2.348-.002 3.52-.008l8.359-.039c1.127.021 2.004.887 2.009 1.991a2 2 0 0 1-1.991 2.009l-8.357.039c-1.179.006-2.36.008-3.541.008zm-12.013-.096h-.033a771.616 771.616 0 0 1-11.982-.286 2 2 0 0 1-1.936-2.063c.035-1.104.962-1.987 2.063-1.936 3.932.124 7.942.22 11.92.284a2.002 2.002 0 0 1-.032 4.001zm35.852-.005a2 2 0 0 1-.009-4l11.951-.052h.009a2 2 0 0 1 .009 4l-11.951.052h-.009zm23.903-.101a2 2 0 0 1-.008-4l11.951-.047h.008a2 2 0 0 1 .008 4l-11.951.047h-.008zm23.901-.091a2 2 0 0 1-.007-4l11.951-.042h.007a2 2 0 0 1 .007 4l-11.951.042h-.007zm23.902-.08a2 2 0 0 1-.006-4l11.95-.036h.006a2 2 0 0 1 .006 4l-11.95.036h-.006zm23.901-.071a2 2 0 0 1-.005-4l11.951-.03h.005a2.001 2.001 0 0 1 .005 4l-11.951.03h-.005zm23.903-.055a2 2 0 0 1-.004-4l11.951-.021h.003a2 2 0 0 1 .003 4l-11.949.021h-.004zm23.901-.04a2 2 0 0 1-.003-4l11.952-.014h.002a1.999 1.999 0 0 1 .002 4l-11.95.014h-.003zm59.753-.01h-.003l-11.948-.011a2 2 0 0 1 .001-4h.001l11.952.011a2 2 0 0 1-.003 4zm-35.85-.013a2 2 0 0 1-.002-4l11.952-.002a2 2 0 0 1 0 4l-11.95.002zm-227.06-.291-.097-.002a784.024 784.024 0 0 1-11.963-.66 2 2 0 0 1 .252-3.992c3.964.249 7.968.471 11.9.656a2 2 0 0 1-.092 3.998zm-23.845-1.501c-.053 0-.106-.002-.159-.006a790.184 790.184 0 0 1-11.923-1.031 2 2 0 0 1 .375-3.983c3.926.37 7.917.715 11.862 1.025a2.001 2.001 0 0 1-.155 3.995zm-23.76-2.24c-.072 0-.146-.004-.221-.012a779.779 779.779 0 0 1-11.874-1.401 2 2 0 0 1-1.734-2.234 1.995 1.995 0 0 1 2.234-1.734c3.912.493 7.886.962 11.811 1.394a2 2 0 0 1-.216 3.987zm-23.652-2.98c-.094 0-.188-.006-.283-.02a760.058 760.058 0 0 1-11.857-1.777 2 2 0 0 1 .625-3.951c3.9.616 7.867 1.211 11.793 1.768a2 2 0 0 1-.278 3.98zm-23.617-3.733c-.114 0-.229-.01-.346-.03a762.029 762.029 0 0 1-11.793-2.157 2.002 2.002 0 0 1-1.589-2.341 2.004 2.004 0 0 1 2.341-1.589c3.889.744 7.835 1.467 11.729 2.147a1.998 1.998 0 0 1 1.625 2.313 1.999 1.999 0 0 1-1.967 1.657zm-23.485-4.497a2.06 2.06 0 0 1-.41-.042 710.123 710.123 0 0 1-11.715-2.547 2 2 0 1 1 .883-3.902 689.85 689.85 0 0 0 11.648 2.532 2.001 2.001 0 0 1-.406 3.959zm-23.321-5.276c-.157 0-.317-.02-.476-.059a694.447 694.447 0 0 1-11.623-2.946 2 2 0 0 1 1.017-3.869 696.111 696.111 0 0 0 11.555 2.931 2 2 0 0 1-.473 3.943zm-23.123-6.082c-.18 0-.363-.025-.545-.076a663.273 663.273 0 0 1-11.51-3.364 2 2 0 1 1 1.157-3.828 666.835 666.835 0 0 0 11.441 3.343 2 2 0 0 1-.543 3.925zm-22.886-6.92c-.204 0-.411-.032-.616-.098a623.546 623.546 0 0 1-11.376-3.799 2 2 0 1 1 1.303-3.781 615.614 615.614 0 0 0 11.303 3.773 2.002 2.002 0 0 1-.614 3.905zm-22.604-7.794c-.229 0-.463-.04-.691-.124a581.083 581.083 0 0 1-11.215-4.259 2 2 0 1 1 1.459-3.725 573.155 573.155 0 0 0 11.138 4.229 2 2 0 0 1 1.186 2.567 2 2 0 0 1-1.877 1.312zm-22.259-8.728c-.256 0-.517-.05-.769-.155a519.163 519.163 0 0 1-11.021-4.748 2 2 0 0 1-1.015-2.64 1.994 1.994 0 0 1 2.64-1.015 511.256 511.256 0 0 0 10.937 4.711 1.999 1.999 0 0 1 1.076 2.615 2.004 2.004 0 0 1-1.848 1.232zm-21.845-9.717a2 2 0 0 1-.854-.192 481.83 481.83 0 0 1-10.785-5.273 2 2 0 0 1 1.802-3.571 473.733 473.733 0 0 0 10.694 5.229 2 2 0 0 1-.857 3.807zm-21.339-10.776c-.32 0-.645-.077-.947-.239a427.957 427.957 0 0 1-10.493-5.842 2 2 0 1 1 1.995-3.466 428.514 428.514 0 0 0 10.395 5.787 2 2 0 0 1-.95 3.76zm-20.717-11.927a1.99 1.99 0 0 1-1.046-.297 378.799 378.799 0 0 1-10.133-6.459 2 2 0 1 1 2.204-3.338 377.45 377.45 0 0 0 10.026 6.391 2 2 0 0 1-1.051 3.703zm-19.942-13.175c-.4 0-.804-.119-1.155-.369a330.16 330.16 0 0 1-9.68-7.132 1.998 1.998 0 0 1-.373-2.803 2.001 2.001 0 0 1 2.804-.372 332.315 332.315 0 0 0 9.564 7.046 2 2 0 0 1-1.16 3.63zm-18.971-14.531c-.45 0-.901-.15-1.275-.46a292.336 292.336 0 0 1-9.107-7.863 2.001 2.001 0 0 1 2.678-2.972 285.65 285.65 0 0 0 8.981 7.756 1.999 1.999 0 0 1-1.277 3.539zm-17.741-16a1.994 1.994 0 0 1-1.404-.575 251.85 251.85 0 0 1-8.375-8.653 2 2 0 1 1 2.941-2.711 246.605 246.605 0 0 0 8.241 8.515 2 2 0 0 1-1.403 3.424zm-16.176-17.57a1.996 1.996 0 0 1-1.54-.723 217.317 217.317 0 0 1-7.441-9.482 2 2 0 0 1 3.214-2.379 214.79 214.79 0 0 0 7.304 9.307 2 2 0 0 1-1.537 3.277zm-14.189-19.197a1.998 1.998 0 0 1-1.678-.908 189.332 189.332 0 0 1-6.263-10.312 2 2 0 0 1 3.485-1.965 185.733 185.733 0 0 0 6.13 10.093 2 2 0 0 1-1.674 3.092zm-11.707-20.789a1.998 1.998 0 0 1-1.806-1.138 170.495 170.495 0 0 1-4.815-11.071 2 2 0 0 1 3.723-1.463 165.687 165.687 0 0 0 4.702 10.81 2 2 0 0 1-1.804 2.862zm-8.708-22.194a2.001 2.001 0 0 1-1.91-1.41 158.914 158.914 0 0 1-3.123-11.656 2.001 2.001 0 0 1 3.901-.887 154.755 154.755 0 0 0 3.044 11.361 2 2 0 0 1-1.912 2.592zm-5.279-23.258a2 2 0 0 1-1.977-1.71 157.352 157.352 0 0 1-1.289-12.008 2 2 0 0 1 1.859-2.132 2.006 2.006 0 0 1 2.131 1.858c.267 3.9.689 7.837 1.256 11.701a2 2 0 0 1-1.98 2.291zm-1.628-23.775h-.016a2 2 0 0 1-1.984-2.016c.032-3.993.215-8.06.546-12.086a2 2 0 0 1 3.987.328 160.032 160.032 0 0 0-.532 11.789 2.002 2.002 0 0 1-2.001 1.985zm1.943-23.81a1.998 1.998 0 0 1-1.979-2.303 181.453 181.453 0 0 1 2.239-11.873 2.01 2.01 0 0 1 2.388-1.517 2.001 2.001 0 0 1 1.517 2.388c-.863 3.869-1.6 7.775-2.19 11.609a2.002 2.002 0 0 1-1.975 1.696zm5.183-23.314a2 2 0 0 1-1.922-2.558c1.102-3.8 2.347-7.663 3.701-11.484a2 2 0 1 1 3.77 1.336 203.829 203.829 0 0 0-3.629 11.262 2.003 2.003 0 0 1-1.92 1.444zm7.961-22.523a2 2 0 0 1-1.846-2.769 242.566 242.566 0 0 1 4.911-11.004 2 2 0 1 1 3.612 1.719 240.992 240.992 0 0 0-4.83 10.822 2 2 0 0 1-1.847 1.232zM2134.81 2148.402a2 2 0 0 1-1.993-2.191c.353-3.687.73-7.686 1.13-11.971a1.988 1.988 0 0 1 2.177-1.805 2 2 0 0 1 1.806 2.177c-.399 4.289-.777 8.29-1.13 11.98a2.002 2.002 0 0 1-1.99 1.81zm2.233-23.95a2.001 2.001 0 0 1-1.995-2.182c.349-3.825.71-7.819 1.081-11.97a2 2 0 1 1 3.984.356c-.371 4.154-.732 8.15-1.081 11.978a1.998 1.998 0 0 1-1.989 1.818zm2.139-23.946a1.998 1.998 0 0 1-1.994-2.174c.339-3.882.685-7.875 1.034-11.971a1.991 1.991 0 0 1 2.164-1.822 2 2 0 0 1 1.822 2.164c-.352 4.098-.697 8.093-1.036 11.977a2 2 0 0 1-1.99 1.826zm2.048-23.95a2 2 0 0 1-1.995-2.167c.327-3.912.657-7.905.989-11.971a1.996 1.996 0 0 1 2.156-1.83 2 2 0 0 1 1.83 2.156c-.332 4.068-.662 8.063-.989 11.979a2 2 0 0 1-1.991 1.833zm1.956-23.95a2.001 2.001 0 0 1-1.996-2.159c.313-3.934.628-7.927.942-11.973a2.01 2.01 0 0 1 2.149-1.839 2.001 2.001 0 0 1 1.839 2.149 6247.66 6247.66 0 0 1-.942 11.98 2 2 0 0 1-1.992 1.842zm1.86-23.956a2 2 0 0 1-1.996-2.151c.299-3.95.597-7.944.894-11.976.081-1.102 1.035-1.942 2.141-1.848a1.998 1.998 0 0 1 1.847 2.141 6716.74 6716.74 0 0 1-.893 11.983 2 2 0 0 1-1.993 1.851zm1.762-23.961a2.001 2.001 0 0 1-1.997-2.143c.283-3.963.563-7.958.841-11.979a2.007 2.007 0 0 1 2.133-1.857 1.998 1.998 0 0 1 1.857 2.133 4359.74 4359.74 0 0 1-.841 11.988 2 2 0 0 1-1.993 1.858zm1.654-23.967a1.997 1.997 0 0 1-1.997-2.133c.264-3.973.525-7.969.783-11.982.071-1.101 1.04-1.923 2.124-1.868a2 2 0 0 1 1.868 2.124c-.258 4.017-.52 8.015-.785 11.991a2 2 0 0 1-1.993 1.868zm1.539-23.974a2 2 0 0 1-1.998-2.123c.245-3.982.486-7.979.723-11.985.064-1.104.984-1.96 2.114-1.878a1.998 1.998 0 0 1 1.878 2.114 4642.79 4642.79 0 0 1-.723 11.995 2 2 0 0 1-1.994 1.877zm1.414-23.982-.114-.003a2.001 2.001 0 0 1-1.885-2.109c.225-4.003.443-8.012.656-12.022.059-1.104 1.026-1.934 2.103-1.891a2 2 0 0 1 1.891 2.103 3882.59 3882.59 0 0 1-.656 12.035 2 2 0 0 1-1.995 1.887zm1.275-24.04-.102-.003a1.997 1.997 0 0 1-1.897-2.097c.198-3.999.391-7.995.576-11.987.051-1.103 1.001-1.94 2.091-1.905a2 2 0 0 1 1.905 2.091c-.186 3.996-.378 7.998-.578 12.001a1.999 1.999 0 0 1-1.995 1.9zm1.112-23.971-.086-.002a2 2 0 0 1-1.913-2.083c.17-4.008.334-8.008.489-11.994.043-1.103.983-1.986 2.076-1.92a1.999 1.999 0 0 1 1.92 2.076c-.156 3.99-.32 7.994-.49 12.008a1.997 1.997 0 0 1-1.996 1.915zm-426.22-.368a2 2 0 0 1-1.344-3.481 1714.18 1714.18 0 0 1 8.935-8.043 2 2 0 0 1 2.666 2.982c-3.008 2.688-5.98 5.362-8.914 8.024a1.996 1.996 0 0 1-1.343.518zm17.909-16.003a2.002 2.002 0 0 1-1.323-3.501c2.986-2.63 6.004-5.268 9.051-7.915a1.999 1.999 0 1 1 2.623 3.019c-3.04 2.641-6.051 5.273-9.029 7.898a1.996 1.996 0 0 1-1.322.499zm409.243-7.633-.07-.001a2 2 0 0 1-1.93-2.068c.139-4.019.269-8.019.389-11.997.033-1.104.974-2.008 2.06-1.939a1.999 1.999 0 0 1 1.938 2.06c-.12 3.984-.25 7.99-.389 12.015a2 2 0 0 1-1.998 1.93zm-391.11-8.116a1.998 1.998 0 0 1-1.302-3.518c3.026-2.593 6.078-5.19 9.154-7.791a2 2 0 0 1 2.582 3.054 2031.69 2031.69 0 0 0-9.135 7.773 1.984 1.984 0 0 1-1.299.482zm18.341-15.503a2 2 0 0 1-1.282-3.536c3.065-2.557 6.151-5.114 9.257-7.669a2 2 0 1 1 2.541 3.089 1780.402 1780.402 0 0 0-9.235 7.651 1.987 1.987 0 0 1-1.281.465zm373.49-.395-.051-.001a1.998 1.998 0 0 1-1.949-2.049c.101-4.026.189-8.028.268-11.998a2 2 0 0 1 1.999-1.961h.04a2.002 2.002 0 0 1 1.961 2.039c-.078 3.978-.169 7.985-.27 12.02a2 2 0 0 1-1.998 1.95zm-354.948-14.866a2 2 0 0 1-1.262-3.552 1680.07 1680.07 0 0 1 9.329-7.525 2 2 0 1 1 2.5 3.123c-3.118 2.497-6.221 5-9.308 7.507a1.984 1.984 0 0 1-1.259.447zm355.416-9.154h-.028a2.002 2.002 0 0 1-1.973-2.027c.055-4.038.096-8.04.123-11.998a2 2 0 0 1 2-1.986h.014a2 2 0 0 1 1.986 2.014c-.027 3.968-.068 7.977-.123 12.025a2 2 0 0 1-1.999 1.972zm-336.718-5.824a2.001 2.001 0 0 1-1.241-3.57c3.138-2.479 6.288-4.952 9.45-7.415a2 2 0 1 1 2.458 3.157 1708.356 1708.356 0 0 0-9.428 7.397c-.367.29-.805.431-1.239.431zm18.937-14.756a1.999 1.999 0 0 1-1.219-3.586 1725.31 1725.31 0 0 1 9.571-7.299 2 2 0 1 1 2.414 3.19 1755.416 1755.416 0 0 0-9.55 7.281c-.361.279-.79.414-1.216.414zm317.941-3.444a2 2 0 0 1-2-1.999c-.003-4.048-.022-8.044-.06-11.983a2 2 0 0 1 1.981-2.019c1.104.022 2.008.876 2.019 1.981.037 3.95.057 7.958.06 12.018a2.001 2.001 0 0 1-2 2.002zm-298.756-11.074a2 2 0 0 1-1.197-3.604c3.218-2.398 6.44-4.782 9.667-7.148a2 2 0 1 1 2.365 3.225 1561.84 1561.84 0 0 0-9.642 7.131 1.991 1.991 0 0 1-1.193.396zm298.524-12.926a2 2 0 0 1-1.999-1.962c-.076-4.024-.176-8.053-.297-11.973a2 2 0 0 1 1.938-2.06c1.101-.062 2.026.834 2.06 1.938.121 3.935.222 7.979.299 12.019a2 2 0 0 1-1.962 2.038h-.039zm-279.161-1.278a2 2 0 0 1-1.173-3.622c3.259-2.352 6.52-4.684 9.779-6.996a2 2 0 1 1 2.314 3.264 1398.023 1398.023 0 0 0-9.752 6.976 1.997 1.997 0 0 1-1.168.378zm19.59-13.891a2 2 0 0 1-1.146-3.641c3.304-2.3 6.604-4.577 9.9-6.827a2 2 0 1 1 2.256 3.302 1269.277 1269.277 0 0 0-9.869 6.808 1.994 1.994 0 0 1-1.141.358zm258.822-8.821a2 2 0 0 1-1.996-1.911c-.184-4.119-.396-8.14-.63-11.95a1.998 1.998 0 0 1 1.873-2.119c1.111-.083 2.051.771 2.119 1.873.236 3.833.449 7.877.634 12.019a2 2 0 0 1-1.909 2.087l-.091.001zm-238.989-4.721a2.001 2.001 0 0 1-1.114-3.663c3.352-2.242 6.696-4.455 10.031-6.638a2 2 0 1 1 2.189 3.347c-3.323 2.175-6.656 4.38-9.996 6.614-.342.231-.728.34-1.11.34zm20.097-13.146a2 2 0 0 1-1.08-3.686c3.393-2.167 6.816-4.326 10.178-6.418a2 2 0 1 1 2.113 3.397 991.618 991.618 0 0 0-10.137 6.393 1.983 1.983 0 0 1-1.074.314zm217.402-6.086a2 2 0 0 1-1.991-1.836 433.537 433.537 0 0 0-1.14-11.891 2.001 2.001 0 0 1 1.769-2.208 2.013 2.013 0 0 1 2.208 1.769c.418 3.783.805 7.821 1.149 12.002a2 2 0 0 1-1.995 2.164zm-197.01-6.599a2 2 0 0 1-1.037-3.711 835.87 835.87 0 0 1 10.342-6.157 1.995 1.995 0 0 1 2.736.715 1.999 1.999 0 0 1-.715 2.736 866.68 866.68 0 0 0-10.293 6.128c-.324.196-.68.289-1.033.289zm20.724-12.137a2 2 0 0 1-.986-3.741 710.761 710.761 0 0 1 10.53-5.841 2 2 0 0 1 1.91 3.516 707.676 707.676 0 0 0-10.472 5.807c-.31.176-.649.259-.982.259zm173.563-5.104a2 2 0 0 1-1.967-1.65c-.719-4.044-1.724-7.822-2.985-11.229a2 2 0 1 1 3.75-1.389c1.346 3.631 2.413 7.641 3.173 11.92a1.998 1.998 0 0 1-1.971 2.348zm-152.46-6.357a1.999 1.999 0 0 1-.923-3.775 561.293 561.293 0 0 1 10.754-5.441 2 2 0 1 1 1.766 3.59 561.857 561.857 0 0 0-10.676 5.401c-.296.153-.61.225-.921.225zm21.549-10.596a2 2 0 0 1-.84-3.816 418.128 418.128 0 0 1 11.021-4.911 2.001 2.001 0 0 1 1.574 3.678 421.577 421.577 0 0 0-10.915 4.864 2.015 2.015 0 0 1-.84.185zm122.381-5.265a1.998 1.998 0 0 1-1.647-.862c-2.197-3.179-4.813-5.952-7.771-8.241a2 2 0 1 1 2.448-3.164c3.284 2.542 6.183 5.613 8.614 9.13a2.001 2.001 0 0 1-1.644 3.137zm-100.302-4.171a1.999 1.999 0 0 1-.725-3.864 297.697 297.697 0 0 1 11.348-4.163 1.999 1.999 0 1 1 1.299 3.783 296.482 296.482 0 0 0-11.195 4.106 1.982 1.982 0 0 1-.727.138zm22.713-7.761a2.002 2.002 0 0 1-.554-3.923 194.04 194.04 0 0 1 11.746-3.009 1.997 1.997 0 0 1 2.385 1.52 1.999 1.999 0 0 1-1.52 2.385c-3.688.818-7.558 1.81-11.502 2.948a2.011 2.011 0 0 1-.555.079zm58.95-2.552c-.237 0-.477-.043-.712-.132-3.389-1.292-7.147-2.229-11.175-2.785a2 2 0 0 1 .549-3.963c4.325.599 8.38 1.611 12.05 3.01a2 2 0 0 1-.712 3.87zm-35.527-2.555a2 2 0 0 1-.267-3.981c4.236-.576 8.33-.911 12.17-.995l.045-.001a2 2 0 0 1 .043 4c-3.689.081-7.632.403-11.719.959a2.082 2.082 0 0 1-.272.018z"
                    class="colorfff svgShape"></path>
                <path fill="#f9ae93"
                    d="M2385.511 1425.651c-33.025 3.055-68.201 3.55-98.6.753-20.718-1.915-39.436 1.7-57.637 8.735-64.027 24.698-121.749 91.5-238.185 107.4-34.294 4.69-67.792 4.454-99.052 1.312-69.534-6.992-128.01-28.377-159.636-42.06-16.157-6.992-25.301-11.962-25.301-11.962l10.757-197.631c10.09 4.69 19.879 9.359 29.41 13.963 133.927 64.629 215.337 118.2 283.624 120.201 73.149 2.151 348.532-102.193 362.517-97.89 13.984 4.303-87.133 37.65-48.407 50.559 38.726 12.909 139.843-31.196 157.055 1.076 11.616 21.792-47.871 39.197-116.545 45.544z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="M1892.036 1543.851c-69.534-6.992-128.01-28.377-159.636-42.06-9.467-88.015 14.866-195.63 14.866-195.63s14.716 174.502 144.77 237.69z"
                    class="colorf6816b svgShape"></path>
                <path fill="#f9ae93"
                    d="M1124.985 1843.245s-40.791 56.97-92.985 127.838c-51.699 70.202-114.607 154.065-160.045 209.636-29.668 36.273-51.914 60.52-58.777 61.036-27.969 2.151-176.418-12.909-176.418-12.909s133.389-17.211 152.752-32.271c19.363-15.06 238.809-551.843 238.809-551.843l.022.021 96.642 198.492z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="M1032 1971.083c1.054-121.577-3.679-326.351-3.679-326.351l.022.021 96.642 198.491c0 .001-40.791 56.971-92.985 127.839z"
                    class="colorf6816b svgShape"></path>
                <path fill="#f9ae93"
                    d="M1407.512 1282.753s-5.379 59.164-43.631 73.687c-38.231 14.522-85.563-58.132-85.563-58.132s16.63-45.395 24.828-88.316l.022-.021c2.237-11.747 3.851-23.321 4.303-33.713l80.141-6.992c-.646 2.625-.839 6.239-.71 10.542.581 18.61 7.466 50.451 13.124 73.794 4.065 16.759 7.486 29.151 7.486 29.151z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="M1365.021 1375.802c54.503 0 39.264-69.922 39.264-69.922s-22.859 19.094-43.835 19.901c-20.977.807-52.172-24.742-82.131-27.474l86.702 77.495zM1400.025 1253.601c-32.078-16.394-96.879-43.61-96.879-43.61l.022-.021c.732-.968 25.946-33.713 83.734-30.163.58 18.61 7.465 50.451 13.123 73.794z"
                    class="colorf6816b svgShape"></path>
                <path fill="#a9be3a"
                    d="M1832.251 1671.626c.71 20.07 16.48 53.07-31.57 136.98-45.99 80.319-95.26 216.49-234.03 264.46a289.72 289.72 0 0 1-19.12 5.89c-40.3 10.931-83.24 19.23-125.35 25.641-21.05 3.21-41.9 5.949-62.09 8.31-3.59.429-7.16.83-10.7 1.23-37.02 4.14-71.53 7.029-100.72 9.279-40.64 3.13-70.96 4.98-83.37 7.17-36.57 6.46-13.64-43.019 9.32-88.92 21.07-42.13 47.42-218.58 51.6-247.24.34-2.369.53-3.729.56-3.92l-.03.03c-1.14 1.55-33.76 45.71-65.04 84.271-2.08 2.56-4.15 5.09-6.2 7.58-20.23 24.569-38.96 45.39-47.05 49.02 0 0-5.53-34.46-15.04-80.33-14.39-69.41-37.88-164.89-65.1-206.34l17.51-42.63 2.8-6.81 82.42-200.67c37.7-76.24 77.03-101.91 112.4-102.92 3.89-.12 7.72.06 11.5.51 6 .71 11.86 2.09 17.56 3.98 41.95 13.99 62.39 46.26 81.75 40.88 19.37-5.38 45.72-31.2 53.25-54.32 1.98-6.08 15.33-12.76 37.09-18.67 2.81-.76 5.76-1.51 8.85-2.24 55.32-13.18 153.63-21.29 257.82-7.27 2.37.32 4.75.65 7.13 1 13.98 2 28.05 4.42 42.12 7.28 0 0-13.38 7.85-15.34 74.31-.48 16.35-.26 36.27 1.01 60.52 4.09 77.66 23.13 131.73 36.53 160.94 7.6 16.521 13.38 25.09 13.65 25.49-.59-.17-19.1-5.4-42.93-13.66-2.76-.96-5.59-1.96-8.47-2.99-23.02-8.27-49.35-18.92-69-30.35-6.63-3.83-12.48-7.77-17.19-11.72h-.03c-.02-.03-.02-.03-.04-.03.09.09.17.18.24.26 6.26 6.86 117.12 127.58 182.61 110.13 0 0-6.45 10.141-8.63 24.49a60.08 60.08 0 0 0-.68 11.379z"
                    class="colora9be3a svgShape"></path>
                <path fill="#4482f3" d="M1675.968 1537.117c-6.648-3.851-12.521-7.81-17.255-11.768l17.255 11.768z"
                    class="color4482f3 svgShape"></path>
                <path fill="#7e892c"
                    d="M1841.564 1635.76s-6.454 10.133-8.627 24.483c-127.752-8.606-173.298-132.292-174.223-134.873 2.603 2.862 116.22 128.14 182.85 110.39zM1760.519 1262.852s-13.382 7.853-15.34 74.311c-76.376-60.972-217.101-111.358-337.667-54.41 7.53-23.128 180.182-55.034 353.007-19.901z"
                    class="color7e892c svgShape"></path>
                <path fill="#7e892c"
                    d="M1796.384 1584.126s-76.72-21.6-120.416-47.009c-6.627-3.83-12.479-7.767-17.19-11.725 2.495.925 72.675 26.57 123.944 33.24 7.788 16.91 13.662 25.494 13.662 25.494zM1226.748 1790.535c-1.958 2.668-96.987 131.302-118.286 140.876 0 0-5.529-34.466-15.039-80.335 76.183-14.156 131.432-58.993 133.325-60.541z"
                    class="color7e892c svgShape"></path>
                <path fill="#f6816b"
                    d="M871.955 2180.719c-29.668 36.273-51.914 60.52-58.777 61.036-27.969 2.151-176.418-12.909-176.418-12.909s133.927 7.939 175.88-9.681c19.234-8.09 41.2-23.795 59.315-38.446zM2385.511 1425.651c-33.025 3.055-68.201 3.55-98.6.753-20.718-1.915-39.436 1.7-57.637 8.735 18.481-14.479 34.574-22.397 68.394-22.397 32.336.001 58.476 8.434 87.843 12.909z"
                    class="colorf6816b svgShape"></path>
                <path fill="#330234"
                    d="M1458.883 768.133c12.64-73.956 77.452-67.77 87.94-60.778 0 0-64.185-1.255-87.94 60.778z"
                    class="color330234 svgShape"></path>
                <path fill="#330234"
                    d="M1461.444 762.352c18.082-34.512 58.172-20.181 63.842-14.888-.001.001-40.368-11.774-63.842 14.888z"
                    class="color330234 svgShape"></path>
                <path fill="#f9ae93"
                    d="m1230.748 1005.167-10.413 26.893c-16.179 8.326-44.771 6.045-67.706-4.153h-.021c-29.367-13.08-49.44-39.156-22.268-72.589 15.706-19.32 31.777-24.289 46.299-21.041h.021c30.229 6.713 53.852 48.859 54.088 70.89z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="m1230.748 1005.167-10.413 26.893c-16.179 8.326-44.771 6.045-67.706-4.153 23.602.452 47.612-8.197 47.612-8.197l-15.813-29.432s-18.954-37.65-7.788-56.002h.021c30.228 6.714 53.851 48.86 54.087 70.891z"
                    class="colorf6816b svgShape"></path>
                <path fill="#db6b5d"
                    d="M1217.869 993.758c-21.371 6.375-40.197-39.074-57.408-11.105-17.211 27.969 36.637 47.869 51.531 30.658 14.894-17.212 5.877-19.553 5.877-19.553z"
                    class="colordb6b5d svgShape"></path>
                <path fill="#f6816b"
                    d="M1514.91 953.877c9.681-39.264 74.762-59.702 92.512-19.901 17.749 39.802-52.71 80.768-69.922 72.656-17.212-8.113-22.59-52.755-22.59-52.755z"
                    class="colorf6816b svgShape"></path>
                <path fill="#db6b5d"
                    d="M1524.208 966.644c20.612.664 26.733-44.412 48.715-23.46 21.982 20.952-21.478 51.438-38.852 39.558-17.375-11.879-9.863-16.098-9.863-16.098z"
                    class="colordb6b5d svgShape"></path>
                <path fill="#f9ae93"
                    d="M1447.636 1206.183c-1.57.172-3.184.345-4.798.495-40.705 3.808-76.763 5.594-108.045 4.948-106.001-2.151-157.356-32.228-149.589-106.969 10.047-96.815 48.773-194.339 48.773-194.339l43.609-28.055 109.143-70.201 145.393 113.854c.129.731.28 1.463.431 2.216 16.286 84.035 86.036 258.774-84.917 278.051z"
                    class="colorf9ae93 svgShape"></path>
                <path fill="#f6816b"
                    d="M1240.865 998.161c-16.956 81.499 65.759 74.583 89.994 43.105 0 0-73.5-5.455-79.954-22.307-6.454-16.854-10.04-20.798-10.04-20.798zM1447.636 1206.183c16.093-13.167 33.735-30.163 49.698-50.365 41.91-53.076-2.732-234.743-2.732-234.743l-76.376-74.59s-51.957 84.272-136.078 113.574c0 0-15.856-17.771-4.561-77.796l109.143-70.201 145.393 113.854c.129.731.28 1.463.431 2.216 16.285 84.035 86.035 258.774-84.918 278.051z"
                    class="colorf6816b svgShape"></path>
                <path fill="#ffffff"
                    d="M1361.254 985.245s-15.405 63.467-60.24 72.804c-44.815 9.316-61.66-28.334-60.24-59.896 50.666-1.247 95.115-8.412 120.48-12.908z"
                    class="colorfff svgShape"></path>
                <path fill="#f6816b"
                    d="M1394.967 989.196c-16.956 81.499 44.104 101.602 85.48 70.296 0 0-68.986-32.645-75.44-49.498-6.454-16.853-10.04-20.798-10.04-20.798z"
                    class="colorf6816b svgShape"></path>
                <circle cx="1317.471" cy="1006.632" r="10.847" fill="#00091a" class="color00091a svgShape"></circle>
                <path fill="#ffffff"
                    d="M1394.967 989.196c74.942 14.702 123.349-8.964 123.349-8.964s-.359 79.244-60.24 86.416-62.75-63.826-63.109-77.452z"
                    class="colorfff svgShape"></path>
                <circle cx="1494.605" cy="1002.688" r="10.847" fill="#00091a" class="color00091a svgShape"></circle>
                <path fill="#f6816b"
                    d="M1316.253 1130.59c-11.737-20.121 20.245-41.533 53.429-29.428 33.185 12.105 42.368 45.916 30.263 43.829-12.105-2.087-16.697-10.853-44.037-6.679-27.341 4.175-35.272-.208-39.655-7.722z"
                    class="colorf6816b svgShape"></path>
                <path fill="#ffffff"
                    d="M1229.038 1059.492c1.345 20.513-24.742 35.998-20.977 61.871 3.765 25.874 53.517 14.848 38.995-16.348-14.522-31.196-15.06-39.143-18.018-45.523z"
                    class="colorfff svgShape"></path>
                <path fill="#330234"
                    d="M1542.34 941.872c-24.376 2.151-88.919 3.227-158.13-96.642-4.841 68.846-129.839 135.454-176.525 150.557 0 0-19.255 1.657-29.474-47.826-.86-4.109-1.377-8.627-1.549-13.49-2.13-53.851 36.768-150.299 134.766-196.986 106.841-50.924 149.869 24.376 149.869 24.376s65.274-13.619 101.849 75.3c36.573 88.92 3.57 102.559-20.806 104.711z"
                    class="color330234 svgShape"></path>
                <path fill="#00091a"
                    d="M1450.644 961.724c-14.924 0-31.443-4.233-47.568-16.827a4.302 4.302 0 0 1-.743-6.039 4.3 4.3 0 0 1 6.039-.743c20.447 15.968 44.041 19.283 70.126 9.848a4.303 4.303 0 1 1 2.927 8.093c-8.699 3.147-19.265 5.668-30.781 5.668zM1309.019 962.413c-1.608 0-3.231-.044-4.871-.132a4.302 4.302 0 1 1 .461-8.593c21.876 1.172 40.58-6.461 55.582-22.689a4.304 4.304 0 0 1 6.32 5.842c-15.699 16.983-35.022 25.572-57.492 25.572z"
                    class="color00091a svgShape"></path>
                <path fill="#ffffff"
                    d="M1453.452 1261.847c-28.96 80.89-50.66 135.06-75.26 142.07-1.89.53-3.79.8-5.67.8-5.2 0-10.38-2.03-15.45-6.07-11.13-8.87-34.97-32.15-58.03-54.67-21.29-20.78-47.26-46.15-55.59-52.27 3.89-.12 7.72.06 11.5.51 9.68 8.51 25.31 23.64 48.98 46.75 22.93 22.4 46.65 45.56 57.5 54.2 5.13 4.09 9.98 5.4 14.84 4.01 22.9-6.51 45.99-70.62 68.33-133.09 2.809-.76 5.759-1.51 8.85-2.24zM1161.712 1874.807c-2.08 2.56-4.15 5.09-6.2 7.58-2.09-19.591-7.65-62.37-20.01-109.78-14.63-56.12-41.88-129.8-89.67-170.5l2.8-6.81c21.4 17.71 40.52 42.96 56.92 75.21 14.41 28.33 26.77 62.131 36.75 100.44 11.16 42.83 16.819 81.94 19.41 103.86zM1753.442 1570.457c-2.76-.96-5.59-1.96-8.47-2.99-6.82-11.75-28.07-50.47-42.86-100.92-10.44-35.6-15.7-70.03-15.63-102.33.1-40.07 8.44-76.95 24.79-109.64 2.37.32 4.75.65 7.13 1-.05.37-.16.74-.34 1.09-36.77 72.5-25.32 153.08-9.23 207.91 17.48 59.62 44.01 102.45 44.28 102.87.58.94.67 2.04.33 3.01zM1455.571 1597.074c-31.82 22.333 6.18 51.333 18.479 73.036.959 2.057 1.762 3.988 3.595 7.095l16.704 28.313 3.074 5.211c12.329 16.677 25.329 49.677 51.329 45.677 1 0 1 3 2 4-5 1-10 3-14 6-18 14-33 29-53 40 20-27 1-59-11.924-85.493l-3.729-6.321-6.567-11.131a116.832 116.832 0 0 1-2.867-5.165c-7.913-21.89-20.913-40.89-37.913-56.89 14 22 21 48 16.227 74.201.026 1.899.031 3.736.312 5.891l1.692 12.943c.331 2.531.645 5.027.815 7.305 1.953 8.66-6.047 13.66-8.047 21.66-1 4 0 7 2 10 9 16 14 34 14 51 1 4-10-1-13-5-12-25-27-49-53.674-57.697l-6.982-5.107c-5.343-5.196-12.343-6.196-18.343-11.196-15-13-25-31-44-40 13 24 25 47 40.06 69.603 1.334 2.261 2.588 4.333 3.522 5.75.418 14.647 6.418 25.647 16.418 36.647 9 10 6 26 17 32 9 5 18-4 28-7-17 10-34 19-51 29 5-2 10-5 11-8 3-21-6-43-22-58-7-7 1-15-4.488-23.066-.913-1.449-2.025-3.312-3.182-5.273-13.33-18.661-28.33-36.661-37.33-58.661-6-16-20-13-33-9 20-8 42-37 62-17 19 19 34 44 61.644 49.33a280.303 280.303 0 0 1 5.018 3.78l5.492 4.201c4.845 4.69 11.845 9.69 17.845 8.69 5-1 7-10 6.139-15.822l-.885-6.495-.89-6.535c-.304-2.23-.604-4.49-.788-6.611 3.424-28.537-5.576-54.537-15.576-81.537-8-22 24-32 38.221-46.311l.599 1.978zM1562.787 1754.554c-1.036-1.147-2.036-2.147-3.036-3.147 31-18 10-54-6.808-74.039a1756.56 1756.56 0 0 0-6.066-10.346l-17.125-29.028c-1.064-1.803-2.038-3.505-2.801-5.021-8.2-24.565-31.2-53.565-60.2-44.565 23-18 54-21 78-3-5 1-12-2-13 1-4 10 11 15 14.495 25.462 1.396 2.585 3.321 5.897 5.466 9.533l25.025 42.419c1.406 2.384 2.739 4.603 4.005 6.486 13.009 31.1 62.009 51.1 71.009 17.1 6-22-25-49 3-72-6 10-17 21-13 32 9 20 24 51 50 42-44 11-88 26-119.452 59.673-5.956 3.717-9.512 5.473-9.512 5.473z"
                    class="colorfff svgShape"></path>
                <path fill="#7e892c"
                    d="M1248.672 2123.417c-40.64 3.13-70.96 4.98-83.37 7.17-36.57 6.46-13.64-43.019 9.32-88.92 21.07-42.13 47.42-218.58 51.6-247.24.29-.56.47-.899.52-.989-.42 3.13-36.85 268.85-12.99 303.97 7.32 10.779 19.599 19.289 34.92 26.009zM1674.622 1953.237c-16.51 28.229-51.74 79.71-107.97 119.83a289.72 289.72 0 0 1-19.12 5.89c-40.3 10.931-83.24 19.23-125.35 25.641-21.05 3.21-41.9 5.949-62.09 8.31 113.44-14.911 268.26-94.622 314.53-159.671zM1685.741 1932.437c-2.27 6.689-6.04 13.649-11.12 20.8 7.221-12.34 10.86-20.241 11.12-20.8zM1337.108 1907.504c158-12.673 195.667-97.673 195.667-97.673s-38 92.167-133 110.667c0 0 21.487-3 46.868-25 0-.001-86.201 18.512-109.535 12.006z"
                    class="color7e892c svgShape"></path>
                <path fill="#ffffff"
                    d="m1383.097 1897.413 5.638-2.461 2.814-1.228 2.771-1.326 5.543-2.63 5.448-2.814 2.718-1.412 2.68-1.482 5.349-2.976 5.255-3.139 2.623-1.572 2.58-1.646c13.832-8.65 26.981-18.331 39.956-28.271 12.934-9.996 25.798-20.144 38.739-30.243 12.977-10.051 26.149-19.896 39.55-29.438 13.467-9.447 27.171-18.575 41.16-27.242 14.025-8.608 28.249-16.896 42.817-24.531 3.626-1.937 7.254-3.87 10.93-5.71 3.666-1.858 7.315-3.747 11.004-5.557 7.426-3.525 14.788-7.169 22.294-10.509 14.942-6.824 30.126-13.093 45.441-18.978-14.696 7.312-29.464 14.401-43.937 22.067-7.304 3.693-14.474 7.644-21.688 11.493-7.13 4.009-14.357 7.832-21.404 11.976-7.108 4.033-14.099 8.265-21.142 12.401l-10.441 6.41c-3.485 2.128-6.898 4.371-10.35 6.551-13.776 8.77-27.34 17.868-40.647 27.343-26.786 18.72-52.394 39.108-79.083 58.338a581.397 581.397 0 0 1-20.319 14.022l-5.214 3.318-2.607 1.657-2.646 1.6-5.291 3.194-5.379 3.051-2.698 1.506-2.741 1.432-5.481 2.853-5.567 2.684c-.93.44-1.847.907-2.789 1.323l-2.835 1.227c-7.496 3.407-15.27 6.141-23.051 8.719z"
                    class="colorfff svgShape"></path>
                <path fill="#7e892c"
                    d="M1285.995 1578.187c64.212-92.337 10.952-233.583-1.122-241.024 0 0 29.091 58.912 17.741 145.913 0 0 3.918-29.809-14.801-65.897-.001 0 29.63 99.695-1.818 161.008z"
                    class="color7e892c svgShape"></path>
            </svg>
        </p>
    </div>
</ng-template>

HTML

<!-- src/app/checkout/checkout.component.html -->

<header>
    <h3>Checkout</h3>
</header>
<main>
    <section class="checkout-form">
        <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
            <div class="form-control">
                <label for="checkout-email">E-mail</label>

                <input id="email" id="checkout-email" formControlName="email" type="email" />
                <small *ngIf="
            checkoutForm.get('email')?.invalid &&
            (checkoutForm.get('email')?.dirty ||
              checkoutForm.get('email')?.touched)
          ">
                    <span *ngIf="checkoutForm.get('email')?.errors?.['required']" class="text-red-500">Email is
                        required.</span>
                    <span *ngIf="checkoutForm.get('email')?.errors?.['email']">Enter a valid email.</span>
                </small>
            </div>

            <div class="form-control">
                <label for="phone">Phone</label>
                <input id="phone" formControlName="phone" type="text" />
                <small *ngIf="
            checkoutForm.get('phone')?.invalid &&
            (checkoutForm.get('phone')?.dirty ||
              checkoutForm.get('phone')?.touched)
          ">
                    <span *ngIf="checkoutForm.get('phone')?.errors?.['required']" class="text-red-500">Phone number is
                        required.</span>
                    <span *ngIf="checkoutForm.get('phone')?.errors?.['pattern']">Enter a valid phone number.</span>
                </small>
            </div>

            <div class="form-control">
                <label for="name">Name</label>
                <input id="name" formControlName="name" type="text" />
                <small *ngIf="
            checkoutForm.get('name')?.invalid &&
            (checkoutForm.get('name')?.dirty ||
              checkoutForm.get('name')?.touched)
          ">
                    <span *ngIf="checkoutForm.get('name')?.errors?.['required']" class="text-red-500">Full name is
                        required.</span>
                </small>
            </div>

            <div class="form-control">
                <label for="address">Address</label>
                <input id="address" formControlName="address" type="text" />
                <small *ngIf="
            checkoutForm.get('address')?.invalid &&
            (checkoutForm.get('address')?.dirty ||
              checkoutForm.get('address')?.touched)
          ">
                    <span *ngIf="checkoutForm.get('address')?.errors?.['required']" class="text-red-500">Address is
                        required.</span>
                </small>
            </div>

            <div class="form-control">
                <label for="city">City</label>
                <input id="city" formControlName="city" type="text" />
                <small *ngIf="
            checkoutForm.get('city')?.invalid &&
            (checkoutForm.get('city')?.dirty ||
              checkoutForm.get('city')?.touched)
          ">
                    <span *ngIf="checkoutForm.get('city')?.errors?.['required']" class="text-red-500">City is
                        required.</span>
                </small>
            </div>
            <div class="form-control-btn">
                <button type="submit" (click)="checkout()">Checkout</button>
            </div>
        </form>
    </section>

    <section class="checkout-details" *ngIf="cartItems.length > 0; else emptyCart">
        <div class="checkout-details-inner">
            <div class="checkout-lists" *ngFor="let item of cartItems">
                <div class="card">
                    <div class="card-image">
                        <img src="{{ item.product.imageUrl }}" alt="" />
                    </div>
                    <div class="card-details">
                        <div class="card-name">{{ item.product.name }}</div>
                        <div class="card-price">${{ item.product.price }}</div>
                        <div class="card-wheel">
                            <button (click)="decreaseQuantity(item.product.id)">-</button>
                            <span>{{ item.quantity }}</span>
                            <button (click)="increaseQuantity(item.product.id)">+</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="checkout-total">
                <h6>Total</h6>
                <p>{{ totalCost() | currency }}</p>
            </div>
        </div>
    </section>
</main>
<ng-template #emptyCart>
    <p>Your cart is empty.</p>
</ng-template>

HTML

<!-- src/app/navbar/navbar.component.html -->
 
<nav class="nav">
    <a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a>
    <a routerLink="/cart" routerLinkActive="active" ariaCurrentWhenActive="page">
        <span class="flex">
            <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAABDUlEQVR4nL3Vr0sEQRQA4NXgFbGYDCY9BJNVtGs2mhTlTDYv+ydc8A8QQdSm1wUVrCImm3IWTQaLcOWTgQ3LodzO7K0PXpiBmQ/emx9Z9h+BO/QL+YVrzI8SucVNYTyBfdyPDPktMI5XNLM6A8fYqRvZxkndyBx6tSIh8r4cop2Yw8sdyjVwvPuR+VQG2a2IHJRBmhWAb8wMRXKol4h0SwE5cpqIbMQgrQTgA40YZCEB6ZQGKvRlKQU5iwAeo4Ec2YtAWqnIIp6TFkcgY3jDbN1QB0eYrBOZxkOJnrxH3ZE/nv5lrBR7hE1cYgpX2KqKBGAVL4X58IuGzQPSrYqsh83zXCvMN3CBT5wPlusH7Uppcbq/7rkAAAAASUVORK5CYII=">
            <span>
                <sup>{{ cartService.getCartItemCount() }}</sup>
            </span>
        </span>


    </a>
</nav>

HTML

<!-- src/app/product-detail/product-detail.component.html -->

<div id="product_container">
    <section class="box" style="margin-top: 100px;">
        <div class="content" *ngIf="product">

            <div class="left">
                <div class="product_img" style="background: url('{{product.imageUrl}}') no-repeat; ">

                </div>
                <div class="product_details">
                    <h4 class="title">{{product.name}}</h4>
                    <p class="discription">{{product.description}}</p>
                    <p class="price">{{ product.price | currency }} 
                      <span class="price_original">$4000</span> <span
                            class="offer"> 79% OFF</span></p>
                    <p class="other">inclusive of all taxes</p>
                </div>
            </div>

            <div class="right">
                <div class="product_description">
                    <h4>PRODUCT DESCRIPTION</h4>
                    <p>Elevate your style with this classy pair of Casual Shoes from the house of Our brand. Featuring a
                        contemporary refined design with exceptional comfort, this pair is perfect to give your
                        quintessential dressing an upgrade.
                    </p>
                    <p><span class="highlight">Country of Origin -</span>
                        India
                    </p>


                    <p>
                        <button *ngIf="!isInCart" (click)="addToCart()" class="bg-red-700 text-white"
                            style="padding:8px">Add to Cart</button>
                        <button *ngIf="isInCart" routerLink="/cart" routerLinkActive="active"
                            ariaCurrentWhenActive="page" class="bg-green-700 text-white" style="padding:8px">Go to
                            Cart</button>
                    </p>

                </div>
            </div>

        </div>
    </section>
</div>

HTML

<!-- src/app/product-list/product-list.component.html-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
    integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="p-24">
    <div class="search-sort-bar pl-5 flex justify-start gap-4">
        <div>
            <input type="text" [(ngModel)]="searchQuery" placeholder="Search products" 
                   class="p-2 border rounded"
                (input)="searchProducts()" />
        </div>
        <div>
            <select [(ngModel)]="sortCriteria" class="p-2 border rounded ml-2" (change)="sortProducts()">
                <option value="name">Sort by Name</option>
                <option value="priceAsc">Sort by Price: Low to High</option>
                <option value="priceDesc">Sort by Price: High to Low</option>
            </select>
        </div>
    </div>

    <div class="container">
        <ng-container *ngIf="filteredProducts.length > 0; else noProducts">
            <div class="card" *ngFor="let product of filteredProducts">
                <div class="imgBx">
                    <img [src]="product.imageUrl" alt="" />
                    <ul class="action">
                        <li>
                            <i class="fa fa-eye">
                                <a [routerLink]="['/product', product.id]">
                                    View Details
                                </a>
                            </i>
                        </li>
                    </ul>
                </div>
                <div class="content">
                    <div class="productName">{{ product.name }}</div>
                    <div class="price-rating">
                        <h2>${{ product.price }}</h2>
                        <div class="rating">
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa fa-star" aria-hidden="true"></i>
                            <i class="fa grey fa-star" aria-hidden="true"></i>
                        </div>
                    </div>
                </div>
            </div>
        </ng-container>

    </div>
</div>

<ng-template #noProducts>
    <div>
        <div class="flex  justify-center items-center ">
            <span>No product found!!!</span>
        </div>
        <div class="flex  justify-center">

            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" width="350" height="350">
                <circle cx="1006.34" cy="1001.75" r="800" fill="#e6e9f6" class="colore6e9f6 svgShape"></circle>
                <path fill="#6d7aa7"
                    d="m1601.47,1536.37H411.22c146.45,162.92,358.82,265.38,595.12,265.38s448.68-102.47,595.13-265.38Z"
                    class="color6d7aa7 svgShape"></path>
                <rect width="62.88" height="163.23" x="887.26" y="1092.45" fill="#ffffff" rx="31.44" ry="31.44"
                    class="colorfff svgShape"></rect>
                <path fill="#3b4573"
                    d="m817.73,1558.34h-375.06c-15.58,0-27.72-11.82-26.04-25.36l40.38-325.16c1.44-11.62,12.67-20.42,26.04-20.42h294.29c13.37,0,24.59,8.8,26.04,20.42l40.38,325.16c1.68,13.54-10.45,25.36-26.04,25.36Z"
                    class="color3b4573 svgShape"></path>
                <path fill="#6d7aa7"
                    d="m767.22,1558.34h-327.85c-13.62,0-24.23-11.82-22.76-25.36l35.3-325.16c1.26-11.62,11.07-20.42,22.76-20.42h257.25c11.69,0,21.5,8.8,22.76,20.42l35.3,325.16c1.47,13.54-9.14,25.36-22.76,25.36Z"
                    class="color6d7aa7 svgShape"></path>
                <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                    d="m694.41,1300.3v60.22c0,45.62-36.99,82.61-82.61,82.61h0c-45.62,0-82.61-36.99-82.61-82.61v-60.91"
                    class="colorStroke3b4573 svgStroke"></path>
                <rect width="86.27" height="313.48" x="944" y="1083.05" fill="#6d7aa7" rx="37.68" ry="37.68"
                    class="color6d7aa7 svgShape"></rect>
                <path fill="#3b4573"
                    d="m1030.27,1358.85v-34.46c-40-13.2-73.16-4.9-86.27.57v33.89c0,.36.02.72.03,1.08,7.25,19.41,15.09,13.38,15.09,13.38l65.59,5.25c3.53-5.73,5.56-12.48,5.56-19.71Z"
                    class="color3b4573 svgShape"></path>
                <path fill="#6d7aa7"
                    d="m1252.2,1559.17c-23.28-125.25-133.11-220.08-265.11-220.08s-241.82,94.84-265.11,220.08h530.22Z"
                    class="color6d7aa7 svgShape"></path>
                <path fill="#ffffff"
                    d="m721.98,1559.17h530.22c-2.87-15.46-7.07-30.45-12.46-44.85h-505.3c-5.39,14.41-9.58,29.4-12.46,44.85Z"
                    class="colorfff svgShape"></path>
                <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                    d="m953.91,1380.46s-81.34.43-140.33,114.21" class="colorStroke3b4573 svgStroke"></path>
                <circle cx="1034.58" cy="748.72" r="387.99" fill="#c3cae5" class="colorc3cae5 svgShape"></circle>
                <path fill="#9fa9cf"
                    d="m823.78,436.37c-38.79,28.4-72.11,63.82-98.08,104.4,28.47-11.56,59.6-17.94,92.22-17.94,135.52,0,245.39,109.86,245.39,245.39s-109.86,245.39-245.39,245.39c-18.98,0-37.45-2.16-55.19-6.24,31.83,35.79,70.19,65.66,113.22,87.72,155.66-27.44,273.91-163.34,273.91-326.87,0-181.36-145.45-328.73-326.07-331.86Z"
                    class="color9fa9cf svgShape"></path>
                <ellipse cx="1112.07" cy="427.48" fill="#6d7aa7" rx="34.87" ry="87.47"
                    transform="rotate(-78.09 1112.082 427.479)" class="color6d7aa7 svgShape"></ellipse>
                <rect width="62.88" height="194.58" x="1110.74" y="234.12" fill="#ffffff" rx="27.46" ry="27.46"
                    transform="rotate(17.45 1141.937 331.296)" class="colorfff svgShape"></rect>
                <path fill="#9fa9cf"
                    d="m1075.73,1290.6c-54.26,0-107.84-8.03-159.24-23.87-20.24-6.24-31.59-27.7-25.35-47.94,6.24-20.24,27.7-31.59,47.94-25.35,44.08,13.58,90.06,20.47,136.66,20.47,62.57,0,123.26-12.25,180.36-36.4,55.18-23.34,104.74-56.75,147.31-99.32,42.57-42.57,75.99-92.13,99.32-147.31,24.15-57.1,36.4-117.79,36.4-180.36,0-55.25-9.61-109.27-28.57-160.59-18.32-49.58-44.87-95.4-78.91-136.18-68.47-82.01-163.58-138.22-267.83-158.27-20.8-4-34.41-24.1-30.41-44.9,4-20.8,24.11-34.42,44.9-30.41,121.57,23.38,232.45,88.88,312.22,184.43,39.67,47.52,70.61,100.93,91.98,158.75,22.11,59.85,33.32,122.82,33.32,187.16,0,72.89-14.29,143.63-42.46,210.24-27.2,64.32-66.14,122.07-115.73,171.66-49.59,49.59-107.34,88.52-171.66,115.73-66.61,28.17-137.34,42.46-210.24,42.46Z"
                    class="color9fa9cf svgShape"></path>
                <g>
                    <circle cx="858.74" cy="210.02" r="145.47" fill="#6d7aa7" class="color6d7aa7 svgShape"></circle>
                    <path fill="#ffffff"
                        d="m855.16,260.15c-2.27,0-4.01-.74-5.23-2.22-1.22-1.48-1.83-3.53-1.83-6.15,0-6.1.74-11.81,2.22-17.13,1.48-5.32,3.83-10.77,7.06-16.35,3.22-5.58,7.63-11.6,13.21-18.05,4.36-5.23,7.85-9.85,10.46-13.86,2.62-4.01,4.49-7.89,5.62-11.64,1.13-3.75,1.7-7.54,1.7-11.38,0-7.32-2.62-13.12-7.85-17.39-5.23-4.27-12.47-6.41-21.71-6.41-8.02,0-15.39,1.18-22.1,3.53-6.72,2.35-13.21,5.89-19.49,10.59-2.62,1.75-5.01,2.62-7.19,2.62s-3.97-.61-5.36-1.83c-1.4-1.22-2.31-2.79-2.75-4.71-.44-1.92-.18-3.92.78-6.02.96-2.09,2.66-4.01,5.1-5.75,6.8-5.4,14.82-9.68,24.06-12.82,9.24-3.14,18.57-4.71,27.99-4.71,9.94,0,18.7,1.7,26.29,5.1,7.59,3.4,13.47,8.2,17.66,14.39,4.19,6.19,6.28,13.47,6.28,21.84,0,5.41-.78,10.59-2.35,15.56-1.57,4.97-4.05,9.98-7.45,15.04-3.4,5.06-8.15,10.81-14.26,17.26-5.41,5.58-9.77,10.77-13.08,15.56-3.31,4.8-5.8,9.42-7.46,13.86-1.66,4.45-2.75,9.11-3.27,13.99-.18,2.09-.87,3.79-2.09,5.1-1.22,1.31-2.88,1.96-4.97,1.96Zm-.26,48.13c-4.36,0-7.89-1.35-10.59-4.05-2.71-2.7-4.05-6.15-4.05-10.33s1.35-7.63,4.05-10.33c2.7-2.7,6.23-4.05,10.59-4.05s7.8,1.35,10.33,4.05c2.53,2.71,3.79,6.15,3.79,10.33s-1.27,7.63-3.79,10.33c-2.53,2.71-5.97,4.05-10.33,4.05Z"
                        class="colorfff svgShape"></path>
                </g>
                <g>
                    <path fill="#9fa9cf"
                        d="m196.61,550.67h358.03s76.04-21.12,73.93-99.28c-2.11-78.15-87.66-83.43-87.66-83.43,0,0-57.03-137.3-177.43-117.23-120.4,20.07-134.09,102.57-134.09,102.57,0,0-113.72,6.67-109.88,98.1,3.85,91.43,77.1,99.28,77.1,99.28Z"
                        class="color9fa9cf svgShape"></path>
                    <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                        d="M259.99 445.8s-41.73-28.74-30.6-92.5M446.13 430.99s24.93-71.31 94.78-63.03"
                        class="colorStroke3b4573 svgStroke"></path>
                </g>
                <g>
                    <path fill="#c3cae5"
                        d="m1517.83,959.34h297.04s63.09-17.52,61.34-82.37c-1.75-64.84-72.73-69.22-72.73-69.22,0,0-47.32-113.91-147.21-97.26-99.89,16.65-111.25,85.09-111.25,85.09,0,0-94.35,5.53-91.16,81.39,3.19,75.86,63.96,82.37,63.96,82.37Z"
                        class="colorc3cae5 svgShape"></path>
                    <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                        d="M1570.42 872.33s-34.62-23.85-25.39-76.74M1724.85 860.05s18.27-50.5 78.63-52.29"
                        class="colorStroke3b4573 svgStroke"></path>
                </g>
                <g>
                    <path fill="#6d7aa7"
                        d="m1346.11,1399.16h243.22c9.97,0,17.28-9.89,14.83-20.08l-18.05-75.07c-2.29-9.54-10.44-16.22-19.78-16.22h-243.22c-9.97,0-17.28,9.89-14.83,20.08l18.05,75.07c2.29,9.54,10.44,16.22,19.78,16.22Z"
                        class="color6d7aa7 svgShape"></path>
                    <rect width="376.84" height="277.2" x="1204.55" y="1287.22" fill="#3b4573" rx="20" ry="20"
                        class="color3b4573 svgShape"></rect>
                    <rect width="264.47" height="275.22" x="1204.55" y="1289.2" fill="#6d7aa7" rx="20" ry="20"
                        class="color6d7aa7 svgShape"></rect>
                    <path fill="#3b4573"
                        d="m1443.43,1420.85c10.28,0,19.25-9.11,21.77-22.11l4.39-22.61v-66.93c0-11.05-8.95-20-20-20h-225.04c-11.05,0-20,8.95-20,20v111.65h238.88Z"
                        class="color3b4573 svgShape"></path>
                    <path fill="#6d7aa7"
                        d="m1424.78,1399.13h-243.22c-9.97,0-17.28-9.89-14.83-20.08l18.05-75.07c2.29-9.54,10.44-16.22,19.78-16.22h243.22c9.97,0,17.28,9.89,14.83,20.08l-18.05,75.07c-2.29,9.54-10.44,16.22-19.78,16.22Z"
                        class="color6d7aa7 svgShape"></path>
                </g>
                <g>
                    <path fill="#9fa9cf"
                        d="m1004.73,1612.12c96.69,55.53,122.69,156.55,127.54,180.05,34.61-5.47,68.48-13.15,101.46-22.91-54.46-114.66-168.3-153.68-225.43-166.36-5.6-1.24-8.55,6.36-3.57,9.21Z"
                        class="color9fa9cf svgShape"></path>
                    <path fill="#c3cae5"
                        d="m1155.85,1788.09c-68.72-115.6-200.83-136.89-261.82-140.36-5.66-.32-7.4,7.57-2.12,9.64,98.46,38.53,143.02,117.17,155.65,143.63,36.81-1.87,72.96-6.23,108.29-12.91Z"
                        class="colorc3cae5 svgShape"></path>
                    <path fill="#c3cae5"
                        d="m1127.44,1792.94c39.03-5.92,77.13-14.68,114.09-26.02-11.59-111.12,53.4-236.53,76.28-276.68,2.41-4.22-2.03-9.04-6.44-7.02-165.32,75.84-182.23,267.16-183.93,309.72Z"
                        class="colorc3cae5 svgShape"></path>
                    <path fill="#9fa9cf"
                        d="m1221.52,1772.77c34.13-9.51,67.34-21.21,99.48-34.97-.31-74.94,97.41-228.22,125.86-271.24,2.61-3.94-1.22-8.98-5.72-7.51-166.08,54.26-212.82,276.08-219.62,313.73Z"
                        class="color9fa9cf svgShape"></path>
                    <path fill="#c3cae5"
                        d="m1303.12,1743.58s59.93-171.57,108.11-199.78c0,0,71.68,36.43,76.38,75.21,3.55,29.27-2.28,115.45-5.35,155.96-.4,5.29-7.68,6.39-9.63,1.46l-59.05-149.19-18,72.49c-31.06,18.02-61.92,33.15-92.46,43.85Z"
                        class="colorc3cae5 svgShape"></path>
                </g>
                <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                    d="m1419.6,1606.92s-7.04,12.13-6.02,20.32" class="colorStroke3b4573 svgStroke"></path>
                <g>
                    <ellipse cx="961.3" cy="728.4" fill="#ffffff" stroke="#fff" stroke-miterlimit="10" stroke-width="12"
                        rx="57.29" ry="73.77" class="colorfff svgShape colorStrokefff svgStroke"></ellipse>
                    <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                        d="m1059.12,669.36s-84.76,5.79-120.04-42.12" class="colorStroke3b4573 svgStroke"></path>
                    <path fill="#3b4573" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="12"
                        d="m961.3,802.17c8.15,0,15.89-2.21,22.91-6.16,7.34-11.79,11.75-26.76,11.75-43.05,0-.73-.03-1.46-.04-2.19l-29.85-12.16,21.82-22.02c-9.44-19.52-26.25-32.51-45.42-32.51-12.91,0-24.75,5.89-33.99,15.7-2.88,8.8-4.47,18.47-4.47,28.62,0,40.74,25.65,73.77,57.29,73.77Z"
                        class="color3b4573 svgShape colorStroke3b4573 svgStroke"></path>
                    <ellipse cx="737.7" cy="728.4" fill="#ffffff" stroke="#fff" stroke-miterlimit="10" stroke-width="12"
                        rx="57.29" ry="73.77" class="colorfff svgShape colorStrokefff svgStroke"></ellipse>
                    <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                        d="m656.59,664.73s84.76,5.79,120.04-42.12" class="colorStroke3b4573 svgStroke"></path>
                    <path fill="#3b4573" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="12"
                        d="m737.7,802.17c8.15,0,15.89-2.21,22.91-6.16,7.34-11.79,11.75-26.76,11.75-43.05,0-.73-.03-1.46-.04-2.19l-29.85-12.16,21.82-22.02c-9.44-19.52-26.25-32.51-45.42-32.51-12.91,0-24.75,5.89-33.99,15.7-2.88,8.8-4.47,18.47-4.47,28.62,0,40.74,25.65,73.77,57.29,73.77Z"
                        class="color3b4573 svgShape colorStroke3b4573 svgStroke"></path>
                    <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                        d="M860.56 756.64s-60.54-6.39-58.84 29.44c1.7 35.83 64.64 22.73 64.64 22.73M987.65 890.94s-79.11-94.69-198.98-13.19M771.67 855.04s28.56 22.85 3.26 46.51M1007.18 873.16s-30.41 11.84-16.69 47.38M931.39 906.55s-37.39-30.94-88.95-2.58"
                        class="colorStroke3b4573 svgStroke"></path>
                    <path fill="#ffffff"
                        d="m1145.36,940.44s76.86,98.8,58.26,150.4l3.42,4,58.75,64.27s93.34-205.64-80.41-338.72l-40.01,120.04Z"
                        class="colorfff svgShape"></path>
                    <path fill="#3b4573"
                        d="m1205.85,1081.81c-.47,3.14-1.2,6.16-2.23,9.03l3.42,4,58.75,64.27s7-15.43,13.6-40.58c-35.86-32.62-63.15-36.59-73.54-36.73Z"
                        class="color3b4573 svgShape"></path>
                    <path fill="#ffffff"
                        d="m424.45,764.86s9.77,69.12,121.65,105.86l69.26,118.82s-207.04,60.03-287.2-250.58l96.29,25.9Z"
                        class="colorfff svgShape"></path>
                    <path fill="#3b4573"
                        d="m424.45,764.86l-96.29-25.9c1.57,6.1,3.2,12.04,4.87,17.86,14.11,11.49,45.08,29.12,94.36,18.52-2.38-6.52-2.95-10.49-2.95-10.49Z"
                        class="color3b4573 svgShape"></path>
                    <g>
                        <rect width="121.7" height="429.13" x="1028.98" y="966.3" fill="#9fa9cf" rx="53.16" ry="53.16"
                            transform="rotate(-38.34 1089.814 1180.854)" class="color9fa9cf svgShape"></rect>
                        <rect width="166.94" height="63.14" x="959.29" y="1091.62" fill="#6d7aa7" rx="15.74" ry="15.74"
                            transform="rotate(-38.03 1042.826 1123.216)" class="color6d7aa7 svgShape"></rect>
                        <path fill="#6d7aa7"
                            d="m859.76,435.38c-183.32,0-331.93,148.61-331.93,331.93s148.61,331.93,331.93,331.93,331.93-148.61,331.93-331.93-148.61-331.93-331.93-331.93Zm0,577.32c-135.52,0-245.39-109.86-245.39-245.39s109.86-245.39,245.39-245.39,245.39,109.86,245.39,245.39-109.86,245.39-245.39,245.39Z"
                            class="color6d7aa7 svgShape"></path>
                        <path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                            d="m802.58,482.83s161.38-41.18,257.09,75.68" class="colorStrokefff svgStroke"></path>
                        <ellipse cx="1098.27" cy="603.11" fill="#ffffff" stroke="#fff" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="12" rx="14.59" ry="36.92"
                            transform="rotate(-26.9 1098.118 603.068)"
                            class="colorfff svgShape colorStrokefff svgStroke"></ellipse>
                    </g>
                    <g>
                        <path fill="#6d7aa7"
                            d="m1196.98,1085.1s69.55,10.6,80.49,68.1c0,0,3.9,15.92-13.8,24.44-17.7,8.52-74.89-59.12-74.89-59.12,0,0-11.23-28.25,8.2-33.42Z"
                            class="color6d7aa7 svgShape"></path>
                        <path fill="#6d7aa7"
                            d="m1118.71,1133.36l-43.56-38.57c-10.52-9.31-10.55-25.72-.06-35.07h0c8.23-7.34,20.47-7.95,29.39-1.47l65,47.23s16.16-6.98,29.28,3c13.12,9.98,82.6,60.64,71.21,121.53-11.39,60.89-40.76,27.85-56.11,49.46-8.13,11.45-16.66,33.91-22.89,52.52-5.25,15.68-23.13,23.11-37.94,15.75h0c-12.59-6.25-18.36-21.06-13.3-34.18l16.33-42.4-35.52,27.37c-13.02,10.03-31.73,7.46-41.55-5.72h0c-8.81-11.81-7.52-28.32,3.01-38.62l15.74-17.96-26.35,17.12c-12.28,5.34-26.61.74-33.51-10.74h0c-7.39-12.31-5.08-28.11,5.52-37.79l75.29-71.46Z"
                            class="color6d7aa7 svgShape"></path>
                        <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="12" d="m1153.75,1184.89s-42.13,37.05-60.18,54.77"
                            class="colorStroke3b4573 svgStroke"></path>
                        <line x1="1188.31" x2="1156.07" y1="1225.7" y2="1271.16" fill="none" stroke="#3b4573"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
                            class="colorStroke3b4573 svgStroke"></line>
                    </g>
                    <g>
                        <path fill="#6d7aa7"
                            d="m424.45,764.86s-85.35,14.04-110.19-46.45c0,0-8.93-8.65,20.54-28.78,0,0-33.79-58.96-5.03-112.16,28.76-53.21,59.68-51.77,59.68-51.77,0,0-2.72-13.16,11.34-14.52,0,0-.45-17.69,18.15-22.23,13.29-3.24,56.89-15.51,80.73-22.25,9.95-2.82,20.64-.48,28.51,6.23l66.83,56.94c12.08,10.29,13.71,28.35,3.68,40.64h0c-8.35,10.23-22.53,13.58-34.57,8.15l-57.16-25.74,3.63,53.53,48.09,4.08s15.88,15.88,1.81,53.53c-14.06,37.66-69.41,42.65-69.41,42.65,0,0-.45,17.24-51.27,32.67,0,0-.76,23.29-15.35,25.48Z"
                            class="color6d7aa7 svgShape"></path>
                        <path fill="none" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="12"
                            d="M497.79 523.35s3.34 23.31 13.46 31.44M417.05 730.72s-55.52-5.15-82.25-41.09"
                            class="colorStroke3b4573 svgStroke"></path>
                        <path fill="#6d7aa7" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="12"
                            d="m368.55,589.78l17.38,6.87c4.6,1.82,8.32,5.33,10.4,9.81l16.57,35.64c5.71,12.28,20.43,17.42,32.54,11.36h0c10.34-5.17,15.53-16.96,12.37-28.08l-12.7-44.6c-2.67-9.36-8.21-17.65-15.86-23.68l-39.82-31.42"
                            class="color6d7aa7 svgShape colorStroke3b4573 svgStroke"></path>
                        <path fill="#6d7aa7" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="12"
                            d="m533.77,661.76s-51.37,18.29-78.95-15.67c-11.72-15.74-7.32-38.99,15.94-37.09"
                            class="color6d7aa7 svgShape colorStroke3b4573 svgStroke"></path>
                        <path fill="#6d7aa7" stroke="#3b4573" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="12"
                            d="m402.09,511.3s91.69-1.81,104.85,41.62l2.93,42.94c.93,13.59-9.39,25.33-22.98,26.16h0c-10.75.65-20.68-5.78-24.46-15.87l-7.77-20.72c-2.87-12.75-2.24-10.85-2.24-10.85"
                            class="color6d7aa7 svgShape colorStroke3b4573 svgStroke"></path>
                    </g>
                </g>
                <g>
                    <path fill="#9fa9cf"
                        d="m478.21,1603.03c29.25,25.71,60.38,49.31,93.17,70.59-1.56-36.74.25-152.87,76.41-240.49,3.48-4-.85-9.96-5.72-7.88-40.58,17.33-130.74,67.18-163.86,177.78Z"
                        class="color9fa9cf svgShape"></path>
                    <path fill="#c3cae5"
                        d="m419.87,1546.29c36.52,39.31,76.94,74.93,120.64,106.27,5.45-66.66,2.04-202.22-91.38-322.57-3.23-4.16-9.85-1.19-8.88,3.99,8.06,42.71,20.93,143.82-20.39,212.31Z"
                        class="colorc3cae5 svgShape"></path>
                    <path fill="#9fa9cf"
                        d="m528.35,1591.39c4.08,10.99,11.14,32.91,16,63.9,30.96,21.93,63.54,41.71,97.54,59.13-2.72-40.27-19.99-113.5-107.91-129.68-3.83-.71-6.99,2.99-5.63,6.65Z"
                        class="color9fa9cf svgShape"></path>
                    <path fill="#c3cae5"
                        d="m590.26,1685.5c28.87,17.61,58.96,33.43,90.08,47.34,14.23-106.47,97.24-219.95,123.81-253.98,2.85-3.66-.39-8.9-4.94-7.98-131.44,26.51-191.8,166.3-208.96,214.63Z"
                        class="colorc3cae5 svgShape"></path>
                    <path fill="#9fa9cf"
                        d="m438.65,1565.82c-4.03-77.35-31.24-257.18-200.49-347.61l-63.09,7.95c-15.47,2.09-29.19,11.01-37.37,24.31l-80.05,130.18c-2.81,4.57,2.56,9.75,7.03,6.78l157.26-104.57c9.28-6.17,21.62-5.2,29.7,2.47,3.99,3.79,8.13,8.48,11.59,14.01,40.29,100.51,100.35,190.95,175.41,266.49Z"
                        class="color9fa9cf svgShape"></path>
                </g>
            </svg>

        </div>

    </div>
</ng-template>

HTML

<!-- src/app/app.component.html -->

<app-navbar></app-navbar>
<router-outlet></router-outlet>

CSS

/* src/app/cart/cart.component.css  */

table,
th,
td {
    border: 1px dashed rgb(167, 167, 167);
    border-collapse: collapse;

}

th {
    color: white;
    background-color: rgb(4, 4, 122);
    padding: 10px;
}

td {
    text-align: center;
}

CSS

/* src/app/checkout/checkout.component.css */

main {
    height: 85%;
    display: flex;
    column-gap: 100px;
    padding: 80px;

    .checkout-form {
        width: 50%;

        form {

            h6 {
                font-size: 12px;
                font-weight: 500;
            }

            .form-control {
                margin: 10px 0px;
                position: relative;

                label:not([for="checkout-checkbox"]) {
                    display: block;
                    font-size: 10px;
                    font-weight: 500;
                    margin-bottom: 2px;
                }

                input:not([type="checkbox"]) {
                    width: 100%;
                    padding: 10px 10px 10px 40px;
                    border-radius: 10px;
                    outline: none;
                    border: .2px solid #4e515085;
                    font-size: 12px;
                    font-weight: 700;

                    &::placeholder {
                        font-size: 10px;
                        font-weight: 500;
                    }
                }

                label[for="checkout-checkbox"] {
                    font-size: 9px;
                    font-weight: 500;
                    line-height: 10px;
                }

                >div {
                    position: relative;

                    span.fa {
                        position: absolute;
                        top: 50%;
                        left: 0%;
                        transform: translate(15px, -50%);
                    }
                }
            }

            .form-group {
                display: flex;
                column-gap: 25px;
            }

            .checkbox-control {
                display: flex;
                align-items: center;
                column-gap: 10px;
            }

            .form-control-btn {
                display: flex;
                align-items: center;
                justify-content: flex-end;

                button {
                    padding: 10px 25px;
                    font-size: 10px;
                    color: #fff;
                    background: #F2994A;
                    border: 0;
                    border-radius: 7px;
                    letter-spacing: .5px;
                    font-weight: 200;
                    cursor: pointer;
                }
            }
        }
    }

    .checkout-details {
        width: 40%;

        .checkout-details-inner {
            background: #F2F2F2;
            border-radius: 10px;
            padding: 20px;


            .checkout-lists {
                display: flex;
                flex-direction: column;
                row-gap: 15px;
                margin-bottom: 40px;

                .card {
                    width: 100%;
                    display: flex;
                    column-gap: 15px;

                    .card-image {
                        width: 35%;

                        img {
                            width: 100%;
                            object-fit: fill;
                            border-radius: 10px;
                        }
                    }

                    .card-details {
                        display: flex;
                        flex-direction: column;

                        .card-name {
                            font-size: 12px;
                            font-weight: 500;
                        }

                        .card-price {
                            font-size: 10px;
                            font-weight: 500;
                            color: #F2994A;
                            margin-top: 5px;

                            span {
                                color: #4E5150;
                                text-decoration: line-through;
                                margin-left: 10px;
                            }
                        }

                        .card-wheel {
                            margin-top: 17px;
                            border: .2px solid #4e515085;
                            width: 90px;
                            padding: 8px 8px;
                            border-radius: 10px;
                            font-size: 12px;
                            display: flex;
                            justify-content: space-between;

                            button {
                                background: #E0E0E0;
                                color: #828282;
                                width: 15px;
                                height: 15px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border: 0;
                                cursor: pointer;
                                border-radius: 3px;
                                font-weight: 500;
                            }
                        }
                    }
                }
            }

            .checkout-shipping,
            .checkout-total {
                display: flex;
                font-size: 16px;
                padding: 5px 0px;
                border-top: 1px solid #BDBDBD;
                justify-content: space-between;

                p {
                    font-size: 10px;
                    font-weight: 500;
                }
            }
        }
    }
}

CSS

/* src/app/navbar/navbar.component.css */

.nav {
    background: #002447;
    position: fixed;
    z-index: 20;
    width: -webkit-fill-available;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: baseline
}

nav a {
    color: white;
    margin-right: 10px;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

CSS

/*src/app/product-detail/product-detail.component.css */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kablammo&display=swap");

* {
    margin: 0;
    padding: 0;
    font-family: "Nunito", sans-serif;
}

::root {
    --color1: #53d3d1;
    --color2: #002447;
    --color3: #fbeceb;
    --color4: #feb249;
}

#product_container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    margin-bottom: 10rem;
}

section {
    background: #fbeceb;
    width: 700px;
    border-radius: 5px;
}

.content {
    display: flex;
    justify-content: space-between;
}

/* Left Side:Start */
.left {
    display: block;
    height: fit-content;
    min-width: 250px;
}

.left .product_img {
    height: 250px;
    width: 230px;
    margin: 10px;
    border-radius: 5px;

    /* background: url("https://i.postimg.cc/X799Yjd4/product-1.jpg") no-repeat; */
    background-position: center;
    background-size: cover;
}

.product_details {
    text-align: left;
    margin: 0 10px 10px;
    padding: 5px;
}

.product_details .title {
    font-size: 1.3em;
    color: rgb(99, 99, 99);
    font-weight: 900;
}

.product_details .discription {
    margin-top: 2px;
    font-size: 0.8em;
    color: gray;
}

.product_details .price {
    margin-top: 4px;
    font-size: 1.1em;
    font-weight: 600;
    white-space: pre;
}

.product_details .price span {
    font-weight: 500;
}

.product_details .price .price_original {
    text-decoration: line-through;
    font-size: 0.7em;
    font-weight: 400;
    color: gray;
}

.product_details .price .offer {
    color: #03ac13;
    font-weight: 600;
}

.product_details .other {
    font-size: 0.8em;
    color: grey;
}

/* Left Side:End */

/* Right Side:Start */
.right {
    display: block;
}

.right .product_description {
    text-align: left;
    margin: 30px 20px;
}

.product_description h4 {
    font-size: 0.9em;
    font-weight: 900;
    margin-bottom: 20px;
}

.product_description p {
    font-size: 0.8em;
    color: grey;
    margin-bottom: 15px;
}

.product_description .highlight {
    color: rgb(99, 99, 99);
    font-weight: 900;
}

.product_description .special {
    font-size: 0.85em;
}

/* Right Side:End */

/* Responsiveness:Start */
@media screen and (min-width: 320px) and (max-width: 480px) {
    .content {
        display: flex;
        flex-direction: column;
        width: 100vw;
        border-radius: 0px;
    }

    section {
        width: 100% !important;
    }

    .product_img {
        width: calc(100vw - 6%) !important;
        height: 350px !important;
    }

    h4.title {
        font-size: 1em !important;
    }

    p {
        width: 90%;
    }

    p.discription {
        font-size: 0.7em !important;
    }

    p.other {
        font-size: 0.7em !important;
    }
}

/* Responsiveness:End */

CSS

/* src/app/product-list/product-list.component.css */

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

* {
    margin: 0;

    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}



.container {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    grid-gap: 20px;
    padding: 20px;
}

.container .card {
    width: 100%;
    background: #fff;
}

.container .card .imgBx {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.container .card .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease-in-out;
    transform-origin: right;
}

.container .card:hover .imgBx img {
    transform: scale(1.5);
}

.container .card .content {
    padding: 10px;
}

.container .card .content .productName h3 {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 5px 0;
}

.container .card .content .price-rating {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container .card .content .price-rating h2 {
    font-size: 20px;
    color: #ff2020;
    font-weight: 500;
}

.container .card .content .price-rating .fa {
    color: #ffd513;
    cursor: pointer;
}

.container .card .content .price-rating .fa.grey {
    color: #ccc;
}

.action {
    position: absolute;
    top: 10px;
    right: 10px;
}

.action li {
    position: relative;
    list-style: none;
    width: 40px;
    height: 40px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px;
    cursor: pointer;
    transition: 0.5s;
    transform: translateX(60px);
}


.action li a {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(-20px);
    white-space: nowrap;
    padding: 4px 6px;
    background: #fff;
    color: #333;
    font-weight: 500;
    font-size: 12px;
    border-radius: 4px;

    opacity: 0;
    transition: 0.5s;
}

.action li:hover a {
    transform: translateY(-50%) translateX(0px);
    opacity: 1;
}

.action li a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.container .card:hover .action li {
    transform: translateX(0px);
}

.action li:hover {
    background: #ff2020;
    color: #fff;
}

JavaScript

// src/app/cart/cart.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { CartService } from '../services/cart.service';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';

@Component({
    selector: 'app-cart',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
    cartItems: any[] = [];

    constructor(
        private productService: ProductService,
        private cartService: CartService,
        private router: Router
    ) { }

    ngOnInit(): void {
        this.loadCartItems();
    }

    private loadCartItems(): void {
        const cart = this.cartService.getItems();
        this.cartItems = [];

        cart.forEach(([productId, quantity]) => {
            this.productService.getProduct(productId).subscribe((product) => {
                this.cartItems.push({ product, quantity });
            });
        });
    }
    increaseQuantity(productId: string): void {
        this.cartService.addItem(productId);
        this.updateCart();
    }

    decreaseQuantity(productId: string): void {
        this.cartService.decreaseItem(productId);
        this.updateCart();
    }

    removeFromCart(productId: string): void {
        this.cartService.removeItem(productId);
        this.cartItems = this.cartItems.filter(item => item.product.id !== productId);
    }

    clearCart(): void {
        this.cartService.clearCart();
        this.cartItems = [];
    }

    get items(): any[] {
        return this.cartService.getItems();
    }

    totalCost(): number {
        return this.cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0);
    }

    checkout(): void {

        this.router.navigate(['/checkout']);
    }

    hasItems(): boolean {
        return this.cartItems.length > 0;
    }
    private updateCart(): void {
        const cart = this.cartService.getItems();
        this.cartItems = [];
        cart.forEach(([productId, quantity]) => {
            this.productService.getProduct(productId).subscribe((product) => {
                this.cartItems.push({ product, quantity });
            });
        });
    }
}

JavaScript

// src/app/checkout/checkout.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { CartService } from '../services/cart.service';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';

@Component({
    selector: 'app-checkout',
    standalone: true,
    imports: [CommonModule, ReactiveFormsModule, FormsModule],
    templateUrl: './checkout.component.html',
    styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
    cartItems: any[] = [];
    total: number = 0;
    checkoutForm: FormGroup;

    constructor(
        private productService: ProductService,
        private cartService: CartService,
        private router: Router,
        private fb: FormBuilder,
    ) {
        this.checkoutForm = this.fb.group({
            email: ['', [Validators.required, Validators.email]],
            phone: ['', [Validators.required, Validators.pattern(/^(\+\d{1,3}[- ]?)?\d{10}$/)]],
            name: ['', Validators.required],
            address: ['', Validators.required],
            city: ['', Validators.required]
        });
    }

    ngOnInit(): void {
        this.loadCartItems();
    }

    private loadCartItems(): void {
        const cart = this.cartService.getItems();
        this.cartItems = [];

        cart.forEach(([productId, quantity]) => {
            this.productService.getProduct(productId).subscribe((product) => {
                this.cartItems.push({ product, quantity });
                this.total += product.price * quantity;
            });
        });
    }

    increaseQuantity(productId: string): void {
        this.cartService.addItem(productId);
        this.updateCart();
    }

    decreaseQuantity(productId: string): void {
        this.cartService.decreaseItem(productId);
        this.updateCart();
    }

    private updateCart(): void {
        const cart = this.cartService.getItems();
        this.cartItems = [];
        cart.forEach(([productId, quantity]) => {
            this.productService.getProduct(productId).subscribe((product) => {
                this.cartItems.push({ product, quantity });
            });
        });
    }

    totalCost(): number {
        return this.cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0);
    }

    onSubmit() {
        if (this.checkoutForm.valid) {
            // Handle successful form submission
            console.log('Form Submitted', this.checkoutForm.value);
            // Clear cart and redirect to home
            this.cartService.clearCart();
            this.cartItems = [];
            this.total = 0;
            alert('Checkout complete. Thank you for your purchase!');

            this.router.navigate(['/']);
        } else {
            // Handle form validation errors
            console.log('Form is invalid');
            alert("Form data is invalid");
        }
    }

    checkout(): void {
        // Placeholder for potential checkout logic
    }
}

JavaScript

// src/app/navbar/navbar.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { CartService } from '../services/cart.service';

@Component({
    selector: 'app-navbar',
    standalone: true,
    imports: [CommonModule, RouterModule, RouterOutlet, RouterLink, RouterLinkActive],
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
    cartItemCount: number = 0;

    constructor(public cartService: CartService) { }

    ngOnInit(): void {
        this.cartService.getCartItemsObservable().subscribe(items => {
            this.cartItemCount = Array.from(items.values()).reduce((sum, quantity) => sum + quantity, 0);
        });
    }
}

JavaScript

// src/app/product-detail/product-detail.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from '../services/product.service';
import { CartService } from '../services/cart.service';
import { CommonModule } from '@angular/common';
import {
    RouterModule,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
} from '@angular/router';

@Component({
    selector: 'app-product-detail',
    standalone: true,
    imports: [
        CommonModule,
        RouterModule,
        RouterOutlet,
        RouterLink,
        RouterLinkActive,
    ],
    templateUrl: './product-detail.component.html',
    styleUrls: ['./product-detail.component.css'],
})
export class ProductDetailComponent {
    product: any;
    isInCart: boolean = false;

    constructor(
        private route: ActivatedRoute,
        private productService: ProductService,
        private cartService: CartService
    ) { }

    ngOnInit(): void {
        const productId = this.route.snapshot.paramMap.get('id');
        if (productId) {
            this.productService.getProduct(productId).subscribe((product) => {
                this.product = product;
                this.isInCart = this.cartService.isInCart(productId);
            });
        }
    }

    addToCart(): void {
        if (this.product) {
            this.cartService.addItem(this.product.id);
            this.isInCart = true;
        }
    }
}

JavaScript

// src/app/product-list/product-list.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import {
    RouterModule,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
} from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-product-list',
    standalone: true,
    imports: [
        CommonModule,
        FormsModule,
        RouterModule,
        RouterOutlet,
        RouterLink,
        RouterLinkActive,
    ],
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css'],
})
export class ProductListComponent implements OnInit {
    products: any[] = [];
    filteredProducts: any[] = [];
    searchQuery: string = '';
    sortCriteria: string = 'name';

    constructor(private productService: ProductService) { }

    ngOnInit(): void {
        this.productService.getProducts().subscribe((products) => {
            this.products = products;
            this.filteredProducts = products;
        });
    }

    searchProducts(): void {
        this.filteredProducts = this.products.filter((product) =>
            product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
    }

    sortProducts(): void {
        if (this.sortCriteria === 'name') {
            this.filteredProducts.sort((a, b) => a.name.localeCompare(b.name));
        } else if (this.sortCriteria === 'priceAsc') {
            this.filteredProducts.sort((a, b) => a.price - b.price);
        } else if (this.sortCriteria === 'priceDesc') {
            this.filteredProducts.sort((a, b) => b.price - a.price);
        }
    }
}

JavaScript

// src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
    { path: '', component: ProductListComponent },
    { path: 'product/:id', component: ProductDetailComponent },
    { path: 'cart', component: CartComponent },
    { path: 'checkout', component: CheckoutComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

JavaScript

// src/app/app.component.ts

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [
        RouterOutlet,
        NavbarComponent,
        RouterLink,
        RouterLinkActive,
        CommonModule,
    ],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'online-gift-store-gfg';
}

JavaScript

// src/app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http'; // Import HttpClientModule

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideAnimationsAsync(),
        provideHttpClient(),
    ],
};

JavaScript

// src/app/app.routes.ts

import { Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
export const routes: Routes = [
    { path: '', component: ProductListComponent },
    { path: 'product/:id', component: ProductDetailComponent },
    { path: 'cart', component: CartComponent },
    { path: 'checkout', component: CheckoutComponent },
];

JavaScript

// src/service/cart.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class CartService {
    private items = new BehaviorSubject<Map<string, number>>(this.loadCart());

    private loadCart(): Map<string, number> {
        const cart = localStorage.getItem('cart');
        return cart ? new Map(JSON.parse(cart)) : new Map();
    }

    private saveCart(): void {
        localStorage.setItem(
            'cart',
            JSON.stringify(Array.from(this.items.getValue().entries()))
        );
    }

    addItem(productId: string): void {
        const currentItems = this.items.getValue();
        if (currentItems.has(productId)) {
            currentItems.set(productId, currentItems.get(productId)! + 1);
        } else {
            currentItems.set(productId, 1);
        }
        this.items.next(currentItems);
        this.saveCart();
    }

    decreaseItem(productId: string): void {
        const currentItems = this.items.getValue();
        if (currentItems.has(productId) && currentItems.get(productId)! > 1) {
            currentItems.set(productId, currentItems.get(productId)! - 1);
        }
        this.items.next(currentItems);
        this.saveCart();
    }

    getCartItemCount(): number {
        let count = 0;
        this.items.getValue().forEach((quantity) => (count += quantity));
        return count;
    }

    getCartItemsObservable() {
        return this.items.asObservable();
    }

    getItems(): [string, number][] {
        return Array.from(this.items.getValue().entries());
    }

    removeItem(productId: string): void {
        const currentItems = this.items.getValue();
        if (currentItems.has(productId)) {
            currentItems.delete(productId);
        }
        this.items.next(currentItems);
        this.saveCart();
    }

    clearCart(): void {
        this.items.next(new Map());
        this.saveCart();
    }

    isInCart(productId: string): boolean {
        return this.items.getValue().has(productId);
    }
}

JavaScript

// src/app/service/product.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class ProductService {
    private apiUrl = 'http://localhost:3000/products'; // Use JSON Server or real API

    constructor(private http: HttpClient) { }

    getProducts(): Observable<any[]> {
        return this.http.get<any[]>(this.apiUrl);
    }

    getProduct(id: string): Observable<any> {
        return this.http.get<any>(`${this.apiUrl}/${id}`);
    }
}

JavaScript

//src/db.json
{
    "products": [
        {
            "id": 1,
            "name": "Product 1",
            "description": "Elevate your style with this classy pair of Casual Shoes from the house
       of Our brand. Featuring a contemporary refined design with exceptional comfort,
        this pair is perfect to give your quintessential dressing an upgrade","price": 29.99,
            "imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240705224204/download1.jpeg"
        },
        {
            "id": 2,
            "name": "Product 2",
            "description": "Elevate your style with this classy pair of Casual Shoes from the
       house of Our brand. Featuring a contemporary refined design with exceptional comfort, 
       this pair is perfect to give your quintessential dressing an upgrade","price": 49.99,
            "imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240705224524/download3.jpeg"
        },
        {
            "id": 3,
            "name": "Product 3",
            "description": "Elevate your style with this classy pair of Casual Shoes from the house
       of Our brand. Featuring a contemporary refined design with exceptional comfort, 
       this pair is perfect to give your quintessential dressing an upgrade","price": 99.99,
            "imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240705224615/download7.jpeg"
        },
        {
            "id": 4,
            "name": "Product 4",
            "description": "Elevate your style with this classy pair of Casual Shoes from the 
      house of Our brand. Featuring a contemporary refined design with exceptional comfort,
       this pair is perfect to give your quintessential dressing an upgrade","price": 29.99,
            "imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240705224705/download9.jpeg"
        },
        {
            "id": 5,
            "name": "Product 5",
            "description": "Elevate your style with this classy pair of Casual Shoes from the
       house of Our brand. Featuring a contemporary refined design with exceptional comfort,
        this pair is perfect to give your quintessential dressing an upgrade","price": 59.99,
            "imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240705224752/download6.jpeg"
        },
        {
            "id": 6,
            "name": "Product 6",
            "description": "Elevate your style with this classy pair of Casual Shoes from the house
       of Our brand. Featuring a contemporary refined design with exceptional comfort, this pair 
       is perfect to give your quintessential dressing an upgrade","price": 21.99,
            "imageUrl": "https://media.geeksforgeeks.org/wp-content/uploads/20240705224829/download4.jpeg"
        }
    ]
}

Steps to Run the Application

1. Install json-server in your system globally or in the project using the command

npm install -g json-server

or for install it locally use

npm install json-server --save-dev

2. Go to the src folder and run the following command to star the json server.

cd src
json-server --watch db.json

3. And then in another terminal run this command from your root directory to start the application

ng serve --open

Open your browser and navigate to http://localhost:4200

Output

Routing in Angular 9/10

kartikjaat5765

Improve

Article Tags :

Build an Online Gift store in Angular

Project Preview

Prerequisites

Functionalities

Steps to Create Online Gift Store

Step 1: Set Up AngularJS Environment

Step 2. Generate Components and Services

Dependencies

Folder Structure

Steps to Run the Application

1. Install json-server in your system globally or in the project using the command

2. Go to the src folder and run the following command to star the json server.

Output

Similar Reads

Thank You!

What kind of Experience do you want to share?