@extends('layouts.front-master')
@section('content')
    <main>
        <style data-emotion="css 1n8aw1o">
            .css-1n8aw1o {
                overflow: hidden;
                background-color: #020057;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/roadmap-banner-bg-xs.webp");
            }

            @media (min-width:428px) {
                .css-1n8aw1o {
                    background-image: url("/roadmap-banner-bg-sm.webp");
                }
            }

            @media (min-width:768px) {
                .css-1n8aw1o {
                    background-image: url("/roadmap-banner-bg-md.webp");
                }
            }

            @media (min-width:1200px) {
                .css-1n8aw1o {
                    background-image: url("/roadmap-banner-bg-lg.webp");
                }
            }

            @media (min-width:1536px) {
                .css-1n8aw1o {
                    background-image: url("/roadmap-banner-bg-xl.webp");
                }
            }
        </style>
        <style data-emotion="css 1voen0z">
            .css-1voen0z {
                background-color: #FFFFFF;
                color: rgba(0, 0, 0, 0.87);
                -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                box-shadow: none;
                overflow: hidden;
                background-color: #020057;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/roadmap-banner-bg-xs.webp");
            }

            @media (min-width:428px) {
                .css-1voen0z {
                    background-image: url("/roadmap-banner-bg-sm.webp");
                }
            }

            @media (min-width:768px) {
                .css-1voen0z {
                    background-image: url("/roadmap-banner-bg-md.webp");
                }
            }

            @media (min-width:1200px) {
                .css-1voen0z {
                    background-image: url("/roadmap-banner-bg-lg.webp");
                }
            }

            @media (min-width:1536px) {
                .css-1voen0z {
                    background-image: url("/roadmap-banner-bg-xl.webp");
                }
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1voen0z">
            <style data-emotion="css moskux">
                .css-moskux {
                    color: white;
                    position: relative;
                    padding: 104px 0px;
                    text-align: center;
                }

                @media (min-width:428px) {
                    .css-moskux {
                        padding: 104px 0px;
                    }
                }

                @media (min-width:768px) {
                    .css-moskux {
                        padding: 120px 0px;
                    }
                }

                @media (min-width:768px) and (max-width:1199.95px) {
                    .css-moskux {
                        max-width: initial;
                    }
                }
            </style>
            <style data-emotion="css 1wq8btc">
                .css-1wq8btc {
                    width: 100%;
                    margin-left: auto;
                    box-sizing: border-box;
                    margin-right: auto;
                    display: block;
                    padding-left: 16px;
                    padding-right: 16px;
                    padding-left: 24px;
                    padding-right: 24px;
                    color: white;
                    position: relative;
                    padding: 104px 0px;
                    text-align: center;
                }

                @media (min-width:428px) {
                    .css-1wq8btc {
                        padding-left: 24px;
                        padding-right: 24px;
                    }
                }

                @media (min-width:428px) {
                    .css-1wq8btc {
                        max-width: 428px;
                    }
                }

                @media (min-width:768px) {
                    .css-1wq8btc {
                        max-width: 768px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1wq8btc {
                        max-width: 1200px;
                    }
                }

                @media (min-width:1536px) {
                    .css-1wq8btc {
                        max-width: 1536px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1wq8btc {
                        max-width: 1200px;
                    }
                }

                @media (min-width:768px) {
                    .css-1wq8btc {
                        padding-left: 40px;
                        padding-right: 40px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1wq8btc {
                        padding-left: 80px;
                        padding-right: 80px;
                    }
                }

                @media (min-width:428px) {
                    .css-1wq8btc {
                        padding: 104px 0px;
                    }
                }

                @media (min-width:768px) {
                    .css-1wq8btc {
                        padding: 120px 0px;
                    }
                }

                @media (min-width:768px) and (max-width:1199.95px) {
                    .css-1wq8btc {
                        max-width: initial;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-1wq8btc">
                <style data-emotion="css 261j17">
                    .css-261j17 {
                        margin: 0;
                        font-size: 30px;
                        line-height: 1.333;
                        font-weight: bold;
                        font-family: Poppins, Noto Sans Thai, sans-serif;
                        z-index: 1;
                    }

                    @media (min-width:768px) {
                        .css-261j17 {
                            font-size: 40px;
                            line-height: 1.2;
                        }
                    }
                </style>
                <h1 class="MuiTypography-root MuiTypography-h3 css-261j17" data-testid="roadmap-headline">Milestones</h1>
            </div>
        </div>
        <style data-emotion="css gokeqi">
            .css-gokeqi {
                box-shadow: none;
            }
        </style>
        <style data-emotion="css 5i5o87">
            .css-5i5o87 {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
                box-shadow: none;
            }

            @media (min-width:428px) {
                .css-5i5o87 {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width:1200px) {
                .css-5i5o87 {
                    max-width: 1200px;
                }
            }

            @media (min-width:768px) {
                .css-5i5o87 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-5i5o87 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-5i5o87">
            <style data-emotion="css 14ta24a">
                .css-14ta24a {
                    display: block;
                    margin: 40px 0px 40px;
                }

                @media (min-width:768px) {
                    .css-14ta24a {
                        margin: 0px 0px 80px;
                    }
                }

                @media (min-width:1200px) {
                    .css-14ta24a {
                        display: grid;
                        position: relative;
                        grid-template-columns: 1fr 2.5fr;
                        margin: 64px 0px 80px;
                    }
                }
            </style>
            <style data-emotion="css 1bt3k2y">
                .css-1bt3k2y {
                    display: block;
                    margin: 40px 0px 40px;
                }

                @media (min-width:768px) {
                    .css-1bt3k2y {
                        margin: 0px 0px 80px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1bt3k2y {
                        display: grid;
                        position: relative;
                        grid-template-columns: 1fr 2.5fr;
                        margin: 64px 0px 80px;
                    }
                }
            </style>
            <div class="MuiBox-root css-1bt3k2y">
                <style data-emotion="css 18q325">
                    .css-18q325 {
                        -webkit-box-pack: left;
                        -ms-flex-pack: left;
                        -webkit-justify-content: left;
                        justify-content: left;
                        -webkit-align-items: left;
                        -webkit-box-align: left;
                        -ms-flex-align: left;
                        align-items: left;
                        text-align: left;
                        padding: 0px 0px 24px;
                    }

                    @media (min-width:768px) {
                        .css-18q325 {
                            padding: 64px 0px 48px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-18q325 {
                            padding: 48px 0px;
                        }
                    }
                </style>
                <style data-emotion="css op0hg2">
                    .css-op0hg2 {
                        -webkit-box-pack: left;
                        -ms-flex-pack: left;
                        -webkit-justify-content: left;
                        justify-content: left;
                        -webkit-align-items: left;
                        -webkit-box-align: left;
                        -ms-flex-align: left;
                        align-items: left;
                        text-align: left;
                        padding: 0px 0px 24px;
                    }

                    @media (min-width:768px) {
                        .css-op0hg2 {
                            padding: 64px 0px 48px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-op0hg2 {
                            padding: 48px 0px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-op0hg2">
                    <style data-emotion="css bozlur">
                        .css-bozlur {
                            margin: 0;
                            font-size: 40px;
                            line-height: 1.1;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:768px) {
                            .css-bozlur {
                                font-size: 72px;
                                line-height: 1;
                            }
                        }
                    </style>
                    <h2 class="MuiTypography-root MuiTypography-h2 css-bozlur" data-testid="year2021">2021</h2>
                </div>
                <style data-emotion="css 1qnnj4v">
                    .css-1qnnj4v {
                        overflow: hidden;
                        text-align: left;
                        position: relative;
                        border-radius: 24px;
                        box-shadow: 0 20px 80px 0 #0000000F;
                        padding-right: 32px;
                    }

                    @media (min-width:768px) {
                        .css-1qnnj4v {
                            padding-right: 304px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1qnnj4v {
                            padding-right: 336px;
                        }
                    }
                </style>
                <style data-emotion="css 1exp80w">
                    .css-1exp80w {
                        overflow: hidden;
                        text-align: left;
                        position: relative;
                        border-radius: 24px;
                        box-shadow: 0 20px 80px 0 #0000000F;
                        padding-right: 32px;
                    }

                    @media (min-width:768px) {
                        .css-1exp80w {
                            padding-right: 304px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1exp80w {
                            padding-right: 336px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-1exp80w">
                    <style data-emotion="css fiy8pb">
                        .css-fiy8pb {
                            display: inline-block;
                            border-left: 5px;
                            border-left-style: solid;
                            border-left-color: #5DF591;
                            margin: 32px 0px;
                            padding-left: 32px;
                            padding-bottom: 128px;
                        }

                        @media (min-width:768px) {
                            .css-fiy8pb {
                                margin: 32px 0px;
                                padding-left: 64px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-fiy8pb {
                                margin: 48px 0px;
                                padding-left: 88px;
                            }
                        }

                        @media (min-width:768px) {
                            .css-fiy8pb {
                                padding-bottom: 32px;
                            }
                        }
                    </style>
                    <style data-emotion="css 1rni8m9">
                        .css-1rni8m9 {
                            display: inline-block;
                            border-left: 5px;
                            border-left-style: solid;
                            border-left-color: #5DF591;
                            margin: 32px 0px;
                            padding-left: 32px;
                            padding-bottom: 128px;
                        }

                        @media (min-width:768px) {
                            .css-1rni8m9 {
                                margin: 32px 0px;
                                padding-left: 64px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-1rni8m9 {
                                margin: 48px 0px;
                                padding-left: 88px;
                            }
                        }

                        @media (min-width:768px) {
                            .css-1rni8m9 {
                                padding-bottom: 32px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-1rni8m9">
                        <style data-emotion="css ht4xe7">
                            .css-ht4xe7 {
                                padding: 24px 0px 16px 0px;
                            }

                            @media (min-width:768px) {
                                .css-ht4xe7 {
                                    padding: 32px 0px 16px 0px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-ht4xe7 {
                                    padding: 40px 0px 24px 0px;
                                }
                            }
                        </style>
                        <style data-emotion="css 17px8qc">
                            .css-17px8qc {
                                margin: 0;
                                font-size: 24px;
                                line-height: 1.25;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                padding: 24px 0px 16px 0px;
                            }

                            @media (min-width:768px) {
                                .css-17px8qc {
                                    font-size: 30px;
                                    line-height: 1.267;
                                }
                            }

                            @media (min-width:768px) {
                                .css-17px8qc {
                                    padding: 32px 0px 16px 0px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-17px8qc {
                                    padding: 40px 0px 24px 0px;
                                }
                            }
                        </style>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-17px8qc" data-testid="q3">Q3</h4>
                        <style data-emotion="css 1tmli6w">
                            .css-1tmli6w {
                                margin: 0;
                                font-size: 14px;
                                line-height: 1.714;
                                font-weight: 400;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                            }

                            @media (min-width:768px) {
                                .css-1tmli6w {
                                    font-size: 16px;
                                    line-height: 1.75;
                                }
                            }
                        </style>
                        <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w" data-testid="year2021-q3-description">
                            CPALL! Team was formed by a group of finance aficionados.</p>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-17px8qc" data-testid="q4">Q4</h4>
                        <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w" data-testid="year2021-q4-description">
                            KKP CPALL Company was founded.</p>
                        <style data-emotion="css 120q0e7">
                            .css-120q0e7 {
                                position: absolute;
                                width: 200px;
                                bottom: 0;
                                left: 50%;
                                -webkit-transform: translateX(-50%);
                                -moz-transform: translateX(-50%);
                                -ms-transform: translateX(-50%);
                                transform: translateX(-50%);
                            }

                            @media (min-width:768px) {
                                .css-120q0e7 {
                                    width: 258px;
                                    left: unset;
                                    right: -51px;
                                    -webkit-transform: none;
                                    -moz-transform: none;
                                    -ms-transform: none;
                                    transform: none;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-120q0e7 {
                                    width: 325px;
                                }
                            }
                        </style><img src="{{ asset('/year-2021.svg') }}" alt="year-2021" class="css-120q0e7" />
                    </div>
                </div>
            </div>
        </div>
        <style data-emotion="css gokeqi">
            .css-gokeqi {
                box-shadow: none;
            }
        </style>
        <style data-emotion="css 5i5o87">
            .css-5i5o87 {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
                box-shadow: none;
            }

            @media (min-width:428px) {
                .css-5i5o87 {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width:1200px) {
                .css-5i5o87 {
                    max-width: 1200px;
                }
            }

            @media (min-width:768px) {
                .css-5i5o87 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-5i5o87 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-5i5o87">
            <style data-emotion="css 14ta24a">
                .css-14ta24a {
                    display: block;
                    margin: 40px 0px 40px;
                }

                @media (min-width:768px) {
                    .css-14ta24a {
                        margin: 0px 0px 80px;
                    }
                }

                @media (min-width:1200px) {
                    .css-14ta24a {
                        display: grid;
                        position: relative;
                        grid-template-columns: 1fr 2.5fr;
                        margin: 64px 0px 80px;
                    }
                }
            </style>
            <style data-emotion="css 1bt3k2y">
                .css-1bt3k2y {
                    display: block;
                    margin: 40px 0px 40px;
                }

                @media (min-width:768px) {
                    .css-1bt3k2y {
                        margin: 0px 0px 80px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1bt3k2y {
                        display: grid;
                        position: relative;
                        grid-template-columns: 1fr 2.5fr;
                        margin: 64px 0px 80px;
                    }
                }
            </style>
            <div class="MuiBox-root css-1bt3k2y">
                <style data-emotion="css 18q325">
                    .css-18q325 {
                        -webkit-box-pack: left;
                        -ms-flex-pack: left;
                        -webkit-justify-content: left;
                        justify-content: left;
                        -webkit-align-items: left;
                        -webkit-box-align: left;
                        -ms-flex-align: left;
                        align-items: left;
                        text-align: left;
                        padding: 0px 0px 24px;
                    }

                    @media (min-width:768px) {
                        .css-18q325 {
                            padding: 64px 0px 48px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-18q325 {
                            padding: 48px 0px;
                        }
                    }
                </style>
                <style data-emotion="css op0hg2">
                    .css-op0hg2 {
                        -webkit-box-pack: left;
                        -ms-flex-pack: left;
                        -webkit-justify-content: left;
                        justify-content: left;
                        -webkit-align-items: left;
                        -webkit-box-align: left;
                        -ms-flex-align: left;
                        align-items: left;
                        text-align: left;
                        padding: 0px 0px 24px;
                    }

                    @media (min-width:768px) {
                        .css-op0hg2 {
                            padding: 64px 0px 48px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-op0hg2 {
                            padding: 48px 0px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-op0hg2">
                    <style data-emotion="css bozlur">
                        .css-bozlur {
                            margin: 0;
                            font-size: 40px;
                            line-height: 1.1;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:768px) {
                            .css-bozlur {
                                font-size: 72px;
                                line-height: 1;
                            }
                        }
                    </style>
                    <h2 class="MuiTypography-root MuiTypography-h2 css-bozlur" data-testid="year2022">2022</h2>
                </div>
                <style data-emotion="css 1qnnj4v">
                    .css-1qnnj4v {
                        overflow: hidden;
                        text-align: left;
                        position: relative;
                        border-radius: 24px;
                        box-shadow: 0 20px 80px 0 #0000000F;
                        padding-right: 32px;
                    }

                    @media (min-width:768px) {
                        .css-1qnnj4v {
                            padding-right: 304px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1qnnj4v {
                            padding-right: 336px;
                        }
                    }
                </style>
                <style data-emotion="css 1exp80w">
                    .css-1exp80w {
                        overflow: hidden;
                        text-align: left;
                        position: relative;
                        border-radius: 24px;
                        box-shadow: 0 20px 80px 0 #0000000F;
                        padding-right: 32px;
                    }

                    @media (min-width:768px) {
                        .css-1exp80w {
                            padding-right: 304px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1exp80w {
                            padding-right: 336px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-1exp80w">
                    <style data-emotion="css 1y4m3ys">
                        .css-1y4m3ys {
                            display: inline-block;
                            border-left: 5px;
                            border-left-style: solid;
                            border-left-color: #5DF591;
                            margin: 32px 0px;
                            padding-left: 32px;
                            padding-bottom: 280px;
                        }

                        @media (min-width:768px) {
                            .css-1y4m3ys {
                                margin: 32px 0px;
                                padding-left: 64px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-1y4m3ys {
                                margin: 48px 0px;
                                padding-left: 88px;
                            }
                        }

                        @media (min-width:768px) {
                            .css-1y4m3ys {
                                padding-bottom: 32px;
                            }
                        }
                    </style>
                    <style data-emotion="css 1e5dxbn">
                        .css-1e5dxbn {
                            display: inline-block;
                            border-left: 5px;
                            border-left-style: solid;
                            border-left-color: #5DF591;
                            margin: 32px 0px;
                            padding-left: 32px;
                            padding-bottom: 280px;
                        }

                        @media (min-width:768px) {
                            .css-1e5dxbn {
                                margin: 32px 0px;
                                padding-left: 64px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-1e5dxbn {
                                margin: 48px 0px;
                                padding-left: 88px;
                            }
                        }

                        @media (min-width:768px) {
                            .css-1e5dxbn {
                                padding-bottom: 32px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-1e5dxbn">
                        <style data-emotion="css ht4xe7">
                            .css-ht4xe7 {
                                padding: 24px 0px 16px 0px;
                            }

                            @media (min-width:768px) {
                                .css-ht4xe7 {
                                    padding: 32px 0px 16px 0px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-ht4xe7 {
                                    padding: 40px 0px 24px 0px;
                                }
                            }
                        </style>
                        <style data-emotion="css 17px8qc">
                            .css-17px8qc {
                                margin: 0;
                                font-size: 24px;
                                line-height: 1.25;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                padding: 24px 0px 16px 0px;
                            }

                            @media (min-width:768px) {
                                .css-17px8qc {
                                    font-size: 30px;
                                    line-height: 1.267;
                                }
                            }

                            @media (min-width:768px) {
                                .css-17px8qc {
                                    padding: 32px 0px 16px 0px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-17px8qc {
                                    padding: 40px 0px 24px 0px;
                                }
                            }
                        </style>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-17px8qc" data-testid="q1">Q1</h4>
                        <style data-emotion="css q91kdq">
                            .css-q91kdq ul {
                                margin: 4px 0px 0px;
                                padding-left: 20px;
                            }

                            .css-q91kdq li::marker {
                                color: #5DF591;
                            }
                        </style>
                        <style data-emotion="css gowbvg">
                            .css-gowbvg ul {
                                margin: 4px 0px 0px;
                                padding-left: 20px;
                            }

                            .css-gowbvg li::marker {
                                color: #5DF591;
                            }
                        </style>
                        <div class="MuiBox-root css-gowbvg" data-testid="year2022-q1-description">CPALL! Social Media was
                            launched.</div>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-17px8qc" data-testid="q2">Q2</h4>
                        <div class="MuiBox-root css-gowbvg" data-testid="year2022-q2-description">
                            <style data-emotion="css 1tmli6w">
                                .css-1tmli6w {
                                    margin: 0;
                                    font-size: 14px;
                                    line-height: 1.714;
                                    font-weight: 400;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                }

                                @media (min-width:768px) {
                                    .css-1tmli6w {
                                        font-size: 16px;
                                        line-height: 1.75;
                                    }
                                }
                            </style>
                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w">The pilot version of CPALL!
                                Application was released for internal use and testing.</p>
                            <ul>
                                <li>Fund information</li>
                                <li>Offshore stock information</li>
                                <li>Research and articles</li>
                                <li>Virtual portfolios</li>
                            </ul>
                        </div>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-17px8qc" data-testid="q3">Q3</h4>
                        <div class="MuiBox-root css-gowbvg" data-testid="year2022-q3-description">
                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w">CPALL! Application was launched to
                                the public, offering a variety of financial and investment products in addition to the
                                features on the pilot version.</p>
                            <ul>
                                <li>Savings – deposit, transfer</li>
                                <li>Mutual funds – buy, sell</li>
                                <li>Offshore stocks – buy, sell, fractional trading</li>
                            </ul>
                        </div>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-17px8qc" data-testid="q4">Q4</h4>
                        <div class="MuiBox-root css-gowbvg" data-testid="year2022-q4-description">
                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w">Features and products are added or
                                enhanced for better user experience.</p>
                            <ul>
                                <li>Savings – customized slip</li>
                                <li>Mutual funds – switch</li>
                                <li>Offshore stocks - chart pattern detection tool</li>
                            </ul>
                        </div>
                        <style data-emotion="css 5dkpry">
                            .css-5dkpry {
                                position: absolute;
                                width: 238px;
                                bottom: 0;
                                left: 50%;
                                -webkit-transform: translateX(-50%);
                                -moz-transform: translateX(-50%);
                                -ms-transform: translateX(-50%);
                                transform: translateX(-50%);
                            }

                            @media (min-width:768px) {
                                .css-5dkpry {
                                    width: 291px;
                                    left: unset;
                                    right: 17px;
                                    -webkit-transform: none;
                                    -moz-transform: none;
                                    -ms-transform: none;
                                    transform: none;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-5dkpry {
                                    width: 319px;
                                }
                            }
                        </style><img src="/year-2022.webp" alt="year-2022" class="css-5dkpry" />
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection