@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;700&family=Mulish&display=swap");

* {
    box-sizing: border-box;
    margin: 0
}

.bg-wrapper {
    position: relative;
    width: 100%;
    min-height: 50px
}

.footy-bg {
    background-color: #f2f2f2
}

.bg-orchid {
    background-color: #B21C91
}

.bg-scarlet {
    background-color: #FF2930
}

.bg-orange {
    background-color: #FA871F
}

.bg-black {
    background-color: #140D1A
}

.bg-grey {
    background-color: #f6f6f6
}

.bg-image-01 {
    background-image: url("../images/bg-img-01.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center
}

.bg-image-02 {
    background-image: url("../images/bg-img-02.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center
}

.divider {
    border-top: 2px solid #140D1A
}

.divider-orchid {
    border-color: #B21C91 !important
}

h1,
h2,
h3,
h4 {
    font-family: "Kanit", Arial, sans-serif;
    color: #140D1A
}

h5,
h6,
body,
p,
.super-lead-text,
.lead-text {
    font-family: "Mulish", Arial, sans-serif;
    font-weight: 400;
    color: #140D1A
}

h1 {
    font-size: 48px;
    font-weight: 700
}

h2 {
    font-size: calc(1.75rem + ((1vw - 5.76px) * 1.2821));
    font-weight: 500
}

h3 {
    font-size: calc(1.25rem + ((1vw - 9.76px) * 0.641));
    font-weight: 400
}

h4 {
    font-size: 18px;
    font-weight: 700;
    color: #B21C91
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 12px;
    text-transform: uppercase
}

.super-lead-text {
    font-size: calc(1.25rem + ((1vw - 9.76px) * 0.641))
}

.lead-text {
    font-size: calc(0.875rem + ((1vw - 5.76px) * 0.3205))
}

body,
p {
    font-family: "Mulish", Arial, sans-serif;
    font-size: 14px
}

.small-text {
    font-family: "Mulish", Arial, sans-serif;
    font-size: 12px;
    color: #b3b3b3
}

a {
    color: #140D1A
}

a:hover {
    color: #B21C91
}

.white-text,
.text-white {
    color: #fff !important
}

.w-250 {
    width: inherit
}

.w-500 {
    width: inherit
}

.w-650 {
    width: inherit
}

.min-150 {
    min-height: 150px
}

.min-295 {
    min-height: 295px
}

.spt-50 {
    padding-top: 50px
}

.spb-50 {
    padding-bottom: 50px
}

.spt-75 {
    padding-top: 75px
}

.spb-75 {
    padding-bottom: 75px
}

.card {
    border-radius: 3px
}

.card h5.card-title {
    font-family: "Kanit", Arial, sans-serif;
    color: #fff !important;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    height: 70px
}

.card h4.card-title {
    font-family: "Kanit", Arial, sans-serif;
    color: #140D1A !important;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    height: 30px
}

.card .icon-centre {
    align-items: center;
    justify-content: left;
    display: flex
}

.card i {
    font-size: 52px;
    color: #B21C91;
    padding: 20px 20px 0
}

.card .card-body {
    position: relative
}

.card .card-body .card-text-white {
    color: #fff !important
}

.card a {
    position: absolute;
    bottom: 20px;
    left: 20px
}

.icon-lg {
    font-size: 48px
}

ul li i {
    color: #B21C91 !important;
    margin-right: 15px
}

ul li.list-group-item {
    border: none;
    padding: 0.25rem 0 !important
}

#message-box {
    display: none
}

#message-box .lead-text {
    color: #fff
}

#message-box span.btn-close {
    width: 50px;
    height: 50px;
    cursor: pointer;
    color: #fff
}

#error-box {
    display: none
}

#error-box.error-box {
    color: #fff;
    background-color: #FF2930;
    padding: 5px 15px;
    margin-bottom: 20px
}

.navbar .navbar-header {
    max-width: 100%;
    display: flex;
    flex-direction: column
}

.navbar .navbar-header .navbar-brand {
    display: flex;
    justify-content: start
}

.navbar .navbar-header .navbar-toggler {
    display: flex;
    justify-content: end
}

.navbar-light .navbar-toggler {
    color: #140D1A !important;
    border-color: transparent
}

.navbar-light .navbar-toggler-icon-wrapper {
    position: relative;
    width: 30px;
    height: 30px
}

.navbar-light .navbar-toggler-icon-wrapper .toggle-line {
    display: flex;
    margin-bottom: 5px;
    width: 30px;
    height: 2px;
    background: #B21C91;
    border-radius: 50px
}

.navbar-light .navbar-toggler-icon-wrapper .toggle-line.line-1 {
    display: flex;
    margin-bottom: 5px;
    width: 15px;
    height: 2px;
    float: right;
    background: #B21C91;
    border-radius: 50px
}

.navbar-light .navbar-toggler-icon-wrapper .toggle-line.line-3 {
    display: flex;
    margin-bottom: 5px;
    width: 15px;
    height: 2px;
    background: #B21C91;
    border-radius: 50px
}

img.logo-primary {
    max-height: 30px
}

ul.nav li.nav-item {
    margin-right: 5px
}

ul.nav:last-child {
    margin-right: 0px
}

.nav-item .nav-link {
    font-family: "Kanit", Arial, sans-serif;
    color: #140D1A !important;
    height: 32px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 20px !important;
    border: 2px solid #fff
}

.nav-item .nav-link:hover {
    border: 2px solid #B21C91;
    color: #140D1A !important;
    border-radius: 50px;
    background-color: #fff
}

.nav-item .nav-link.active {
    border: 2px solid #B21C91;
    color: #140D1A !important;
    border-radius: 50px;
    background-color: #fff
}

.nav-item.dropdown .dropdown-menu {
    border: none;
    padding-left: 20px
}

.nav-item.dropdown .dropdown-menu a.dropdown-item {
    font-family: "Kanit", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700
}

.nav-item.dropdown .dropdown-menu a.dropdown-item:hover {
    background: #f4bae7
}

.btn {
    font-family: 'Kanit', Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 5px 20px
}

.btn-pill {
    border-radius: 50px
}

.btn-sml {
    font-size: 14px;
    padding: 2px 15px
}

.btn-outline {
    border: 2px solid #B21C91;
    color: #140D1A
}

.btn-outline:hover {
    border: 2px solid #B21C91;
    background: #B21C91;
    color: #fff
}

.btn-solid {
    background: #B21C91;
    color: #fff;
    border: 2px solid #B21C91
}

.btn-solid:hover {
    border: 2px solid #e450c3;
    background: #e450c3;
    color: #fff
}

.btn-solid-scarlet {
    background: #FF2930;
    color: #fff;
    font-size: 12px
}

.btn-solid-scarlet i {
    color: #fff;
    margin-right: 8px
}

.btn-solid-scarlet:hover {
    background: #f50008;
    color: #fff
}

.btn-solid-orange {
    background: #FA871F;
    color: #fff;
    font-size: 12px
}

.btn-solid-orange i {
    color: #fff;
    margin-right: 8px
}

.btn-solid-orange:hover {
    background: #e16d05;
    color: #fff
}

.btn-solid-scarlet {
    background: #FF2930;
    color: #fff;
    font-size: 12px
}

.btn-solid-scarlet i {
    color: #fff;
    margin-right: 8px
}

.btn-solid-scarlet:hover {
    background: #f50008;
    color: #fff
}

.btn-ghost {
    display: flex;
    color: #140D1A;
    align-items: center;
    justify-content: center;
    margin: auto
}

.btn-ghost:hover {
    color: #B21C91
}

.btn-ghost i {
    color: #B21C91;
    margin-right: 16px
}

.btn-outline-white {
    border: 2px solid #fff;
    color: #fff
}

.btn-outline-white:hover {
    background: #fff;
    color: #B21C91
}

.btn-outline-rev {
    border: 2px solid #B21C91;
    color: #fff
}

.btn-outline-rev i {
    color: #B21C91;
    margin-right: 8px
}

.btn-outline-rev:hover {
    background: #B21C91;
    color: #fff
}

.btn-outline-rev:hover i {
    color: #fff
}

.btn-disabled {
    border: 2px solid #140D1A;
    color: #140D1A
}

.btn-disabled:hover {
    color: #140D1A
}

.btn-disabled i {
    color: #140D1A;
    margin-right: 16px
}

.form-control {
    border-color: #f4bae7;
    font-size: 14px !important;
    height: 48px;
    padding: 20px 12px 12px;
    color: #140D1A
}

.form-control.has-error {
    border: 1px solid #FF2930
}

.errors-msg {
    display: none
}

.has-float-label {
    position: relative
}

.has-float-label .form-control:placeholder-shown:not(:focus)+* {
    font-size: 16px !important;
    opacity: .4;
    top: .9em !important;
    font-weight: 400
}

.has-float-label label,
.has-float-label>span {
    position: absolute;
    cursor: text;
    font-size: 10px;
    opacity: 0.5 !important;
    -webkit-transition: all .2s;
    transition: all .2s;
    top: 7px !important;
    left: 12px;
    z-index: 3;
    line-height: 1;
    padding: 0 1px
}

#hero-wrapper {
    background-image: url("../images/hero-01.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 550px;
    display: flex;
    align-items: center
}

#hero-wrapper .hero-inner {
    position: relative
}

#hero-wrapper .hero-inner h3.hero-heading {
    color: #fff;
    font-size: calc(3.4375rem + ((1vw - 5.76px) * 2.4038));
    line-height: calc(2.8125rem + ((1vw - 5.76px) * 2.4038));
    max-width: 540px
}

#hero-wrapper .hero-inner span.lead-text {
    display: flex;
    padding: 15px 0 30px;
    color: #fff;
    font-size: calc(0.875rem + ((1vw - 5.76px) * 0.3205));
    line-height: 24px;
    max-width: 430px
}

#hero-wrapper .hero-inner .award-wrapper {
    position: relative;
    top: 200px;
    display: inline-flex
}

#hero-wrapper .hero-inner .award-wrapper img {
    width: 170px
}

.award-wrapper {
    position: relative;
    top: 20px;
    right: 0px;
    display: inline-flex
}

.award-wrapper img {
    width: 180px
}

#page-title-wrapper {
    position: relative;
    background-image: url("../images/hero-02.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 185px
}

#page-title-wrapper .page-title-inner {
    max-height: 144px
}

#page-title-wrapper .page-title-inner h1 {
    background-color: #140D1A;
    color: #fff;
    padding: 60px 30px 30px 30px
}

.broker-choice-box {
    margin-top: 20px;
    padding-left: 0px;
    border: 1px solid #B21C91;
    background-color: #fff
}

section {
    padding: 75px 0
}

section#human-talk.bg-image-01 {
    background-image: url("../images/bg-img-01.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center
}

.marker {
    background-image: url("../images/mapbox-icon.png");
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer
}

.login-wrapper {
    max-width: 530px;
    min-height: 280px
}

.login-wrapper #login-issues {
    cursor: pointer
}

.login-wrapper .forgot-pw-wrapper {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #B21C91;
    border-radius: 3px
}

.login-wrapper .forgot-pw-wrapper h6 {
    color: #fff
}

.login-wrapper .forgot-pw-wrapper span.forgot-pw-number {
    font-size: 18px
}

.login-wrapper .forgot-pw-wrapper span.forgot-pw-email i,
.login-wrapper .forgot-pw-wrapper span.forgot-pw-number i {
    display: inline-flex;
    color: #B21C91;
    padding-right: 10px;
    font-size: 14px
}

.login-wrapper .forgot-pw-wrapper span.forgot-pw-email a,
.login-wrapper .forgot-pw-wrapper span.forgot-pw-number a {
    cursor: pointer;
    position: relative;
    bottom: inherit;
    left: inherit;
    display: flex;
    color: #fff
}

.video-wrapper object,
.video-wrapper embed,
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}

.modal-header {
    background-color: #B21C91
}

.modal-header h5.modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 16px
}

.modal-body {
    padding: 30px
}

ul.arteva-list li {
    margin-bottom: 15px
}

footer h3 {
    text-align: center
}

footer ul.footer-list {
    list-style: none;
    padding: 0;
    margin: 0
}

footer ul.footer-list a {
    color: #fff
}

footer ul.footer-list li {
    text-align: center
}

@media (min-width: 576px) {
    img.logo-primary {
        max-height: 47px !important
    }

    .min-360 {
        min-height: 360px
    }

    #hero-wrapper .hero-inner .award-wrapper {
        position: relative;
        top: 20px;
        right: 0px
    }

    #hero-wrapper .hero-inner .award-wrapper img {
        width: 220px
    }

    .card {
        border-radius: 3px
    }

    .card .icon-centre {
        justify-content: center
    }

    .card i {
        font-size: 52px;
        color: #B21C91;
        padding: 0
    }
}

@media (min-width: 768px) and (orientation: portrait) {
    #hero-wrapper .hero-inner .award-wrapper {
        position: absolute !important;
        top: 240px;
        left: 0px;
        display: inline-flex
    }

    #hero-wrapper .hero-inner .award-wrapper img {
        width: 120px
    }

    .award-wrapper {
        position: absolute !important
    }

    .card h5.card-title {
        height: 30px
    }
}

@media (min-width: 768px) and (orientation: landscape) {
    .login-wrapper {
        width: 530px;
        min-height: 280px
    }

    #hero-wrapper .hero-inner .award-wrapper {
        position: absolute;
        top: 20px;
        right: 0px
    }

    #hero-wrapper .hero-inner .award-wrapper img {
        width: 180px
    }

    footer h3 {
        text-align: left
    }

    footer ul.footer-list {
        list-style: none;
        padding: 0;
        margin: 0
    }

    footer ul.footer-list a {
        color: #fff
    }

    footer ul.footer-list li {
        text-align: left
    }
}

@media (min-width: 992px) {
    .w-250 {
        width: 250px
    }

    .w-500 {
        width: 500px
    }

    .w-650 {
        width: 650px
    }

    .nav-item .nav-link {
        font-family: "Kanit", Arial, sans-serif;
        color: #140D1A !important;
        height: 32px;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 20px !important;
        border: 2px solid #fff
    }

    .nav-item .nav-link:hover {
        border: 2px solid #B21C91;
        color: #140D1A !important;
        border-radius: 50px;
        background-color: #fff
    }

    .nav-item .nav-link.active {
        border: 2px solid #B21C91;
        color: #140D1A !important;
        border-radius: 50px;
        background-color: #fff
    }

    .nav-item.dropdown .dropdown-menu {
        margin-top: 20px;
        padding-left: 0px;
        border: 1px solid #B21C91
    }

    .nav-item.dropdown .dropdown-menu:before {
        position: absolute;
        top: -7px;
        left: 39px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #B21C91;
        border-left: 7px solid transparent;
        border-bottom-color: #B21C91;
        content: ''
    }

    .nav-item.dropdown .dropdown-menu:after {
        position: absolute;
        top: -6px;
        left: 40px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-left: 6px solid transparent;
        content: ''
    }

    .nav-item.dropdown .dropdown-menu a.dropdown-item {
        font-family: "Kanit", Arial, sans-serif;
        font-size: 12px;
        font-weight: 700
    }

    .nav-item.dropdown .dropdown-menu a.dropdown-item:hover {
        background: #f4bae7
    }

    .broker-choice-box {
        margin-top: 20px;
        padding-left: 0px;
        border: 1px solid #B21C91;
        background-color: #fff;
        width: 260px;
        position: absolute;
        z-index: 33
    }

    .broker-choice-box:before {
        position: absolute;
        top: -7px;
        left: 39px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #B21C91;
        border-left: 7px solid transparent;
        border-bottom-color: #B21C91;
        content: ''
    }

    .broker-choice-box:after {
        position: absolute;
        top: -6px;
        left: 40px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-left: 6px solid transparent;
        content: ''
    }

    .broker-choice-box .broker-choice-wrapper .broker-choice-inner .broker-premium {
        border-bottom: 1px solid #B21C91
    }

    .login-wrapper {
        width: 530px;
        min-height: 280px
    }
}

@media (min-width: 1200px) {
    .w-250 {
        width: 250px
    }

    .w-500 {
        width: 500px
    }

    .w-650 {
        width: 650px
    }

    h1 {
        font-size: 48px
    }

    h2 {
        font-size: 36px
    }

    .super-lead-text {
        font-size: 24px
    }

    .lead-text {
        font-size: 16px
    }

    .fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 900;
        width: 100%;
        background: #fff
    }

    .navbar-mini-menu {
        border-bottom: 1px solid #B21C91
    }

    #hero-wrapper .hero-inner h3.hero-heading {
        color: #fff;
        font-size: 70px !important;
        line-height: 60px !important;
        max-width: 540px
    }
}