@extends('layouts.front-master')
@section('content')
    <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 css-1mofs2e">
        <style data-emotion="css s0jll0">
            @media (min-width:768px) {
                .css-s0jll0 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-s0jll0 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <style data-emotion="css 1awow3a">
            .css-1awow3a {
                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;
            }

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

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

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

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

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

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

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

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

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

            @media (min-width:1200px) {
                .css-1awow3a {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-1awow3a">
            <style data-emotion="css 19wyr0m">
                .css-19wyr0m {
                    background: #1E7BFE;
                    border-radius: 24px;
                    position: relative;
                    overflow: hidden;
                    margin: 40px 0px;
                    padding: 48px 24px 248px;
                }

                @media (min-width:768px) {
                    .css-19wyr0m {
                        padding: 80px 56px 120px;
                    }
                }

                @media (min-width:1200px) {
                    .css-19wyr0m {
                        padding: 80px 88px 56px;
                    }
                }
            </style>
            <style data-emotion="css lrr6fk">
                .css-lrr6fk {
                    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;
                    background: #1E7BFE;
                    border-radius: 24px;
                    position: relative;
                    overflow: hidden;
                    margin: 40px 0px;
                    padding: 48px 24px 248px;
                }

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

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

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

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

                @media (min-width:768px) {
                    .css-lrr6fk {
                        padding: 80px 56px 120px;
                    }
                }

                @media (min-width:1200px) {
                    .css-lrr6fk {
                        padding: 80px 88px 56px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg css-lrr6fk">
                <style data-emotion="css xdfb6">
                    .css-xdfb6 {
                        color: white;
                    }

                    @media (min-width:768px) {
                        .css-xdfb6 {
                            max-width: 650px;
                        }
                    }
                </style>
                <style data-emotion="css 1s0wu13">
                    .css-1s0wu13 {
                        color: white;
                    }

                    @media (min-width:768px) {
                        .css-1s0wu13 {
                            max-width: 650px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-1s0wu13">
                    <style data-emotion="css 18neuef">
                        .css-18neuef {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 380px;
                        }

                        @media (min-width:768px) {
                            .css-18neuef {
                                width: 245px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-18neuef {
                                display: none;
                            }
                        }
                    </style><img src="{{ asset('images/contact.png') }}" alt="Contact CPALL! - KKP CPALL Company Limited"
                        class="css-18neuef" />
                    <style data-emotion="css kn57yu">
                        .css-kn57yu {
                            display: none;
                        }

                        @media (min-width:1200px) {
                            .css-kn57yu {
                                display: -webkit-box;
                                display: -webkit-unset;
                                display: -ms-unsetbox;
                                display: unset;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                height: 100%;
                            }
                        }
                    </style><img src="{{ asset('images/contact.png') }}" alt="Contact CPALL! - KKP CPALL Company Limited"
                        class="css-kn57yu" />
                    <style data-emotion="css 1qwnwpn">
                        .css-1qwnwpn {
                            font-size: 22px;
                        }
                    </style>
                    <style data-emotion="css a5dh1o">
                        .css-a5dh1o {
                            margin: 0;
                            font-size: 24px;
                            line-height: 1.25;
                            font-weight: bold;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                            font-size: 22px;
                        }

                        @media (min-width:768px) {
                            .css-a5dh1o {
                                font-size: 30px;
                                line-height: 1.267;
                            }
                        }
                    </style>
                    <h4 class="MuiTypography-root MuiTypography-h4 css-a5dh1o" data-testid="company-name">KKP CPALL
                        Securities Company Limited</h4>
                    <style data-emotion="css b8twka">
                        .css-b8twka {
                            display: grid;
                            grid-gap: 10px;
                            grid-template-columns: 1fr;
                            margin-top: 16px;
                        }

                        @media (min-width:768px) {
                            .css-b8twka {
                                grid-template-columns: 1fr 10fr;
                                grid-gap: 24px 16px;
                                margin-top: 30px;
                                margin-bottom: 32px;
                                padding-right: 176px;
                            }
                        }
                    </style>
                    <style data-emotion="css grr3u5">
                        .css-grr3u5 {
                            display: grid;
                            grid-gap: 10px;
                            grid-template-columns: 1fr;
                            margin-top: 16px;
                        }

                        @media (min-width:768px) {
                            .css-grr3u5 {
                                grid-template-columns: 1fr 10fr;
                                grid-gap: 24px 16px;
                                margin-top: 30px;
                                margin-bottom: 32px;
                                padding-right: 176px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-grr3u5">
                        <style data-emotion="css 1nxdn4y">
                            @media (min-width:768px) {
                                .css-1nxdn4y {
                                    justify-self: center;
                                }
                            }
                        </style>
                        <style data-emotion="css 1y4ea1r">
                            @media (min-width:768px) {
                                .css-1y4ea1r {
                                    justify-self: center;
                                }
                            }
                        </style>
                        <div class="MuiBox-root css-1y4ea1r">
                            <style data-emotion="css p5tuez">
                                .css-p5tuez {
                                    vertical-align: middle;
                                    width: 15px;
                                    height: 24px;
                                    margin-top: 16px;
                                }

                                @media (min-width:768px) {
                                    .css-p5tuez {
                                        margin: 0 auto;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-p5tuez {
                                        width: 100%;
                                        height: 33px;
                                        margin-top: 0px;
                                    }
                                }
                            </style><img src="{{ asset('images/contacts/contact-us-icon-location.svg') }}" alt="icon-location" class="css-p5tuez" />
                        </div>
                        <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><span class="MuiTypography-root MuiTypography-body1 css-1tmli6w" data-testid="address">
                            <style data-emotion="css sbyug1">
                                .css-sbyug1 {
                                    margin-right: 40px;
                                }

                                @media (min-width:768px) {
                                    .css-sbyug1 {
                                        margin-right: 0px;
                                    }
                                }
                            </style>
                            <style data-emotion="css fey0gn">
                                .css-fey0gn {
                                    margin: 0;
                                    font-size: 14px;
                                    line-height: 1.714;
                                    font-weight: 400;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    margin-right: 40px;
                                }

                                @media (min-width:768px) {
                                    .css-fey0gn {
                                        font-size: 16px;
                                        line-height: 1.75;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-fey0gn {
                                        margin-right: 0px;
                                    }
                                }
                            </style>
                            <p class="MuiTypography-root MuiTypography-body1 css-fey0gn">252/10 Muang Thai-Phatra Office
                                Tower 1, 6th Floor, Ratchadaphisek Road, Huai Khwang, Huai Khwang, Bangkok 10310</p>
                        </span>
                        <div class="MuiBox-root css-1y4ea1r">
                            <style data-emotion="css xoxwha">
                                .css-xoxwha {
                                    vertical-align: middle;
                                    width: 21px;
                                    height: 17px;
                                    margin-top: 16px;
                                }

                                @media (min-width:768px) {
                                    .css-xoxwha {
                                        margin: 0 auto;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-xoxwha {
                                        width: 100%;
                                        height: 26px;
                                        margin-top: 0px;
                                    }
                                }
                            </style><img src="{{ asset('images/contacts/contact-us-icon-email.svg') }}" alt="icon-email" class="css-xoxwha" />
                        </div>
                        <style data-emotion="css 1l7q3nq">
                            .css-1l7q3nq {
                                margin: 0;
                                font-size: 14px;
                                line-height: 1.714;
                                font-weight: 400;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #E2FB7E;
                                font-weight: 700;
                            }

                            @media (min-width:768px) {
                                .css-1l7q3nq {
                                    font-size: 16px;
                                    line-height: 1.75;
                                }
                            }
                        </style><span class="MuiTypography-root MuiTypography-body1 css-1l7q3nq"
                            data-testid="common-CPALL-email">
                            <style data-emotion="css 17dqu48">
                                .css-17dqu48 {
                                    display: block;
                                }

                                @media (min-width:768px) {
                                    .css-17dqu48 {
                                        display: inline;
                                    }
                                }
                            </style>
                            <style data-emotion="css shwcsk">
                                .css-shwcsk {
                                    -webkit-text-decoration: none;
                                    text-decoration: none;
                                    display: block;
                                }

                                @media (min-width:768px) {
                                    .css-shwcsk {
                                        display: inline;
                                    }
                                }
                            </style>
                            <style data-emotion="css 1t93c3h">
                                .css-1t93c3h {
                                    margin: 0;
                                    color: #E2FB7E;
                                    -webkit-text-decoration: none;
                                    text-decoration: none;
                                    display: block;
                                }

                                @media (min-width:768px) {
                                    .css-1t93c3h {
                                        display: inline;
                                    }
                                }
                            </style><a
                                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-1t93c3h"
                                href="mailto:finansiasyrus.eu@gmail.com" target="_blank" rel="noreferrer">finansiasyrus.eu@gmail.com</a>
                            <style data-emotion="css 1t1kveb">
                                .css-1t1kveb {
                                    display: none;
                                }

                                @media (min-width:768px) {
                                    .css-1t1kveb {
                                        display: inline;
                                    }
                                }
                            </style>
                            <style data-emotion="css 8slzdt">
                                .css-8slzdt {
                                    margin: 0;
                                    font-size: 14px;
                                    line-height: 1.714;
                                    font-weight: 400;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    display: none;
                                }

                                @media (min-width:768px) {
                                    .css-8slzdt {
                                        font-size: 16px;
                                        line-height: 1.75;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-8slzdt {
                                        display: inline;
                                    }
                                }
                            </style>
                            <p class="MuiTypography-root MuiTypography-body1 css-8slzdt"> | </p>
                            <style data-emotion="css g61n38">
                                .css-g61n38 {
                                    margin: 0;
                                    font-size: 14px;
                                    line-height: 1.714;
                                    font-weight: 400;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    color: #FFFFFF;
                                    font-weight: normal;
                                }

                                @media (min-width:768px) {
                                    .css-g61n38 {
                                        font-size: 16px;
                                        line-height: 1.75;
                                    }
                                }
                            </style><span class="MuiTypography-root MuiTypography-body1 css-g61n38"
                                data-testid="contactus-contact-general">General Inquiries</span>
                        </span>
                        <div class="MuiBox-root css-1y4ea1r"><img src="{{ asset('images/contacts/contact-us-icon-email.svg') }}" alt="icon-email"
                                class="css-xoxwha" /></div><span class="MuiTypography-root MuiTypography-body1 css-1l7q3nq"
                            data-testid="contactus-finansia-complaint-email"><a
                                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-1t93c3h"
                                href="mailto:finansiasyrus.eu@gmail.com" target="_blank" rel="noreferrer">finansiasyrus.eu@gmail.com</a>
                            <p class="MuiTypography-root MuiTypography-body1 css-8slzdt"> | </p><span
                                class="MuiTypography-root MuiTypography-body1 css-g61n38"
                                data-testid="contactus-contact-complaint">Complaints</span>
                        </span>
                        <div class="MuiBox-root css-1y4ea1r">
                            <style data-emotion="css iiumzn">
                                .css-iiumzn {
                                    vertical-align: middle;
                                    width: 20px;
                                    height: 24px;
                                }

                                @media (min-width:768px) {
                                    .css-iiumzn {
                                        margin: 0 auto;
                                    }
                                }

                                @media (min-width:768px) {
                                    .css-iiumzn {
                                        width: 100%;
                                        height: 33px;
                                        margin-top: 0px;
                                    }
                                }
                            </style><img src="{{ asset('images/contacts/contact-us-icon-line.svg') }}" alt="icon-email" class="css-iiumzn" />
                        </div><span class="MuiTypography-root MuiTypography-body1 css-1l7q3nq"
                            data-testid="contactus-line-official-id"><a
                                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-1t93c3h"
                                href="https://fns.eu" target="_blank" rel="noreferrer"
                                data-testid="url-line">@fns.eu</a>
                            <p class="MuiTypography-root MuiTypography-body1 css-8slzdt"> | </p><span
                                class="MuiTypography-root MuiTypography-body1 css-g61n38"
                                data-testid="contactus-contact-support">Customer Support</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection