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

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

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

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

            @media (min-width:1536px) {
                .css-1tao2u5 {
                    background-image: url("/about-us-bg-xl.webp");
                }
            }
        </style>
        <style data-emotion="css 1hfzad1">
            .css-1hfzad1 {
                background-color: #E2FB7E;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/about-us-bg-xs.webp");
            }

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

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

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

            @media (min-width:1536px) {
                .css-1hfzad1 {
                    background-image: url("/about-us-bg-xl.webp");
                }
            }
        </style>
        <div class="MuiBox-root css-1hfzad1">
            <style data-emotion="css 1vr8955">
                .css-1vr8955 {
                    height: 240px;
                    text-align: center;
                }

                @media (min-width:1200px) {
                    .css-1vr8955 {
                        height: 280px;
                    }
                }
            </style>
            <style data-emotion="css 198tqke">
                .css-198tqke {
                    height: 240px;
                    text-align: center;

                }

                @media (min-width:1200px) {
                    .css-198tqke {
                        height: 280px;
                    }
                }
            </style>
            <div class="MuiBox-root css-198tqke">
                <img src="" alt="">
            </div>
        </div>
        <style data-emotion="css i6bazn">
            .css-i6bazn {
                overflow: hidden;
            }
        </style>
        <style data-emotion="css rycext">
            .css-rycext {
                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;
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-rycext">
            <style data-emotion="css zjbk50">
                .css-zjbk50 {
                    text-align: center;
                    padding: 40px;
                }
            </style>
            <style data-emotion="css 1i4386x">
                .css-1i4386x {
                    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;
                    text-align: center;
                    padding: 40px;
                }

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

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

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

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

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

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

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

                @media (min-width:1200px) {
                    .css-1i4386x {
                        padding-left: 80px;
                        padding-right: 80px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-1i4386x">
                <style data-emotion="css 1jifce0">
                    .css-1jifce0 {
                        padding: 0;
                    }

                    @media (min-width:768px) {
                        .css-1jifce0 {
                            padding: 16px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1jifce0 {
                            padding-left: 200px;
                            padding-right: 200px;
                        }
                    }
                </style>
                <style data-emotion="css dh1fq1">
                    .css-dh1fq1 {
                        padding: 0;
                    }

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

                    @media (min-width:1200px) {
                        .css-dh1fq1 {
                            padding-left: 200px;
                            padding-right: 200px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-dh1fq1">
                    <style data-emotion="css 1q7gyzr">
                        .css-1q7gyzr {
                            margin: 0;
                            font-size: 30px;
                            line-height: 1.333;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:768px) {
                            .css-1q7gyzr {
                                font-size: 40px;
                                line-height: 1.2;
                            }
                        }
                    </style><span class="MuiTypography-root MuiTypography-h3 css-1q7gyzr"
                        data-testid="p-company-sec-2-title">Our Story<style data-emotion="css 6heq0z">
                            .css-6heq0z {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #5DF591;
                            }

                            @media (min-width:768px) {
                                .css-6heq0z {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style><span class="MuiTypography-root MuiTypography-h3 css-6heq0z"></span></span>
                    <style data-emotion="css 19midj6">
                        .css-19midj6 {
                            padding: 16px;
                        }
                    </style>
                    <style data-emotion="css 1cc42ae">
                        .css-1cc42ae {
                            padding: 16px;
                        }
                    </style>
                    <div class="MuiBox-root css-1cc42ae"><img src="{{ asset('images/about-us/icon-quote.svg') }}"
                            alt="icon-quote" width="40" height="40" class="css-0" /></div>
                    <style data-emotion="css 89xtcw">
                        .css-89xtcw {
                            margin: 0;
                            font-size: 14px;
                            line-height: 1.714;
                            font-weight: 600;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:428px) {
                            .css-89xtcw {
                                font-size: 16px;
                                line-height: 1.75;
                            }
                        }
                    </style>
                    <h6 class="MuiTypography-root MuiTypography-subtitle1 css-89xtcw"
                        data-testid="p-company-sec-2-description">
                        <style data-emotion="css 17dbd5z">
                            .css-17dbd5z {
                                font-weight: bold;
                                background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 30%, #5DF591 70%, #5DF591 100%);
                            }
                        </style><span class="css-17dbd5z">KKP CPALL, a subsidiary of Kiatnakin Phatra Financial
                            Group,</span>
                        <style data-emotion="css m1t1mq">
                            .css-m1t1mq {
                                margin: 0;
                                font-size: 14px;
                                line-height: 1.714;
                                font-weight: 400;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                margin-bottom: 24px;
                            }

                            @media (min-width:768px) {
                                .css-m1t1mq {
                                    font-size: 16px;
                                    line-height: 1.75;
                                }
                            }
                        </style>
                        <p class="MuiTypography-root MuiTypography-body1 css-m1t1mq">was established in 2021 with a mission
                            to democratize and revolutionize finance through our data expertise, digital technology, and
                            customer-oriented culture.</p>
                        <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">At KKP CPALL, we believe that
                            everyone
                            should have low-cost, convenient, and smart access to financial products and services regardless
                            of their knowledge, experience, wealth, or level of income.</p>
                    </h6>
                </div>
            </div>
        </div>
        <style data-emotion="css i6bazn">
            .css-i6bazn {
                overflow: hidden;
            }
        </style>
        <style data-emotion="css rycext">
            .css-rycext {
                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;
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-rycext">
            <style data-emotion="css 11vc1hs">
                .css-11vc1hs {
                    text-align: center;
                }

                @media (min-width:768px) {
                    .css-11vc1hs {
                        padding: 32px;
                    }
                }
            </style>
            <style data-emotion="css lrw7jb">
                .css-lrw7jb {
                    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;
                    text-align: center;
                }

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

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

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

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

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

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

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

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

                @media (min-width:768px) {
                    .css-lrw7jb {
                        padding: 32px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-lrw7jb">
                <style data-emotion="css 11gzb3s">
                    .css-11gzb3s {
                        padding: 0;
                        margin-bottom: 40px;
                    }
                </style>
                <style data-emotion="css 163t08v">
                    .css-163t08v {
                        padding: 0;
                        margin-bottom: 40px;
                    }
                </style>
                <div class="MuiBox-root css-163t08v">
                    <style data-emotion="css 10ib5jr">
                        .css-10ib5jr {
                            margin-bottom: 40px;
                        }
                    </style>
                    <style data-emotion="css 1y11ixe">
                        .css-1y11ixe {
                            margin-bottom: 40px;
                        }
                    </style>
                    <div class="MuiBox-root css-1y11ixe">
                        <style data-emotion="css 1q7gyzr">
                            .css-1q7gyzr {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                            }

                            @media (min-width:768px) {
                                .css-1q7gyzr {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style><span class="MuiTypography-root MuiTypography-h3 css-1q7gyzr"
                            data-testid="p-company-sec-3-title">Our Commitment<style data-emotion="css 6heq0z">
                                .css-6heq0z {
                                    margin: 0;
                                    font-size: 30px;
                                    line-height: 1.333;
                                    font-weight: bold;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    color: #5DF591;
                                }

                                @media (min-width:768px) {
                                    .css-6heq0z {
                                        font-size: 40px;
                                        line-height: 1.2;
                                    }
                                }
                            </style><span class="MuiTypography-root MuiTypography-h3 css-6heq0z">.</span></span>
                    </div>
                    <style data-emotion="css 2k8wes">
                        .css-2k8wes {
                            width: 100%;
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-flex-flow: column wrap;
                            -webkit-flex-flow: column wrap;
                            -ms-flex-flow: column wrap;
                            flex-flow: column wrap;
                            -webkit-align-content: space-between;
                            -ms-flex-line-pack: space-between;
                            align-content: space-between;
                            box-sizing: border-box;
                        }

                        .css-2k8wes>* {
                            box-sizing: border-box;
                        }

                        @media (min-width:0px) {
                            .css-2k8wes {
                                margin: -8px;
                            }

                            .css-2k8wes>* {
                                margin: 8px;
                                width: calc(100.00% - 16px);
                            }
                        }

                        @media (min-width:428px) {
                            .css-2k8wes {
                                margin: -8px;
                            }

                            .css-2k8wes>* {
                                margin: 8px;
                                width: calc(100.00% - 16px);
                            }
                        }

                        @media (min-width:768px) {
                            .css-2k8wes>* {
                                width: calc(50.00% - 0px);
                            }
                        }
                    </style>
                    <div class="MuiMasonry-root css-2k8wes">
                        <div class="MuiBox-root css-0">
                            <style data-emotion="css 1cdt67g">
                                .css-1cdt67g {
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1cdt67g {
                                        height: 280px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1cdt67g {
                                        width: 424px;
                                        margin-left: auto;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1ltyz97">
                                .css-1ltyz97 {
                                    overflow: hidden;
                                    border-radius: 12px;
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1ltyz97 {
                                        border-radius: 20px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1ltyz97 {
                                        height: 280px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1ltyz97 {
                                        width: 424px;
                                        margin-left: auto;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1jkx15r">
                                .css-1jkx15r {
                                    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;
                                    border-radius: 4px;
                                    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
                                    overflow: hidden;
                                    border-radius: 12px;
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1jkx15r {
                                        border-radius: 20px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1jkx15r {
                                        height: 280px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1jkx15r {
                                        width: 424px;
                                        margin-left: auto;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1jkx15r">
                                <style data-emotion="css 1c6dbpr">
                                    .css-1c6dbpr {
                                        text-align: left;
                                        padding: 32px;
                                    }
                                </style>
                                <style data-emotion="css 11w1e1v">
                                    .css-11w1e1v {
                                        padding: 16px;
                                        text-align: left;
                                        padding: 32px;
                                    }

                                    .css-11w1e1v:last-child {
                                        padding-bottom: 24px;
                                    }
                                </style>
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <style data-emotion="css o8xdls">
                                        .css-o8xdls {
                                            margin: 0;
                                            font-size: 18px;
                                            line-height: 1.333;
                                            font-weight: bold;
                                            font-family: Poppins, Noto Sans Thai, sans-serif;
                                        }

                                        @media (min-width:768px) {
                                            .css-o8xdls {
                                                font-size: 22px;
                                                line-height: 1.273;
                                            }
                                        }
                                    </style>
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="p-company-sec-3-1-title">Knowledge</h5>
                                    <style data-emotion="css 199phte">
                                        .css-199phte {
                                            list-style: none;
                                            margin: 0;
                                            padding: 0;
                                            position: relative;
                                            padding-top: 8px;
                                            padding-bottom: 8px;
                                        }
                                    </style>
                                    <ul class="MuiList-root MuiList-padding css-199phte"
                                        data-testid="p-company-sec-3-1-description">
                                        <style data-emotion="css ntfpy7">
                                            .css-ntfpy7 {
                                                padding: 0;
                                                margin: 0;
                                            }
                                        </style>
                                        <style data-emotion="css 1cwykng">
                                            .css-1cwykng {
                                                display: -webkit-box;
                                                display: -webkit-flex;
                                                display: -ms-flexbox;
                                                display: flex;
                                                -webkit-box-pack: start;
                                                -ms-flex-pack: start;
                                                -webkit-justify-content: flex-start;
                                                justify-content: flex-start;
                                                -webkit-align-items: center;
                                                -webkit-box-align: center;
                                                -ms-flex-align: center;
                                                align-items: center;
                                                position: relative;
                                                -webkit-text-decoration: none;
                                                text-decoration: none;
                                                width: 100%;
                                                box-sizing: border-box;
                                                text-align: left;
                                                padding-top: 8px;
                                                padding-bottom: 8px;
                                                padding-left: 16px;
                                                padding-right: 16px;
                                                padding: 0;
                                                margin: 0;
                                            }

                                            .css-1cwykng.Mui-focusVisible {
                                                background-color: rgba(0, 0, 0, 0.12);
                                            }

                                            .css-1cwykng.Mui-selected {
                                                background-color: rgba(93, 245, 145, 0.08);
                                            }

                                            .css-1cwykng.Mui-selected.Mui-focusVisible {
                                                background-color: rgba(93, 245, 145, 0.2);
                                            }

                                            .css-1cwykng.Mui-disabled {
                                                opacity: 0.38;
                                            }
                                        </style>
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <style data-emotion="css 1e4t4bq">
                                                .css-1e4t4bq {
                                                    min-width: 20px;
                                                    margin-top: 10px;
                                                    margin-bottom: auto;
                                                }
                                            </style>
                                            <style data-emotion="css 183h7xi">
                                                .css-183h7xi {
                                                    min-width: 56px;
                                                    color: rgba(0, 0, 0, 0.54);
                                                    -webkit-flex-shrink: 0;
                                                    -ms-flex-negative: 0;
                                                    flex-shrink: 0;
                                                    display: -webkit-inline-box;
                                                    display: -webkit-inline-flex;
                                                    display: -ms-inline-flexbox;
                                                    display: inline-flex;
                                                    min-width: 20px;
                                                    margin-top: 10px;
                                                    margin-bottom: auto;
                                                }
                                            </style>
                                            <div class="MuiListItemIcon-root css-183h7xi">
                                                <style data-emotion="css ogzm88">
                                                    .css-ogzm88 {
                                                        font-size: 8px;
                                                    }
                                                </style>
                                                <style data-emotion="css 1fr9yg9">
                                                    .css-1fr9yg9 {
                                                        -webkit-user-select: none;
                                                        -moz-user-select: none;
                                                        -ms-user-select: none;
                                                        user-select: none;
                                                        width: 1em;
                                                        height: 1em;
                                                        display: inline-block;
                                                        fill: currentColor;
                                                        -webkit-flex-shrink: 0;
                                                        -ms-flex-negative: 0;
                                                        flex-shrink: 0;
                                                        -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                                        transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                                        font-size: 1.5rem;
                                                        color: #5DF591;
                                                        font-size: 8px;
                                                    }
                                                </style><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg>
                                            </div>
                                            <style data-emotion="css 1cpr62g">
                                                .css-1cpr62g {
                                                    -webkit-flex: 1 1 auto;
                                                    -ms-flex: 1 1 auto;
                                                    flex: 1 1 auto;
                                                    min-width: 0;
                                                    margin-top: 4px;
                                                    margin-bottom: 4px;
                                                    margin: 0;
                                                }
                                            </style>
                                            <div class="MuiListItemText-root css-1cpr62g">
                                                <style data-emotion="css 1fqmyel">
                                                    .css-1fqmyel {
                                                        margin: 0;
                                                        font-size: 14px;
                                                        line-height: 1.714;
                                                        font-weight: 400;
                                                        font-family: Poppins, Noto Sans Thai, sans-serif;
                                                        display: block;
                                                    }

                                                    @media (min-width:768px) {
                                                        .css-1fqmyel {
                                                            font-size: 16px;
                                                            line-height: 1.75;
                                                        }
                                                    }
                                                </style><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Finance
                                                    and investment academy</span>
                                            </div>
                                        </li>
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemIcon-root css-183h7xi"><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg></div>
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Financial
                                                    planning &amp; investment tools</span></div>
                                        </li>
                                    </ul>
                                    <style data-emotion="css d7iwk4">
                                        .css-d7iwk4 {
                                            position: absolute;
                                            width: 61px;
                                            top: -10px;
                                            right: 20px;
                                            z-index: 99;
                                        }

                                        @media (min-width:768px) {
                                            .css-d7iwk4 {
                                                width: 84px;
                                                top: auto;
                                                bottom: -20px;
                                                left: 20px;
                                                right: auto;
                                            }
                                        }

                                        @media (min-width:1200px) {
                                            .css-d7iwk4 {
                                                bottom: 20px;
                                                left: -30px;
                                            }
                                        }
                                    </style><img src="{{ asset('images/about-us/icon-knowledge.svg') }}"
                                        alt="icon-knowledge" class="css-d7iwk4" />
                                </div>
                            </div>
                        </div>
                        <div class="MuiBox-root css-0">
                            <style data-emotion="css 1cbliyk">
                                .css-1cbliyk {
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1cbliyk {
                                        height: 280px;
                                        margin-top: 60px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1cbliyk {
                                        width: 424px;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 48enpp">
                                .css-48enpp {
                                    overflow: hidden;
                                    border-radius: 12px;
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-48enpp {
                                        border-radius: 20px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-48enpp {
                                        height: 280px;
                                        margin-top: 60px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-48enpp {
                                        width: 424px;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1p8ubwn">
                                .css-1p8ubwn {
                                    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;
                                    border-radius: 4px;
                                    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
                                    overflow: hidden;
                                    border-radius: 12px;
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1p8ubwn {
                                        border-radius: 20px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1p8ubwn {
                                        height: 280px;
                                        margin-top: 60px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1p8ubwn {
                                        width: 424px;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1p8ubwn">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="p-company-sec-3-2-title">Data</h5>
                                    <ul class="MuiList-root MuiList-padding css-199phte"
                                        data-testid="p-company-sec-3-2-description">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemIcon-root css-183h7xi"><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg></div>
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Complete
                                                    and real-time financial data</span></div>
                                        </li>
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemIcon-root css-183h7xi"><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg></div>
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Consolidated
                                                    portfolio</span></div>
                                        </li>
                                    </ul>
                                    <style data-emotion="css 3desea">
                                        .css-3desea {
                                            position: absolute;
                                            width: 81px;
                                            top: -36px;
                                            right: 20px;
                                            z-index: 99;
                                        }

                                        @media (min-width:768px) {
                                            .css-3desea {
                                                width: 112px;
                                                top: -42px;
                                                right: 20px;
                                            }
                                        }

                                        @media (min-width:1200px) {
                                            .css-3desea {
                                                top: -41px;
                                                right: 22px;
                                            }
                                        }
                                    </style><img src="{{ asset('images/about-us/icon-data.svg') }}" alt="icon-data"
                                        class="css-3desea" />
                                </div>
                            </div>
                        </div>
                        <div class="MuiBox-root css-0">
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1jkx15r">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="p-company-sec-3-3-title">Services</h5>
                                    <ul class="MuiList-root MuiList-padding css-199phte"
                                        data-testid="p-company-sec-3-3-description">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemIcon-root css-183h7xi"><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg></div>
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Automated
                                                    investment portfolio</span></div>
                                        </li>
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemIcon-root css-183h7xi"><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg></div>
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Personalized
                                                    recommendations</span></div>
                                        </li>
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemIcon-root css-183h7xi"><svg
                                                    class="MuiSvgIcon-root MuiSvgIcon-colorPrimary MuiSvgIcon-fontSizeMedium css-1fr9yg9"
                                                    focusable="false" viewBox="0 0 24 24" aria-hidden="true"
                                                    data-testid="CircleIcon">
                                                    <path
                                                        d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2z">
                                                    </path>
                                                </svg></div>
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Portfolio
                                                    analytics</span></div>
                                        </li>
                                    </ul>
                                    <style data-emotion="css ursea">
                                        .css-ursea {
                                            position: absolute;
                                            width: 69px;
                                            bottom: -20px;
                                            right: 20px;
                                            z-index: 99;
                                        }

                                        @media (min-width:768px) {
                                            .css-ursea {
                                                width: 94px;
                                                bottom: -60px;
                                                right: 30px;
                                            }
                                        }

                                        @media (min-width:1200px) {
                                            .css-ursea {
                                                bottom: -21px;
                                                right: 97px;
                                            }
                                        }
                                    </style><img src="{{ asset('images/about-us/icon-services.svg') }}"
                                        alt="icon-services" class="css-ursea" />
                                </div>
                            </div>
                        </div>
                        <div class="MuiBox-root css-0">
                            <style data-emotion="css 1k7u7uc">
                                .css-1k7u7uc {
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1k7u7uc {
                                        height: 280px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1k7u7uc {
                                        width: 424px;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1b251vp">
                                .css-1b251vp {
                                    overflow: hidden;
                                    border-radius: 12px;
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-1b251vp {
                                        border-radius: 20px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1b251vp {
                                        height: 280px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1b251vp {
                                        width: 424px;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <style data-emotion="css gnluvi">
                                .css-gnluvi {
                                    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;
                                    border-radius: 4px;
                                    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
                                    overflow: hidden;
                                    border-radius: 12px;
                                    border: 0;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    border-radius: 20px;
                                    overflow: visible;
                                    position: relative;
                                }

                                @media (min-width:768px) {
                                    .css-gnluvi {
                                        border-radius: 20px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-gnluvi {
                                        height: 280px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-gnluvi {
                                        width: 424px;
                                        padding: 24px;
                                    }
                                }
                            </style>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-gnluvi">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="p-company-sec-3-4-title">Product</h5>
                                    <ul class="MuiList-root MuiList-padding css-199phte"
                                        data-testid="p-company-sec-3-4-description">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <div class="MuiListItemText-root css-1cpr62g"><span
                                                    class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1fqmyel">Multi-asset
                                                    – savings by KKPB, mutual funds, offshore stocks</span></div>
                                        </li>
                                    </ul>
                                    <style data-emotion="css h7tk7f">
                                        .css-h7tk7f {
                                            position: absolute;
                                            width: 55px;
                                            bottom: -20px;
                                            right: 20px;
                                            z-index: 99;
                                        }

                                        @media (min-width:768px) {
                                            .css-h7tk7f {
                                                width: 77px;
                                                bottom: -22px;
                                            }
                                        }
                                    </style><img src="{{ asset('images/about-us/icon-product.svg') }}" alt="icon-product"
                                        class="css-h7tk7f" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <style data-emotion="css 87lb9q">
                .css-87lb9q {
                    padding: 0 !important;
                }
            </style>
            <style data-emotion="css 1dlh8py">
                .css-1dlh8py {
                    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;
                    padding: 0 !important;
                }

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

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

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

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

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

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

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

                @media (min-width:1200px) {
                    .css-1dlh8py {
                        padding-left: 80px;
                        padding-right: 80px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-1dlh8py">
                <style data-emotion="css g8btw7">
                    .css-g8btw7 {
                        text-align: center;
                        padding: 24px 16px;
                    }

                    @media (min-width:768px) {
                        .css-g8btw7 {
                            padding: 48px 32px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-g8btw7 {
                            padding: 56px 32px;
                        }
                    }
                </style>
                <div class="css-g8btw7">
                    <style data-emotion="css 1q7gyzr">
                        .css-1q7gyzr {
                            margin: 0;
                            font-size: 30px;
                            line-height: 1.333;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:768px) {
                            .css-1q7gyzr {
                                font-size: 40px;
                                line-height: 1.2;
                            }
                        }
                    </style>
                    <h3 class="MuiTypography-root MuiTypography-h3 css-1q7gyzr" data-testid="p-company-sec-4-title">Our
                        Approaches
                        <style data-emotion="css 6heq0z">
                            .css-6heq0z {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #5DF591;
                            }

                            @media (min-width:768px) {
                                .css-6heq0z {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style><span class="MuiTypography-root MuiTypography-h3 css-6heq0z">.</span>
                    </h3>
                </div>
            </div>
            <style data-emotion="css 1y32zt2">
                .css-1y32zt2 {
                    background: none;
                }

                @media (min-width:768px) {
                    .css-1y32zt2 {
                        background-image: linear-gradient(to right, #111111 0% 50%, #F6F8FB 50% 100%);
                    }
                }
            </style>
            <style data-emotion="css 19n8ysm">
                .css-19n8ysm {
                    background-color: #111111;
                    color: #fff;
                    -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;
                    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
                    background: none;
                }

                @media (min-width:768px) {
                    .css-19n8ysm {
                        background-image: linear-gradient(to right, #111111 0% 50%, #F6F8FB 50% 100%);
                    }
                }
            </style>
            <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-19n8ysm">
                <style data-emotion="css 87lb9q">
                    .css-87lb9q {
                        padding: 0 !important;
                    }
                </style>
                <style data-emotion="css 1dlh8py">
                    .css-1dlh8py {
                        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;
                        padding: 0 !important;
                    }

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

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

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

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

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

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

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

                    @media (min-width:1200px) {
                        .css-1dlh8py {
                            padding-left: 80px;
                            padding-right: 80px;
                        }
                    }
                </style>
                <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-1dlh8py">
                    <style data-emotion="css 1pw8h04">
                        .css-1pw8h04 {
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-flex-direction: column;
                            -ms-flex-direction: column;
                            flex-direction: column;
                        }

                        @media (min-width:768px) {
                            .css-1pw8h04 {
                                -webkit-flex-direction: row;
                                -ms-flex-direction: row;
                                flex-direction: row;
                            }
                        }
                    </style>
                    <div class="css-1pw8h04">
                        <style data-emotion="css 191z6k">
                            .css-191z6k {
                                cursor: pointer;
                                position: relative;
                            }

                            @media (max-width:767.95px) {
                                .css-191z6k {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-191z6k:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-191z6k:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-191z6k {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-191z6k:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-191z6k:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-191z6k.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css u5pn57">
                            .css-u5pn57 {
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                            }

                            @media (min-width:768px) {
                                .css-u5pn57 {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-u5pn57 {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-u5pn57:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-u5pn57:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-u5pn57 {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-u5pn57:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-u5pn57:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-u5pn57.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css 4d8c35">
                            .css-4d8c35 {
                                background-color: #111111;
                                color: #fff;
                                -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;
                                border-radius: 4px;
                                box-shadow: none;
                                background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                            }

                            @media (min-width:768px) {
                                .css-4d8c35 {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-4d8c35 {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-4d8c35:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-4d8c35:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-4d8c35 {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-4d8c35:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-4d8c35:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-4d8c35.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <div
                            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-4d8c35">
                            <style data-emotion="css 1pgn20a">
                                .css-1pgn20a {
                                    -webkit-transition: padding .1s;
                                    transition: padding .1s;
                                }

                                @media (max-width:767.95px) {
                                    .css-1pgn20a {
                                        min-height: 96px;
                                        padding: 32px 24px;
                                    }

                                    .expanded .css-1pgn20a {
                                        padding-bottom: 80px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1pgn20a {
                                        min-width: 110px;
                                        max-height: 310px;
                                        padding: 72px 24px 128px;
                                    }

                                    .expanded .css-1pgn20a {
                                        padding-left: 40px;
                                        padding-right: 40px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1pgn20a {
                                        min-width: 160px;
                                        padding: 104px 48px 76px;
                                    }

                                    .expanded .css-1pgn20a {
                                        padding-left: 80px;
                                        padding-right: 80px;
                                    }
                                }
                            </style>
                            <div class="css-1pgn20a">
                                <style data-emotion="css f939bp">
                                    @media (min-width:768px) {
                                        .css-f939bp {
                                            display: -webkit-box;
                                            display: -webkit-flex;
                                            display: -ms-flexbox;
                                            display: flex;
                                            -webkit-box-pack: center;
                                            -ms-flex-pack: center;
                                            -webkit-justify-content: center;
                                            justify-content: center;
                                        }
                                    }
                                </style>
                                <div class="css-f939bp">
                                    <style data-emotion="css vtze6a">
                                        .css-vtze6a {
                                            margin: 0;
                                            font-size: 40px;
                                            line-height: 1.1;
                                            font-weight: bold;
                                            font-family: Poppins, Noto Sans Thai, sans-serif;
                                            position: relative;
                                        }

                                        @media (min-width:768px) {
                                            .css-vtze6a {
                                                font-size: 72px;
                                                line-height: 1;
                                            }
                                        }
                                    </style>
                                    <style data-emotion="css bb2i7h">
                                        .css-bb2i7h {
                                            -webkit-transition: flex .1s;
                                            transition: flex .1s;
                                            margin: 0;
                                            font-size: 40px;
                                            line-height: 1.1;
                                            font-weight: bold;
                                            font-family: Poppins, Noto Sans Thai, sans-serif;
                                            position: relative;
                                        }

                                        .expanded .css-bb2i7h {
                                            -webkit-box-flex: 1;
                                            -webkit-flex-grow: 1;
                                            -ms-flex-positive: 1;
                                            flex-grow: 1;
                                            transition-delay: 1px;
                                        }

                                        @media (min-width:768px) {
                                            .css-bb2i7h {
                                                font-size: 72px;
                                                line-height: 1;
                                            }
                                        }
                                    </style>
                                    <h2 class="MuiTypography-root MuiTypography-h2 css-bb2i7h"
                                        data-testid="p-company-sec-4-1-title">D
                                        <style data-emotion="css 11r7wv6">
                                            .css-11r7wv6 {
                                                position: absolute;
                                                opacity: 0;
                                                -webkit-transition: opacity .1s;
                                                transition: opacity .1s;
                                            }

                                            .expanded .css-11r7wv6 {
                                                opacity: 1;
                                                -webkit-transition: opacity .1s .1s;
                                                transition: opacity .1s .1s;
                                            }

                                            @media (min-width:768px) {
                                                .expanded .css-11r7wv6 {
                                                    transition-delay: .3s;
                                                }
                                            }
                                        </style><span class="css-11r7wv6">esign</span>
                                    </h2>
                                </div>
                                <style data-emotion="css jkya1p">
                                    .expanded .css-jkya1p {
                                        margin-top: 24px;
                                    }

                                    @media (min-width:768px) {
                                        .expanded .css-jkya1p {
                                            margin-top: 32px;
                                        }
                                    }
                                </style>
                                <div class="css-jkya1p">
                                    <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="p-company-sec-4-1-description">
                                        <style data-emotion="css f2wnmy">
                                            .css-f2wnmy {
                                                position: absolute;
                                                opacity: 0;
                                                -webkit-transition: opacity .1s;
                                                transition: opacity .1s;
                                                left: 0;
                                                right: 0;
                                            }

                                            .expanded .css-f2wnmy {
                                                opacity: 1;
                                                -webkit-transition: opacity .1s .1s;
                                                transition: opacity .1s .1s;
                                            }

                                            @media (min-width:768px) {
                                                .expanded .css-f2wnmy {
                                                    transition-delay: .3s;
                                                }
                                            }

                                            @media (max-width:767.95px) {
                                                .css-f2wnmy {
                                                    top: 100px;
                                                    padding: 0px 24px;
                                                }
                                            }

                                            @media (min-width:768px) {
                                                .css-f2wnmy {
                                                    top: 176px;
                                                    padding: 0px 40px;
                                                }
                                            }

                                            @media (min-width:1200px) {
                                                .css-f2wnmy {
                                                    top: 208px;
                                                    padding: 0px 80px;
                                                }
                                            }
                                        </style><span class="css-f2wnmy">Design every experience with users in mind.</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <style data-emotion="css 1a3vj55">
                            .css-1a3vj55 {
                                cursor: pointer;
                                position: relative;
                                background-color: #1E7BFE;
                            }

                            @media (max-width:767.95px) {
                                .css-1a3vj55 {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-1a3vj55:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-1a3vj55:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-1a3vj55 {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-1a3vj55:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-1a3vj55:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-1a3vj55.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css 1v1osb5">
                            .css-1v1osb5 {
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                                background-color: #1E7BFE;
                            }

                            @media (min-width:768px) {
                                .css-1v1osb5 {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-1v1osb5 {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-1v1osb5:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-1v1osb5:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-1v1osb5 {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-1v1osb5:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-1v1osb5:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-1v1osb5.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css 1bw4e4o">
                            .css-1bw4e4o {
                                background-color: #111111;
                                color: #fff;
                                -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;
                                border-radius: 4px;
                                box-shadow: none;
                                background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                                background-color: #1E7BFE;
                            }

                            @media (min-width:768px) {
                                .css-1bw4e4o {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-1bw4e4o {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-1bw4e4o:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-1bw4e4o:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-1bw4e4o {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-1bw4e4o:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-1bw4e4o:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-1bw4e4o.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <div
                            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1bw4e4o">
                            <div class="css-1pgn20a">
                                <div class="css-f939bp">
                                    <h2 class="MuiTypography-root MuiTypography-h2 css-bb2i7h"
                                        data-testid="p-company-sec-4-2-title">I<span class="css-11r7wv6">nnovate</span>
                                    </h2>
                                </div>
                                <div class="css-jkya1p">
                                    <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                        data-testid="p-company-sec-4-2-description"><span class="css-f2wnmy">Innovate and
                                            iterate to find a better solution.</span></p>
                                </div>
                            </div>
                        </div>
                        <style data-emotion="css 1u4y0rv">
                            .css-1u4y0rv {
                                cursor: pointer;
                                position: relative;
                                background-color: #5DF591;
                            }

                            @media (max-width:767.95px) {
                                .css-1u4y0rv {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-1u4y0rv:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-1u4y0rv:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-1u4y0rv {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-1u4y0rv:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-1u4y0rv:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-1u4y0rv.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css b2m76">
                            .css-b2m76 {
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                                background-color: #5DF591;
                            }

                            @media (min-width:768px) {
                                .css-b2m76 {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-b2m76 {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-b2m76:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-b2m76:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-b2m76 {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-b2m76:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-b2m76:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-b2m76.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css 4u8m6s">
                            .css-4u8m6s {
                                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;
                                border-radius: 4px;
                                box-shadow: none;
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                                background-color: #5DF591;
                            }

                            @media (min-width:768px) {
                                .css-4u8m6s {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-4u8m6s {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-4u8m6s:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-4u8m6s:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-4u8m6s {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-4u8m6s:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-4u8m6s:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-4u8m6s.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <div
                            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-4u8m6s">
                            <div class="css-1pgn20a">
                                <div class="css-f939bp">
                                    <h2 class="MuiTypography-root MuiTypography-h2 css-bb2i7h"
                                        data-testid="p-company-sec-4-3-title">M<span class="css-11r7wv6">obilize</span>
                                    </h2>
                                </div>
                                <div class="css-jkya1p">
                                    <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                        data-testid="p-company-sec-4-3-description"><span class="css-f2wnmy">Mobilize the
                                            best talents and technology.</span></p>
                                </div>
                            </div>
                        </div>
                        <style data-emotion="css 1jhnksk">
                            .css-1jhnksk {
                                cursor: pointer;
                                position: relative;
                                background-color: #F6F8FB;
                            }

                            @media (max-width:767.95px) {
                                .css-1jhnksk {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-1jhnksk:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-1jhnksk:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-1jhnksk {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-1jhnksk:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-1jhnksk:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-1jhnksk.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css jmu9sl">
                            .css-jmu9sl {
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                                background-color: #F6F8FB;
                            }

                            @media (min-width:768px) {
                                .css-jmu9sl {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-jmu9sl {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-jmu9sl:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-jmu9sl:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-jmu9sl {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-jmu9sl:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-jmu9sl:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-jmu9sl.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <style data-emotion="css hncnb4">
                            .css-hncnb4 {
                                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;
                                border-radius: 4px;
                                box-shadow: none;
                                overflow: hidden;
                                border-radius: 12px;
                                cursor: pointer;
                                position: relative;
                                background-color: #F6F8FB;
                            }

                            @media (min-width:768px) {
                                .css-hncnb4 {
                                    border-radius: 20px;
                                }
                            }

                            @media (max-width:767.95px) {
                                .css-hncnb4 {
                                    border-radius: 10px 10px 0 0;
                                }

                                .css-hncnb4:not(:first-of-type) {
                                    margin-top: -16px;
                                }

                                .css-hncnb4:not(:last-of-type) {
                                    padding-bottom: 16px;
                                }
                            }

                            @media (min-width:768px) {
                                .css-hncnb4 {
                                    border-radius: 10px 0 0 10px;
                                    -webkit-transition: flex .2s .1s;
                                    transition: flex .2s .1s;
                                }

                                .css-hncnb4:not(:first-of-type) {
                                    margin-left: -16px;
                                }

                                .css-hncnb4:not(:last-of-type) {
                                    padding-right: 16px;
                                }

                                .css-hncnb4.expanded {
                                    -webkit-box-flex: 1;
                                    -webkit-flex-grow: 1;
                                    -ms-flex-positive: 1;
                                    flex-grow: 1;
                                }
                            }
                        </style>
                        <div
                            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root expanded css-hncnb4">
                            <div class="css-1pgn20a">
                                <div class="css-f939bp">
                                    <h2 class="MuiTypography-root MuiTypography-h2 css-bb2i7h"
                                        data-testid="p-company-sec-4-4-title">E<span class="css-11r7wv6">xpedite</span>
                                    </h2>
                                </div>
                                <div class="css-jkya1p">
                                    <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                        data-testid="p-company-sec-4-4-description"><span class="css-f2wnmy">Expedite
                                            every process to keep up with fast-paced lifestyles.</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <style data-emotion="css i6bazn">
            .css-i6bazn {
                overflow: hidden;
            }
        </style>
        <style data-emotion="css rycext">
            .css-rycext {
                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;
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-rycext">
            <style data-emotion="css 1j5121h">
                .css-1j5121h {
                    padding: 56px 0px 0px;
                }

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

                @media (min-width:1200px) {
                    .css-1j5121h {
                        padding: 88px 0px 0px;
                    }
                }
            </style>
            <style data-emotion="css ivpfq7">
                .css-ivpfq7 {
                    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;
                    padding: 56px 0px 0px;
                }

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

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

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

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

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

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

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

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

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

                @media (min-width:1200px) {
                    .css-ivpfq7 {
                        padding: 88px 0px 0px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-ivpfq7">
                <style data-emotion="css xi606m">
                    .css-xi606m {
                        text-align: center;
                    }
                </style>
                <style data-emotion="css 1iatin6">
                    .css-1iatin6 {
                        text-align: center;
                    }
                </style>
                <div class="MuiBox-root css-1iatin6">
                    <style data-emotion="css 1q7gyzr">
                        .css-1q7gyzr {
                            margin: 0;
                            font-size: 30px;
                            line-height: 1.333;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:768px) {
                            .css-1q7gyzr {
                                font-size: 40px;
                                line-height: 1.2;
                            }
                        }
                    </style><span class="MuiTypography-root MuiTypography-h3 css-1q7gyzr"
                        data-testid="p-company-sec-5-title">Our Team<style data-emotion="css 6heq0z">
                            .css-6heq0z {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #5DF591;
                            }

                            @media (min-width:768px) {
                                .css-6heq0z {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style><span class="MuiTypography-root MuiTypography-h3 css-6heq0z">.</span></span>
                </div>
                <div class="MuiBox-root css-0" data-testid="highlight-quote-card-list">
                    <style data-emotion="css gvwwm">
                        .css-gvwwm {
                            padding-top: 24px;
                        }

                        @media (min-width:768px) {
                            .css-gvwwm {
                                padding-top: 48px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-gvwwm {
                                padding-top: 56px;
                            }
                        }
                    </style>
                    <style data-emotion="css 1bae91e">
                        .css-1bae91e {
                            padding-top: 24px;
                        }

                        @media (min-width:768px) {
                            .css-1bae91e {
                                padding-top: 48px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-1bae91e {
                                padding-top: 56px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-1bae91e">
                        <style data-emotion="css 10eyoel">
                            .css-10eyoel {
                                padding-bottom: 56px;
                            }

                            @media (min-width:768px) {
                                .css-10eyoel {
                                    display: grid;
                                    grid-template-columns: 1fr 1fr;
                                    gap: 40px;
                                    padding: 0px 32px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-10eyoel {
                                    grid-template-columns: 1fr 2fr;
                                    padding: 0px;
                                }

                                .css-10eyoel.image-right {
                                    grid-template-columns: 2fr 1fr;
                                }
                            }
                        </style>
                        <style data-emotion="css 1x9eqx0">
                            .css-1x9eqx0 {
                                padding-bottom: 56px;
                            }

                            @media (min-width:768px) {
                                .css-1x9eqx0 {
                                    display: grid;
                                    grid-template-columns: 1fr 1fr;
                                    gap: 40px;
                                    padding: 0px 32px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-1x9eqx0 {
                                    grid-template-columns: 1fr 2fr;
                                    padding: 0px;
                                }

                                .css-1x9eqx0.image-right {
                                    grid-template-columns: 2fr 1fr;
                                }
                            }
                        </style>
                        <div class=" MuiBox-root css-1x9eqx0">
                            <style data-emotion="css 1dsts2l">
                                .css-1dsts2l {
                                    position: relative;
                                    padding: 0px 16px;
                                }

                                @media (min-width:768px) {
                                    .css-1dsts2l {
                                        -webkit-align-self: start;
                                        -ms-flex-item-align: start;
                                        align-self: start;
                                        padding: 16px;
                                    }

                                    .css-1dsts2l.image-right {
                                        grid-column: 2/3;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1wyxv9g">
                                .css-1wyxv9g {
                                    position: relative;
                                    padding: 0px 16px;
                                }

                                @media (min-width:768px) {
                                    .css-1wyxv9g {
                                        -webkit-align-self: start;
                                        -ms-flex-item-align: start;
                                        align-self: start;
                                        padding: 16px;
                                    }

                                    .css-1wyxv9g.image-right {
                                        grid-column: 2/3;
                                    }
                                }
                            </style>
                            <div class=" MuiBox-root css-1wyxv9g">
                                <style data-emotion="css 1h53qlf">
                                    .css-1h53qlf {
                                        border-radius: 20px;
                                        width: 100%;
                                        height: 100%;
                                    }

                                    @media (min-width:768px) {
                                        .css-1h53qlf {
                                            min-height: 436px;
                                        }
                                    }
                                </style><img src="{{ asset('images/team/boss.webp') }}" data-testid="image"
                                    alt="Kampol Jantavibool - Chief Executive Officer" class="css-1h53qlf" />
                                <style data-emotion="css nvndxl">
                                    .css-nvndxl {
                                        color: #FFFFFF;
                                        padding-left: 16px;
                                        position: absolute;
                                        bottom: 56px;
                                        border-left: 5px;
                                        border-left-style: solid;
                                        border-left-color: #5DF591;
                                    }

                                    .css-nvndxl>h5 {
                                        word-spacing: 100vw;
                                    }
                                </style>
                                <style data-emotion="css glu9q3">
                                    .css-glu9q3 {
                                        color: #FFFFFF;
                                        padding-left: 16px;
                                        position: absolute;
                                        bottom: 56px;
                                        border-left: 5px;
                                        border-left-style: solid;
                                        border-left-color: #5DF591;
                                    }

                                    .css-glu9q3>h5 {
                                        word-spacing: 100vw;
                                    }
                                </style>
                                <div class="MuiBox-root css-glu9q3">
                                    <style data-emotion="css o8xdls">
                                        .css-o8xdls {
                                            margin: 0;
                                            font-size: 18px;
                                            line-height: 1.333;
                                            font-weight: bold;
                                            font-family: Poppins, Noto Sans Thai, sans-serif;
                                        }

                                        @media (min-width:768px) {
                                            .css-o8xdls {
                                                font-size: 22px;
                                                line-height: 1.273;
                                            }
                                        }
                                    </style>
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls" data-testid="name">Kampol
                                        Jantavibool</h5>
                                    <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="job">Chief
                                        Executive Officer</p>
                                </div>
                            </div>
                            <style data-emotion="css nf324g">
                                .css-nf324g {
                                    color: #898989;
                                }

                                @media (max-width:767.95px) {
                                    .css-nf324g {
                                        padding: 0px 16px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-nf324g.image-right {
                                        padding-left: 16px;
                                        grid-row-start: 1;
                                        grid-column: 1/2;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-nf324g.image-right {
                                        padding-left: 72px;
                                    }
                                }
                            </style>
                            <style data-emotion="css x2g2y">
                                .css-x2g2y {
                                    color: #898989;
                                }

                                @media (max-width:767.95px) {
                                    .css-x2g2y {
                                        padding: 0px 16px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-x2g2y.image-right {
                                        padding-left: 16px;
                                        grid-row-start: 1;
                                        grid-column: 1/2;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-x2g2y.image-right {
                                        padding-left: 72px;
                                    }
                                }
                            </style>
                            <div class=" MuiBox-root css-x2g2y">
                                <style data-emotion="css 1fqp4dt">
                                    .css-1fqp4dt {
                                        width: 36px;
                                        height: 36px;
                                        margin: 20px 0px 16px;
                                    }

                                    @media (min-width:1200px) {
                                        .css-1fqp4dt {
                                            width: 40px;
                                            height: 40px;
                                            margin: 64px 0px 16px;
                                        }
                                    }
                                </style><img src="{{ asset('images/about-us/icon-quote.svg') }}" alt="icon-quote-image"
                                    width="40" height="40" class="css-1fqp4dt" />
                                <style data-emotion="css 1y9e01">
                                    .css-1y9e01 {
                                        margin: 0;
                                        font-size: 14px;
                                        line-height: 1.714;
                                        font-weight: 400;
                                        font-family: Poppins, Noto Sans Thai, sans-serif;
                                        white-space: pre-wrap;
                                    }

                                    @media (min-width:768px) {
                                        .css-1y9e01 {
                                            font-size: 16px;
                                            line-height: 1.75;
                                        }
                                    }
                                </style>
                                <p class="MuiTypography-root MuiTypography-body1 css-1y9e01" data-testid="quote">The word
                                    &quot;CPALL&quot; means a small amount of money and a perfect ten, which summarizes
                                    the
                                    mission of our company to provide smart, convenient, low-cost, and personalized access
                                    to financial products and services by utilizing
                                    digital technologies. Our team plays an integral role in this mission. Most of the team
                                    members are technology experts, like data scientists, data engineers, or software
                                    developers. They all joined the team with the goal
                                    to provide financial access for all and reduce social inequality, which is a significant
                                    problem in Thailand at the moment.</p>
                            </div>
                        </div>
                        <div class="image-right MuiBox-root css-1x9eqx0">
                            <div class="image-right MuiBox-root css-1wyxv9g"><img
                                    src="{{ asset('images/team/bt2.webp') }}" data-testid="image"
                                    alt="Chalermwut Chomanan - Chief Technology Officer" class="css-1h53qlf" />
                                <div class="MuiBox-root css-glu9q3">
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls" data-testid="name">
                                        Chalermwut Chomanan</h5>
                                    <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w" data-testid="job">Chief
                                        Technology Officer</p>
                                </div>
                            </div>
                            <div class="image-right MuiBox-root css-x2g2y"><img
                                    src="{{ asset('images/about-us/icon-quote.svg') }}" alt="icon-quote-image"
                                    width="40" height="40" class="css-1fqp4dt" />
                                <p class="MuiTypography-root MuiTypography-body1 css-1y9e01" data-testid="quote">A lot of
                                    Thai people still don&#x27;t have easy and low-cost access to financial services maybe
                                    because they don&#x27;t have enough money, knowledge, or time. At CPALL!, we believe
                                    technology is key to providing these people
                                    with low-cost access to financial products and services that are suitable for their
                                    preferences and objectives. CPALL! Technology Team has gathered technology talents
                                    from
                                    both inside and outside the financial sectors and
                                    developed our technology capability in order to create financial products that can
                                    actually provide financial inclusion for all.</p>
                            </div>
                        </div>
                        <div class=" MuiBox-root css-1x9eqx0">
                            <div class=" MuiBox-root css-1wyxv9g"><img src="{{ asset('images/team/bt3.webp') }}"
                                    data-testid="image" alt="Chattrin Laksanabunsong - Chief Product Officer"
                                    class="css-1h53qlf" />
                                <div class="MuiBox-root css-glu9q3">
                                    <h5 class="MuiTypography-root MuiTypography-h5 css-o8xdls" data-testid="name">Chattrin
                                        Laksanabunsong</h5>
                                    <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w" data-testid="job">Chief
                                        Product Officer</p>
                                </div>
                            </div>
                            <div class=" MuiBox-root css-x2g2y"><img src="{{ asset('images/about-us/icon-quote.svg') }}"
                                    alt="icon-quote-image" width="40" height="40" class="css-1fqp4dt" />
                                <p class="MuiTypography-root MuiTypography-body1 css-1y9e01" data-testid="quote">
                                    Thailand’s savings rate is just around 10% of income, while it is 30% in Japan and South
                                    Korea. Besides, Thais start to save very late in their life. More than 40% of them have
                                    not prepared savings for retirement and more than
                                    97% don’t have enough money for retirement. CPALL! wants to help Thai people save and
                                    invest early and have a secure and wealthy retirement. The later we save, the more
                                    opportunities we lose. Just like the Chinese proverb
                                    that says, “The best time to plant a tree was 20 years ago. The second best time is
                                    now.”</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="MuiBox-root css-0" data-testid="quote-card-list">
            <style data-emotion="css zctuic">
                .css-zctuic {
                    margin-top: 0px;
                    margin-bottom: 24px;
                }

                @media (min-width:768px) {
                    .css-zctuic {
                        margin-top: 80px;
                        margin-bottom: 48px;
                    }
                }

                @media (min-width:1200px) {
                    .css-zctuic {
                        margin-bottom: 80px;
                    }
                }
            </style>
            <style data-emotion="css 1ib6u00">
                .css-1ib6u00 {
                    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;
                    margin-top: 0px;
                    margin-bottom: 24px;
                }

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

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

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

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

                @media (min-width:768px) {
                    .css-1ib6u00 {
                        margin-top: 80px;
                        margin-bottom: 48px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1ib6u00 {
                        margin-bottom: 80px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg css-1ib6u00">
                <style data-emotion="css 1y2saxb">
                    .css-1y2saxb {
                        position: relative;
                        margin: -80px -24px;
                    }

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

                    @media (min-width:1200px) {
                        .css-1y2saxb {
                            margin: -80px -80px;
                        }
                    }
                </style>
                <div class="css-1y2saxb">
                    <style data-emotion="css 1gaztv2">
                        .css-1gaztv2 {
                            overflow: scroll;
                            -ms-overflow-style: none;
                            scrollbar-width: none;
                        }

                        .css-1gaztv2::-webkit-scrollbar {
                            display: none;
                        }
                    </style>
                    <div id="QuoteCards" class="css-1gaztv2">
                        <style data-emotion="css 1msay8m">
                            .css-1msay8m {
                                display: -webkit-inline-box;
                                display: -webkit-inline-flex;
                                display: -ms-inline-flexbox;
                                display: inline-flex;
                                padding: 80px 24px;
                            }

                            @media (min-width:768px) {
                                .css-1msay8m {
                                    padding: 80px 40px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-1msay8m {
                                    padding: 80px 80px;
                                }
                            }
                        </style>
                        <div class="css-1msay8m">
                            <style data-emotion="css 1540bvv">
                                .css-1540bvv {
                                    position: relative;
                                    display: -webkit-box;
                                    display: -webkit-flex;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-flex-direction: column;
                                    -ms-flex-direction: column;
                                    flex-direction: column;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    color: #898989;
                                    margin-left: 24px;
                                    padding: 32px 32px;
                                    min-width: calc(100vw - 48px);
                                }

                                .css-1540bvv:first-of-type {
                                    margin-left: 0;
                                }

                                @media (min-width:428px) {
                                    .css-1540bvv {
                                        padding: 32px 40px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1540bvv {
                                        margin-left: 40px;
                                        padding: 48px 80px;
                                        min-width: 522px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1540bvv {
                                        margin-left: 80px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 56nw93">
                                .css-56nw93 {
                                    overflow: hidden;
                                    border-radius: 12px;
                                    position: relative;
                                    display: -webkit-box;
                                    display: -webkit-flex;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-flex-direction: column;
                                    -ms-flex-direction: column;
                                    flex-direction: column;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    color: #898989;
                                    margin-left: 24px;
                                    padding: 32px 32px;
                                    min-width: calc(100vw - 48px);
                                }

                                @media (min-width:768px) {
                                    .css-56nw93 {
                                        border-radius: 20px;
                                    }
                                }

                                .css-56nw93:first-of-type {
                                    margin-left: 0;
                                }

                                @media (min-width:428px) {
                                    .css-56nw93 {
                                        padding: 32px 40px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-56nw93 {
                                        margin-left: 40px;
                                        padding: 48px 80px;
                                        min-width: 522px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-56nw93 {
                                        margin-left: 80px;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1l2m063">
                                .css-1l2m063 {
                                    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;
                                    border-radius: 4px;
                                    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
                                    overflow: hidden;
                                    border-radius: 12px;
                                    position: relative;
                                    display: -webkit-box;
                                    display: -webkit-flex;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-flex-direction: column;
                                    -ms-flex-direction: column;
                                    flex-direction: column;
                                    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.06);
                                    color: #898989;
                                    margin-left: 24px;
                                    padding: 32px 32px;
                                    min-width: calc(100vw - 48px);
                                }

                                @media (min-width:768px) {
                                    .css-1l2m063 {
                                        border-radius: 20px;
                                    }
                                }

                                .css-1l2m063:first-of-type {
                                    margin-left: 0;
                                }

                                @media (min-width:428px) {
                                    .css-1l2m063 {
                                        padding: 32px 40px;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-1l2m063 {
                                        margin-left: 40px;
                                        padding: 48px 80px;
                                        min-width: 522px;
                                    }
                                }

                                @media (min-width:1200px) {
                                    .css-1l2m063 {
                                        margin-left: 80px;
                                    }
                                }
                            </style>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l2m063">
                                <style data-emotion="css 1c52drc">
                                    .css-1c52drc {
                                        position: absolute;
                                        background-color: #5DF591;
                                        width: 5px;
                                        border-radius: 10px;
                                        left: 0;
                                        top: 32px;
                                        bottom: 32px;
                                    }

                                    @media (min-width:768px) {
                                        .css-1c52drc {
                                            top: 48px;
                                            bottom: 48px;
                                        }
                                    }
                                </style>
                                <div class="css-1c52drc"></div>
                                <style data-emotion="css 1swf1ty">
                                    .css-1swf1ty {
                                        width: 32px;
                                        height: 32px;
                                        margin-bottom: 8px;
                                    }

                                    @media (min-width:428px) {
                                        .css-1swf1ty {
                                            margin-bottom: 16px;
                                        }
                                    }

                                    @media (min-width:768px) {
                                        .css-1swf1ty {
                                            width: 40px;
                                            height: 40px;
                                        }
                                    }
                                </style><img src="{{ asset('images/about-us/icon-quote.svg') }}" alt="icon-quote"
                                    class="css-1swf1ty" />
                                <style data-emotion="css i9gxme">
                                    .css-i9gxme {
                                        -webkit-box-flex: 1;
                                        -webkit-flex-grow: 1;
                                        -ms-flex-positive: 1;
                                        flex-grow: 1;
                                    }
                                </style>
                                <style data-emotion="css 1jr3b7">
                                    .css-1jr3b7 {
                                        margin: 0;
                                        font-size: 14px;
                                        line-height: 1.714;
                                        font-weight: 600;
                                        font-family: Poppins, Noto Sans Thai, sans-serif;
                                        -webkit-box-flex: 1;
                                        -webkit-flex-grow: 1;
                                        -ms-flex-positive: 1;
                                        flex-grow: 1;
                                    }

                                    @media (min-width:428px) {
                                        .css-1jr3b7 {
                                            font-size: 16px;
                                            line-height: 1.75;
                                        }
                                    }
                                </style>
                                <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1jr3b7">The word
                                    &quot;impossible&quot; is not in my dictionary. Here at CPALL!, we make investment
                                    possible for everyone.</h6>
                                <style data-emotion="css 1k8muie">
                                    .css-1k8muie {
                                        display: -webkit-box;
                                        display: -webkit-flex;
                                        display: -ms-flexbox;
                                        display: flex;
                                        -webkit-flex-direction: column;
                                        -ms-flex-direction: column;
                                        flex-direction: column;
                                        margin-top: 16px;
                                    }

                                    @media (min-width:428px) {
                                        .css-1k8muie {
                                            -webkit-flex-direction: row;
                                            -ms-flex-direction: row;
                                            flex-direction: row;
                                            -webkit-align-items: center;
                                            -webkit-box-align: center;
                                            -ms-flex-align: center;
                                            align-items: center;
                                            margin-top: 24px;
                                        }
                                    }

                                    @media (min-width:768px) {
                                        .css-1k8muie {
                                            margin-top: 72px;
                                        }
                                    }
                                </style>
                                <div class="css-1k8muie">
                                    <style data-emotion="css 2vffrb">
                                        .css-2vffrb {
                                            -webkit-flex-shrink: 0;
                                            -ms-flex-negative: 0;
                                            flex-shrink: 0;
                                            border-radius: 50%;
                                            object-fit: cover;
                                            width: 70px;
                                            height: 70px;
                                        }

                                        @media (min-width:428px) {
                                            .css-2vffrb {
                                                width: 90px;
                                                height: 90px;
                                                margin: 20px 0px;
                                            }
                                        }
                                    </style>
                                    <img src="{{ asset('images/team/st.webp') }}"
                                        alt="Piyawiit Piasakul (Aof) - Head of Application Architect"
                                        class="css-2vffrb" />
                                    <style data-emotion="css 1ivnkva">
                                        .css-1ivnkva {
                                            -webkit-box-flex: 1;
                                            -webkit-flex-grow: 1;
                                            -ms-flex-positive: 1;
                                            flex-grow: 1;
                                            margin-top: 16px;
                                        }

                                        @media (min-width:428px) {
                                            .css-1ivnkva {
                                                margin-top: 0;
                                                margin-left: 20px;
                                            }
                                        }
                                    </style>
                                    <div class="css-1ivnkva">
                                        <style data-emotion="css 1ex2906">
                                            .css-1ex2906 {
                                                margin: 0;
                                                font-size: 14px;
                                                line-height: 1.714;
                                                font-weight: 600;
                                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                                color: #000;
                                            }

                                            @media (min-width:428px) {
                                                .css-1ex2906 {
                                                    font-size: 16px;
                                                    line-height: 1.75;
                                                }
                                            }
                                        </style>
                                        <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1ex2906">Piyawiit
                                            Piasakul (Aof)</h6>
                                        <style data-emotion="css 18dc7nh">
                                            .css-18dc7nh {
                                                margin: 0;
                                                font-size: 13px;
                                                line-height: 1.692;
                                                font-weight: 400;
                                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                            }

                                            @media (min-width:768px) {
                                                .css-18dc7nh {
                                                    font-size: 14px;
                                                    line-height: 1.714;
                                                }
                                            }
                                        </style>
                                        <p class="MuiTypography-root MuiTypography-body2 css-18dc7nh">Head of Application
                                            Architect</p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l2m063">
                                <div class="css-1c52drc"></div><img src="{{ asset('images/about-us/icon-quote.svg') }}"
                                    alt="icon-quote" class="css-1swf1ty" />
                                <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1jr3b7">Personal and public
                                    interests do not have to be separated. At CPALL!, we hope for one thing. We want all
                                    Thai
                                    people to have easy access to investment. You get to invest. We get new clients. The
                                    capital market gets to grow.</h6>
                                <div class="css-1k8muie"><img src="{{ asset('images/team/st1.webp') }}"
                                        alt="Woraphon Wongwattanakit (Ben) - Head of Product" class="css-2vffrb" />
                                    <div class="css-1ivnkva">
                                        <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1ex2906">Woraphon
                                            Wongwattanakit (Ben)</h6>
                                        <p class="MuiTypography-root MuiTypography-body2 css-18dc7nh">Head of Product</p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l2m063">
                                <div class="css-1c52drc"></div><img src="{{ asset('images/about-us/icon-quote.svg') }}"
                                    alt="icon-quote" class="css-1swf1ty" />
                                <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1jr3b7">You may think investment
                                    is difficult to understand and requires a lot of money. CPALL! is changing that now
                                    and
                                    will make finance accessible to everyone.</h6>
                                <div class="css-1k8muie"><img src="{{ asset('images/team/boss.webp') }}"
                                        alt="Panida Thephasadin Na Ayutaya (Tonnam) - Quality Assurance Automation Engineer"
                                        class="css-2vffrb" />
                                    <div class="css-1ivnkva">
                                        <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1ex2906">Panida
                                            Thephasadin Na Ayutaya (Tonnam)</h6>
                                        <p class="MuiTypography-root MuiTypography-body2 css-18dc7nh">Quality Assurance
                                            Automation Engineer</p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l2m063">
                                <div class="css-1c52drc"></div><img src="{{ asset('images/about-us/icon-quote.svg') }}"
                                    alt="icon-quote" class="css-1swf1ty" />
                                <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1jr3b7">Getting into investment
                                    should not be a struggle. If a complete beginner decides it’s a D-day to dip his toes
                                    into an investment, being intimidated upon opening an app shouldn’t be where it ends.
                                    Our goal is to make finance as
                                    accessible as it can be. Yes, many things in investment can be difficult, but getting
                                    started shouldn’t be one.</h6>
                                <div class="css-1k8muie"><img
                                        src="https://CPALL.co.th/api/assets/d2b9b415-a199-4834-a511-b3378beff425?format=webp&amp;width=90&amp;height=90&amp;quality=75"
                                        alt="Panisa Srihamontree (Nan) - Head of Design" class="css-2vffrb" />
                                    <div class="css-1ivnkva">
                                        <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1ex2906">Panisa
                                            Srihamontree (Nan)</h6>
                                        <p class="MuiTypography-root MuiTypography-body2 css-18dc7nh">Head of Design</p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1l2m063">
                                <div class="css-1c52drc"></div><img src="{{ asset('images/about-us/icon-quote.svg') }}"
                                    alt="icon-quote" class="css-1swf1ty" />
                                <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1jr3b7">When investment
                                    enthusiasts, customer enthusiasts, and disruption enthusiasts get to work together, the
                                    product is the innovation that will democratize and revolutionize finance and
                                    investment.</h6>
                                <div class="css-1k8muie"><img
                                        src="https://CPALL.co.th/api/assets/ad6e2486-6866-46ae-9f53-52f3f4c187f8?format=webp&amp;width=90&amp;height=90&amp;quality=75"
                                        alt="Tanakrit Rungrojchaiporn (Green) - Head of Marketing" class="css-2vffrb" />
                                    <div class="css-1ivnkva">
                                        <h6 class="MuiTypography-root MuiTypography-subtitle1 css-1ex2906">Tanakrit
                                            Rungrojchaiporn (Green)</h6>
                                        <p class="MuiTypography-root MuiTypography-body2 css-18dc7nh">Head of Marketing</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <style data-emotion="css rwltoc">
                        .css-rwltoc {
                            position: absolute;
                            width: 20px;
                            top: 0;
                            bottom: 0;
                            left: -1px;
                            background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
                        }
                    </style>
                    <div class="css-rwltoc"></div>
                    <style data-emotion="css fg4asg">
                        .css-fg4asg {
                            position: absolute;
                            width: 20px;
                            top: 0;
                            bottom: 0;
                            right: -1px;
                            background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
                        }
                    </style>
                    <div class="css-fg4asg"></div>
                </div>
                <style data-emotion="css 18lsc6d">
                    .css-18lsc6d {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        margin-top: 20px;
                    }

                    @media (min-width:428px) {
                        .css-18lsc6d {
                            margin-top: 24px;
                        }
                    }

                    @media (min-width:768px) {
                        .css-18lsc6d {
                            margin-top: 32px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-18lsc6d {
                            margin-top: 40px;
                        }
                    }
                </style>
                <div class="css-18lsc6d">
                    <div class="css-i9gxme"></div>
                    <div class="css-0">
                        <style data-emotion="css 81i35o">
                            .css-81i35o {
                                min-width: 0;
                                padding: 0;
                                border-radius: 50%;
                                width: 40px;
                                height: 40px;
                                margin-right: 10px;
                                -webkit-transform: rotate(180deg);
                                -moz-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }

                            @media (min-width:428px) {
                                .css-81i35o {
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                        </style>
                        <style data-emotion="css 11u1ezh">
                            .css-11u1ezh {
                                text-transform: none;
                                font-size: 14px;
                                font-weight: 600;
                                line-height: 1.714;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                min-width: 64px;
                                padding: 6px 16px;
                                border-radius: 4px;
                                -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                color: #111111;
                                background-color: #5DF591;
                                box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                                box-shadow: none;
                                border-radius: 8px;
                                min-width: 0;
                                padding: 0;
                                border-radius: 50%;
                                width: 40px;
                                height: 40px;
                                margin-right: 10px;
                                -webkit-transform: rotate(180deg);
                                -moz-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }

                            .css-11u1ezh:hover {
                                -webkit-text-decoration: none;
                                text-decoration: none;
                                background-color: rgb(65, 171, 101);
                                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                            }

                            @media (hover: none) {
                                .css-11u1ezh:hover {
                                    background-color: #5DF591;
                                }
                            }

                            .css-11u1ezh:active {
                                box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                            }

                            .css-11u1ezh.Mui-focusVisible {
                                box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                            }

                            .css-11u1ezh.Mui-disabled {
                                color: rgba(0, 0, 0, 0.26);
                                box-shadow: none;
                                background-color: rgba(0, 0, 0, 0.12);
                            }

                            .css-11u1ezh:hover {
                                box-shadow: none;
                            }

                            .css-11u1ezh.Mui-focusVisible {
                                box-shadow: none;
                            }

                            .css-11u1ezh:active {
                                box-shadow: none;
                            }

                            .css-11u1ezh.Mui-disabled {
                                box-shadow: none;
                            }

                            @media (min-width:428px) {
                                .css-11u1ezh {
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                        </style>
                        <style data-emotion="css 1p3s8w8">
                            .css-1p3s8w8 {
                                display: -webkit-inline-box;
                                display: -webkit-inline-flex;
                                display: -ms-inline-flexbox;
                                display: inline-flex;
                                -webkit-align-items: center;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                -webkit-justify-content: center;
                                justify-content: center;
                                position: relative;
                                box-sizing: border-box;
                                -webkit-tap-highlight-color: transparent;
                                background-color: transparent;
                                outline: 0;
                                border: 0;
                                margin: 0;
                                border-radius: 0;
                                padding: 0;
                                cursor: pointer;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                -ms-user-select: none;
                                user-select: none;
                                vertical-align: middle;
                                -moz-appearance: none;
                                -webkit-appearance: none;
                                -webkit-text-decoration: none;
                                text-decoration: none;
                                color: inherit;
                                text-transform: none;
                                font-size: 14px;
                                font-weight: 600;
                                line-height: 1.714;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                min-width: 64px;
                                padding: 6px 16px;
                                border-radius: 4px;
                                -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                color: #111111;
                                background-color: #5DF591;
                                box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                                box-shadow: none;
                                border-radius: 8px;
                                min-width: 0;
                                padding: 0;
                                border-radius: 50%;
                                width: 40px;
                                height: 40px;
                                margin-right: 10px;
                                -webkit-transform: rotate(180deg);
                                -moz-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }

                            .css-1p3s8w8::-moz-focus-inner {
                                border-style: none;
                            }

                            .css-1p3s8w8.Mui-disabled {
                                pointer-events: none;
                                cursor: default;
                            }

                            @media print {
                                .css-1p3s8w8 {
                                    -webkit-print-color-adjust: exact;
                                    color-adjust: exact;
                                }
                            }

                            .css-1p3s8w8:hover {
                                -webkit-text-decoration: none;
                                text-decoration: none;
                                background-color: rgb(65, 171, 101);
                                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                            }

                            @media (hover: none) {
                                .css-1p3s8w8:hover {
                                    background-color: #5DF591;
                                }
                            }

                            .css-1p3s8w8:active {
                                box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                            }

                            .css-1p3s8w8.Mui-focusVisible {
                                box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                            }

                            .css-1p3s8w8.Mui-disabled {
                                color: rgba(0, 0, 0, 0.26);
                                box-shadow: none;
                                background-color: rgba(0, 0, 0, 0.12);
                            }

                            .css-1p3s8w8:hover {
                                box-shadow: none;
                            }

                            .css-1p3s8w8.Mui-focusVisible {
                                box-shadow: none;
                            }

                            .css-1p3s8w8:active {
                                box-shadow: none;
                            }

                            .css-1p3s8w8.Mui-disabled {
                                box-shadow: none;
                            }

                            @media (min-width:428px) {
                                .css-1p3s8w8 {
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                        </style><button
                            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root Mui-disabled css-1p3s8w8"
                            tabindex="-1" type="button" disabled=""><img
                                src="{{ asset('images/about-us/arrow-right.svg') }}" alt="&lt;" width="8"
                                height="12" /></button>
                        <style data-emotion="css 1kbbqbf">
                            .css-1kbbqbf {
                                min-width: 0;
                                padding: 0;
                                border-radius: 50%;
                                width: 40px;
                                height: 40px;
                            }

                            @media (min-width:428px) {
                                .css-1kbbqbf {
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                        </style>
                        <style data-emotion="css 1qe7ynh">
                            .css-1qe7ynh {
                                text-transform: none;
                                font-size: 14px;
                                font-weight: 600;
                                line-height: 1.714;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                min-width: 64px;
                                padding: 6px 16px;
                                border-radius: 4px;
                                -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                color: #111111;
                                background-color: #5DF591;
                                box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                                box-shadow: none;
                                border-radius: 8px;
                                min-width: 0;
                                padding: 0;
                                border-radius: 50%;
                                width: 40px;
                                height: 40px;
                            }

                            .css-1qe7ynh:hover {
                                -webkit-text-decoration: none;
                                text-decoration: none;
                                background-color: rgb(65, 171, 101);
                                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                            }

                            @media (hover: none) {
                                .css-1qe7ynh:hover {
                                    background-color: #5DF591;
                                }
                            }

                            .css-1qe7ynh:active {
                                box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                            }

                            .css-1qe7ynh.Mui-focusVisible {
                                box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                            }

                            .css-1qe7ynh.Mui-disabled {
                                color: rgba(0, 0, 0, 0.26);
                                box-shadow: none;
                                background-color: rgba(0, 0, 0, 0.12);
                            }

                            .css-1qe7ynh:hover {
                                box-shadow: none;
                            }

                            .css-1qe7ynh.Mui-focusVisible {
                                box-shadow: none;
                            }

                            .css-1qe7ynh:active {
                                box-shadow: none;
                            }

                            .css-1qe7ynh.Mui-disabled {
                                box-shadow: none;
                            }

                            @media (min-width:428px) {
                                .css-1qe7ynh {
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                        </style>
                        <style data-emotion="css z6otrq">
                            .css-z6otrq {
                                display: -webkit-inline-box;
                                display: -webkit-inline-flex;
                                display: -ms-inline-flexbox;
                                display: inline-flex;
                                -webkit-align-items: center;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                -webkit-justify-content: center;
                                justify-content: center;
                                position: relative;
                                box-sizing: border-box;
                                -webkit-tap-highlight-color: transparent;
                                background-color: transparent;
                                outline: 0;
                                border: 0;
                                margin: 0;
                                border-radius: 0;
                                padding: 0;
                                cursor: pointer;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                -ms-user-select: none;
                                user-select: none;
                                vertical-align: middle;
                                -moz-appearance: none;
                                -webkit-appearance: none;
                                -webkit-text-decoration: none;
                                text-decoration: none;
                                color: inherit;
                                text-transform: none;
                                font-size: 14px;
                                font-weight: 600;
                                line-height: 1.714;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                min-width: 64px;
                                padding: 6px 16px;
                                border-radius: 4px;
                                -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                color: #111111;
                                background-color: #5DF591;
                                box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                                box-shadow: none;
                                border-radius: 8px;
                                min-width: 0;
                                padding: 0;
                                border-radius: 50%;
                                width: 40px;
                                height: 40px;
                            }

                            .css-z6otrq::-moz-focus-inner {
                                border-style: none;
                            }

                            .css-z6otrq.Mui-disabled {
                                pointer-events: none;
                                cursor: default;
                            }

                            @media print {
                                .css-z6otrq {
                                    -webkit-print-color-adjust: exact;
                                    color-adjust: exact;
                                }
                            }

                            .css-z6otrq:hover {
                                -webkit-text-decoration: none;
                                text-decoration: none;
                                background-color: rgb(65, 171, 101);
                                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                            }

                            @media (hover: none) {
                                .css-z6otrq:hover {
                                    background-color: #5DF591;
                                }
                            }

                            .css-z6otrq:active {
                                box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                            }

                            .css-z6otrq.Mui-focusVisible {
                                box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                            }

                            .css-z6otrq.Mui-disabled {
                                color: rgba(0, 0, 0, 0.26);
                                box-shadow: none;
                                background-color: rgba(0, 0, 0, 0.12);
                            }

                            .css-z6otrq:hover {
                                box-shadow: none;
                            }

                            .css-z6otrq.Mui-focusVisible {
                                box-shadow: none;
                            }

                            .css-z6otrq:active {
                                box-shadow: none;
                            }

                            .css-z6otrq.Mui-disabled {
                                box-shadow: none;
                            }

                            @media (min-width:428px) {
                                .css-z6otrq {
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                        </style><button
                            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root Mui-disabled css-z6otrq"
                            tabindex="-1" type="button" disabled=""><img
                                src="{{ asset('images/about-us/arrow-right.svg') }}" alt="&gt;" width="8"
                                height="12" /></button>
                    </div>
                </div>
            </div>
        </div>
        <style data-emotion="css 1cpr9rl">
            .css-1cpr9rl.quoteUndefined {
                margin-top: 80px;
            }
        </style>
        <style data-emotion="css d980xf">
            .css-d980xf.quoteUndefined {
                margin-top: 80px;
            }
        </style>
        <div class=" MuiBox-root css-d980xf">
            <style data-emotion="css 1ifvlt3">
                .css-1ifvlt3 {
                    background-color: #00040E;
                    -webkit-background-size: cover;
                    background-size: cover;
                    background-repeat: no-repeat;
                    -webkit-background-position: center;
                    background-position: center;
                    background-image: url("/about-us-join-us-bg-xs.webp");
                }

                @media (min-width:428px) {
                    .css-1ifvlt3 {
                        background-image: url("/about-us-join-us-bg-sm.webp");
                    }
                }

                @media (min-width:768px) {
                    .css-1ifvlt3 {
                        background-image: url("/about-us-join-us-bg-md.webp");
                    }
                }

                @media (min-width:1200px) {
                    .css-1ifvlt3 {
                        background-image: url("/about-us-join-us-bg-lg.webp");
                    }
                }

                @media (min-width:1536px) {
                    .css-1ifvlt3 {
                        background-image: url("/about-us-join-us-bg-xl.webp");
                    }
                }
            </style>
            <style data-emotion="css 1ior7sx">
                .css-1ior7sx {
                    background-color: #111111;
                    color: #fff;
                    -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;
                    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
                    background-color: #00040E;
                    -webkit-background-size: cover;
                    background-size: cover;
                    background-repeat: no-repeat;
                    -webkit-background-position: center;
                    background-position: center;
                    background-image: url("/about-us-join-us-bg-xs.webp");
                }

                @media (min-width:428px) {
                    .css-1ior7sx {
                        background-image: url("/about-us-join-us-bg-sm.webp");
                    }
                }

                @media (min-width:768px) {
                    .css-1ior7sx {
                        background-image: url("/about-us-join-us-bg-md.webp");
                    }
                }

                @media (min-width:1200px) {
                    .css-1ior7sx {
                        background-image: url("/about-us-join-us-bg-lg.webp");
                    }
                }

                @media (min-width:1536px) {
                    .css-1ior7sx {
                        background-image: url("/about-us-join-us-bg-xl.webp");
                    }
                }
            </style>
            <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1ior7sx">
                <style data-emotion="css a5judu">
                    .css-a5judu {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-flex-direction: column;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        padding: 0px 56px;
                    }

                    @media (min-width:768px) {
                        .css-a5judu {
                            -webkit-flex-direction: row-reverse;
                            -ms-flex-direction: row-reverse;
                            flex-direction: row-reverse;
                            padding: 0px 40px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-a5judu {
                            padding: 0px 64px;
                        }
                    }
                </style>
                <style data-emotion="css 16br2mr">
                    .css-16br2mr {
                        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;
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-flex-direction: column;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        padding: 0px 56px;
                    }

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

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

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

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

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

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

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

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

                    @media (min-width:768px) {
                        .css-16br2mr {
                            -webkit-flex-direction: row-reverse;
                            -ms-flex-direction: row-reverse;
                            flex-direction: row-reverse;
                            padding: 0px 40px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-16br2mr {
                            padding: 0px 64px;
                        }
                    }
                </style>
                <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-16br2mr">
                    <style data-emotion="css 194se54">
                        .css-194se54 {
                            text-align: center;
                            padding: 56px 0px 190px;
                        }

                        @media (min-width:768px) {
                            .css-194se54 {
                                -webkit-flex-basis: 50%;
                                -ms-flex-preferred-size: 50%;
                                flex-basis: 50%;
                            }
                        }

                        @media (min-width:768px) {
                            .css-194se54 {
                                text-align: left;
                                padding: 72px 0px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-194se54 {
                                padding: 96px 0px 80px;
                            }
                        }
                    </style>
                    <style data-emotion="css quivt1">
                        .css-quivt1 {
                            text-align: center;
                            padding: 56px 0px 190px;
                        }

                        @media (min-width:768px) {
                            .css-quivt1 {
                                -webkit-flex-basis: 50%;
                                -ms-flex-preferred-size: 50%;
                                flex-basis: 50%;
                            }
                        }

                        @media (min-width:768px) {
                            .css-quivt1 {
                                text-align: left;
                                padding: 72px 0px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-quivt1 {
                                padding: 96px 0px 80px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-quivt1">
                        <style data-emotion="css 1q7gyzr">
                            .css-1q7gyzr {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                            }

                            @media (min-width:768px) {
                                .css-1q7gyzr {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style>
                        <h3 class="MuiTypography-root MuiTypography-h3 css-1q7gyzr" data-testid="p-company-sec-7-title">
                            Join CPALL! and Make a Difference</h3>
                        <style data-emotion="css 1aabxio">
                            .css-1aabxio {
                                margin-top: 24px;
                            }

                            @media (min-width:768px) {
                                .css-1aabxio {
                                    margin-top: 32px;
                                }
                            }

                            @media (min-width:1200px) {
                                .css-1aabxio {
                                    margin-top: 40px;
                                }
                            }
                        </style>
                        <div class="css-1aabxio">
                            <style data-emotion="css 1a7qrpb">
                                .css-1a7qrpb {
                                    text-transform: none;
                                    font-size: 0.9375rem;
                                    font-weight: 600;
                                    line-height: 1.714;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    min-width: 64px;
                                    padding: 8px 22px;
                                    border-radius: 4px;
                                    -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                    color: #111111;
                                    background-color: #5DF591;
                                    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                                    box-shadow: none;
                                    border-radius: 12px;
                                    min-width: 150px;
                                }

                                .css-1a7qrpb:hover {
                                    -webkit-text-decoration: none;
                                    text-decoration: none;
                                    background-color: rgb(65, 171, 101);
                                    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                                }

                                @media (hover: none) {
                                    .css-1a7qrpb:hover {
                                        background-color: #5DF591;
                                    }
                                }

                                .css-1a7qrpb:active {
                                    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                                }

                                .css-1a7qrpb.Mui-focusVisible {
                                    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                                }

                                .css-1a7qrpb.Mui-disabled {
                                    color: rgba(255, 255, 255, 0.3);
                                    box-shadow: none;
                                    background-color: rgba(255, 255, 255, 0.12);
                                }

                                .css-1a7qrpb:hover {
                                    box-shadow: none;
                                }

                                .css-1a7qrpb.Mui-focusVisible {
                                    box-shadow: none;
                                }

                                .css-1a7qrpb:active {
                                    box-shadow: none;
                                }

                                .css-1a7qrpb.Mui-disabled {
                                    box-shadow: none;
                                }

                                @media (min-width:768px) {
                                    .css-1a7qrpb {
                                        min-width: 180px;
                                    }
                                }
                            </style>
                            <style data-emotion="css o1jww4">
                                .css-o1jww4 {
                                    display: -webkit-inline-box;
                                    display: -webkit-inline-flex;
                                    display: -ms-inline-flexbox;
                                    display: inline-flex;
                                    -webkit-align-items: center;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    align-items: center;
                                    -webkit-box-pack: center;
                                    -ms-flex-pack: center;
                                    -webkit-justify-content: center;
                                    justify-content: center;
                                    position: relative;
                                    box-sizing: border-box;
                                    -webkit-tap-highlight-color: transparent;
                                    background-color: transparent;
                                    outline: 0;
                                    border: 0;
                                    margin: 0;
                                    border-radius: 0;
                                    padding: 0;
                                    cursor: pointer;
                                    -webkit-user-select: none;
                                    -moz-user-select: none;
                                    -ms-user-select: none;
                                    user-select: none;
                                    vertical-align: middle;
                                    -moz-appearance: none;
                                    -webkit-appearance: none;
                                    -webkit-text-decoration: none;
                                    text-decoration: none;
                                    color: inherit;
                                    text-transform: none;
                                    font-size: 0.9375rem;
                                    font-weight: 600;
                                    line-height: 1.714;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    min-width: 64px;
                                    padding: 8px 22px;
                                    border-radius: 4px;
                                    -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                                    color: #111111;
                                    background-color: #5DF591;
                                    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                                    box-shadow: none;
                                    border-radius: 12px;
                                    min-width: 150px;
                                }

                                .css-o1jww4::-moz-focus-inner {
                                    border-style: none;
                                }

                                .css-o1jww4.Mui-disabled {
                                    pointer-events: none;
                                    cursor: default;
                                }

                                @media print {
                                    .css-o1jww4 {
                                        -webkit-print-color-adjust: exact;
                                        color-adjust: exact;
                                    }
                                }

                                .css-o1jww4:hover {
                                    -webkit-text-decoration: none;
                                    text-decoration: none;
                                    background-color: rgb(65, 171, 101);
                                    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                                }

                                @media (hover: none) {
                                    .css-o1jww4:hover {
                                        background-color: #5DF591;
                                    }
                                }

                                .css-o1jww4:active {
                                    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
                                }

                                .css-o1jww4.Mui-focusVisible {
                                    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                                }

                                .css-o1jww4.Mui-disabled {
                                    color: rgba(255, 255, 255, 0.3);
                                    box-shadow: none;
                                    background-color: rgba(255, 255, 255, 0.12);
                                }

                                .css-o1jww4:hover {
                                    box-shadow: none;
                                }

                                .css-o1jww4.Mui-focusVisible {
                                    box-shadow: none;
                                }

                                .css-o1jww4:active {
                                    box-shadow: none;
                                }

                                .css-o1jww4.Mui-disabled {
                                    box-shadow: none;
                                }

                                @media (min-width:768px) {
                                    .css-o1jww4 {
                                        min-width: 180px;
                                    }
                                }
                            </style>
                            <a class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButtonBase-root  css-o1jww4"
                                tabindex="0" href="/career">
                                <style data-emotion="css qkd41n">
                                    .css-qkd41n {
                                        margin: 0;
                                        font-size: 14px;
                                        line-height: 2.143;
                                        font-weight: bold;
                                        font-family: Poppins, Noto Sans Thai, sans-serif;
                                    }

                                    @media (min-width:768px) {
                                        .css-qkd41n {
                                            font-size: 18px;
                                            line-height: 2.222;
                                        }
                                    }
                                </style>
                                <h6 class="MuiTypography-root MuiTypography-h6 css-qkd41n"
                                    data-testid="p-company-sec-7-button">View All Jobs</h6>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection