@font-face {
    font-family: Montserrat;
    src: url("../font/Montserrat-Regular.ttf");

}

@font-face {
    font-family: Montserrat-Bold;
    src: url("../font/Montserrat-Bold.ttf");

}

@font-face {
    font-family: Montserrat-Medium;
    src: url("../font/Montserrat-Medium.ttf");

}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url("../font/Montserrat-SemiBold.ttf");

}

@font-face {
    font-family: Montserrat-ExtraBold;
    src: url("../font/Montserrat-ExtraBold.ttf");

}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: unset;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: unset;
}

p {
    margin-bottom: 10px;
}

:root {
    --padding-web: 140px;
    --primary-color: #004767;
    --secondary-color: #03CFCB;
    --font-14: 14px;
    --font-16: 16px;
    --font-24: 24px;
    --font-36: 36px;
    --font-48: 48px;
}

.d-flex-custom {
    display: flex;
}

@media (max-width: 991px) {
    :root {
        --padding-web: 16px;
        --font-14: 12px;
        --font-16: 14px;
        --font-24: 18px;
        --font-36: 32px;
        --font-48: 32px;
    }

    .d-flex-custom {
        display: block;
    }
}

body {
    font-family: Montserrat;
    max-width: 1920px;
    color: var(--primary-color);
    font-size: var(--font-16);
    font-weight: unset;
}

button:focus, input:focus, textarea {
    outline: none !important;
}

.navbar-collapse {
    flex-grow: unset;
}

button {
    padding: 1px 3px;
}

.padding-left {
    padding-left: var(--padding-web);
}

.padding-right {
    padding-left: var(--padding-web);
}

.padding {
    padding-left: var(--padding-web) !important;
    padding-right: var(--padding-web) !important;
}

.padding-unset {
    padding: unset !important;
}

.margin-unset {
    margin: unset !important;
}

a:hover {
    color: unset;
}

/*header*/
.header-top {
    padding: 20px 0;
    background-color: #E6F2F7;
}

.logo {
    width: 200px;
    height: 75px;
}

.header-top-address {
    display: flex;
    justify-content: end;
}

.search {
    display: flex;
    align-items: flex-end;
}

.address {
    font-size: var(--font-14);
    margin-top: auto;
    border-right: 2px solid var(--primary-color);
    text-align: right;
    padding-right: 32px;
}

.flag {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.search-icon {
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin: 0 32px
}

.header .header-top .nav-link {
    padding: unset;
    font-size: var(--font-14);
    color: black;
}

.header .header-top .nav-link::after {
    content: '\30C';
    font-size: 25px;
    position: absolute;
    right: -15px;
    top: 5px;
}

.background-base {
    background-color: var(--primary-color);
}

.header-main {
    display: flex;
    background-color: var(--primary-color);
    color: white;
}

.menu-item {
    color: white;
    padding: 16px 22px 16px 0;
    font-size: var(--font-14);
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    position: relative;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}

.header-main .dropdown-menu {
    background-color: white;
    padding: unset;
}
.header-main .dropdown-item{
    padding: 10px 15px;
}
.header-main .dropdown-item:hover, .header-main .sub-item-li:hover{
    background-color: #E6F2F7;
}
.header-main .sub-menu {
    background-color: white !important;
    /*padding: 5px !important;*/
    width: 300px;
}

.nav-link-sub {
    font-family: Montserrat-Medium;
    font-size: var(--font-16);
    color: black;

}

.child-item {
    font-family: Montserrat-Medium;
    font-size: var(--font-16);
}

.item-sub-menu {
    text-align: center;
    padding: 15px 0;
}

.sub-item-li {
    padding: 15px 10px;
}

.end-border {
    border-bottom: 1px solid #7FA2B2;
}

.reader-device-menu {
    background-color: white !important;
    padding: 0 10px;
    width: 250px;
    text-align: left;
}

.call-us {
    font-size: var(--font-14);
    font-family: Montserrat-Bold;
    text-transform: uppercase;
}

.mobile-menu {
    display: none;
    margin-top: auto;
    text-align: right;
    color: var(--primary-color);
    position: relative;
}

.nav-mobile {
    position: absolute;
    width: 100%;
    background-color: white;
    left: 0;
    top: 80px;
    z-index: 9999;
}

.menu-item-mobile {
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.menu-item-mobile a, .call-us-mobile, .smas2-mobile-btn, .item-main-sub {
    color: var(--primary-color);
    font-size: var(--font-16);
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    position: relative;
}

.address-text-mobile {
    color: var(--primary-color);
    font-size: var(--font-16);
    font-family: Montserrat-Bold;
}

.address-mobile {
    color: var(--primary-color);
    font-size: var(--font-16);
    font-family: Montserrat-Medium
}

.search-input {
    width: 100%;
    border-bottom: 1px solid var(--secondary-color);
    border-right: none;
    border-left: none;
    border-top: none;
    font-size: var(--font-16);
    font-family: Montserrat-Medium;
    color: var(--primary-color);
}

.item-main-sub {
    width: 100%;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 20px;
}

.sub-item-mobile {
    margin-left: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #7FA2B2;
}

.sma2-sub-item, .reader-sub-item-mobile {
    padding-left: 50px;
    padding-bottom: 10px;
    border-bottom: 1px solid #7FA2B2;
    z-index: 9999;
}

.smas:after, .smas2:after, .reader:after {
    content: '\203A';
    position: absolute;
    right: 0;
    font-weight: 900;
    font-size: var(--font-24);;
    top: 14px;
}

.smas, .reader {
    padding-bottom: 0;
    position: relative;
}

.smas2, .sma2-sub-item, .reader-sub-item-mobile {
    display: none;
    position: relative;
}

.smas:hover .smas2, .reader:hover .reader-sub-item-mobile {
    display: block;
}

.smas2-mobile-btn:hover > .sma2-sub-item {
    display: block;
}

.smas2-mobile-btn, .sma2-sub-item a, .reader-sub-item-mobile a {
    text-transform: none;
}

.sma2-sub-item a, .reader-sub-item-mobile a {
    font-family: Montserrat-Medium;
}

.smas2-text {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--secondary-color);
}

.nav-mobile .smas2 {
    border-bottom: unset;
}

.language-item-mobile a {
    font-size: var(--font-16);
    font-family: Montserrat-Bold;
    color: var(--primary-color);
}

.language-item-mobile img {
    margin-right: 8px;
}

.language-switch-mobile:after {
    content: '\32C';
    position: absolute;
    font-size: 40px;
    left: 79px;
    font-weight: bold;
    top: -35px;
}

.dropdown-language {
    padding: 20px;
    display: none;
}

.language-switch-mobile:hover .dropdown-language {
    display: block;
}

@media (max-width: 991px) {
    .mobile-menu {
        display: block;
    }

    .header-top-address, .header-main {
        display: none;
    }

    .logo {
        width: 106px;
        height: 40px;
    }


}

/*Footer*/
.footer-main {
    padding-top: 32px;
    border-bottom: 1px solid var(--secondary-color);
    height: 320px;
}

.ft-first {
    padding-left: 22px;
}

.ft-name-company, .ft-resource {
    font-size: var(--font-24);
    font-family: Montserrat-Bold;
    color: white;
}

.ft-logan {
    font-family: Montserrat;
    font-size: var(--font-14);
    color: white;
    padding: 25px 0;
}

.social {
    display: flex;
}

.social img {
    width: 45px;
    height: 34px;
}

.ft-resource-content {
    color: white;
    font-size: var(--font-14);
    font-family: Montserrat-Medium;
    display: block;
    padding-top: 25px;
}

.ft-resource-content a {
    color: white;
}

.ft-company-info {
    padding: 10px;
    background-color: #014B6C;
    display: flex;
    flex-wrap: wrap;
    color: white;
    font-family: Montserrat-Medium;
    font-size: var(--font-14);
}
.ft-company-info div{
    padding-bottom: 10px;
}
.ft-text-right {
    text-align: right;
    font-family: Montserrat-Medium;
}

.footer-end {
    padding: 28px var(--padding-web);
    display: flex;
}

.copy-right {
    font-size: var(--font-16);
    color: white;
    width: 60%;
}

.ft-contact-end {
    display: flex;
    width: 40%;
    justify-content: end;
}

.ft-contact-end a {
    font-size: var(--font-14);
    color: var(--secondary-color);
}

.center-border {
    margin: 0 16px;
    border-left: 1px solid white;
}

@media (max-width: 991px) {
    .resource {
        margin-top: 44px;
    }

    .info {
        margin-top: 39px;
    }

    .ft-text-right {
        text-align: left;
        margin-bottom: 24px;
    }

    .ft-company-info {
        padding: 10px 44px;
    }

    .footer-main {
        height: auto;
    }

    .footer-end {
        display: block;
    }

    .copy-right {
        width: 100%;
        text-align: center;
    }

    .ft-contact-end {
        width: 100%;
        justify-content: center;
        margin-top: 32px;
    }
}

/*Home*/
.home {
    position: relative;
}

.home-banner-img {
    width: 100%;
}

.content-banner {
    max-width: 680px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    margin-left: var(--padding-web);
}

.content-banner h4, .content-banner h2 {
    text-transform: uppercase;
}

.content-banner h4 {
    font-size: var(--font-24);;
    font-family: Montserrat-Bold;
    color: var(--secondary-color);
}

.content-banner h2 {
    font-size: var(--font-48);
    font-family: Montserrat-ExtraBold;
    color: var(--primary-color);
    padding: 20px 0;
}

.content-banner p {
    font-family: Montserrat;
    font-size: var(--font-16);
    color: var(--primary-color);
}

.btn-section {
    display: flex;
    margin-top: 40px;
}

.btn-contact, .btn-learn {
    padding: 10px 25px;
    font-size: var(--font-14);
    font-family: Montserrat-Bold;
    color: var(--primary-color);
}

.btn-contact {
    background-color: var(--secondary-color);
}

.btn-learn {
    border: 1px solid var(--primary-color);
}

.btn-learn-margin {
    margin-left: 32px;
}

@media (max-width: 991px) {
    .content-banner {
        max-width: 480px;
    }
}

@media (max-width: 767px) {
    .banner {
        margin-top: 60px;
    }

    .home-banner-img {
        display: none;
    }

    .content-banner {
        display: block;
        position: unset;
        transform: unset;
        margin-right: var(--padding-web);
    }

    .btn-section {
        display: grid;
        margin-top: 40px;
    }

    .btn-section .btn-contact {
        width: 100%;
        margin-bottom: 24px;
    }

    .btn-section .btn-contact, .btn-section .btn-learn {
        text-align: center;
    }

    .btn-learn-margin {
        margin-left: unset;
    }
}


.top-service-section {
    position: relative;
    margin-bottom: 350px;
}

.home-our-service-top {
    justify-content: center;
    display: flex;
    position: absolute;
    top: -65px;
    z-index: 999;
}

.service-top_item {
    width: 20%;
    height: 280px;
    margin-right: 30px;
    -moz-box-shadow: 0 0 2px 2px #E4E4E4;
    -webkit-box-shadow: 0 0 2px 2px #E4E4E4;
    box-shadow: 0 0 2px 2px #E4E4E4;
    padding: 30px 15px;
    background-color: white;
}

.icon-service {
    width: 50px;
    height: 50px;
}

.service_name {
    font-family: Montserrat-Bold;
    color: var(--primary-color);
    padding-top: 30px;
    padding-bottom: 16px;
    font-size: var(--font-14);
    height: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.service_detail {
    font-family: Montserrat;
    color: var(--primary-color);
    font-size: var(--font-14);
    height: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

@media (max-width: 991px) {
    .home-our-service-top {
        top: -30px;
        flex-wrap: wrap;
    }

    .service-top_item {
        width: 40%;
        margin-bottom: 32px;
    }

    .top-service-section {
        margin-bottom: 650px;
    }
}

@media (max-width: 767px) {
    .home-our-service-top {
        display: block;
        position: unset;
        margin-top: 60px;
        margin-left: 14px;
        margin-right: 14px;
    }

    .service-top_item {
        width: 100%;
        margin-bottom: 54px;
    }

    .top-service-section {
        margin-bottom: 80px;
    }
}

.our-hr-slider {
    margin-bottom: 150px;
}

.content-hr, .content-smart {
    padding: 0 20px 20px 25px;
}

.content-about {
    padding: 0 25px 20px 0;
}

.our-hr-slider img, .smart-device-content img {
    padding-right: 25px;
}

.hr-item {
    display: flex;
}

.our-hr-slider h4, .content-about h4, .content-smart h4 {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.our-hr-slider .hr_name, .content-about .about_name, .content-smart .smart_name {
    font-size: var(--font-36);
    font-family: Montserrat-ExtraBold;
    color: var(--primary-color);
    padding: 20px 0;
}

.our-hr-slider .hr_detail, .content-about .about_detail, .content-smart .smart_detail {
    font-size: var(--font-16);
    font-family: Montserrat;
    color: var(--primary-color);
    margin-bottom: 55px;
}

.our-hr-slider .content-hr {
    margin: auto 0 auto 20px;
}

.content-hr .btn-learn, .content-smart .btn-learn {
    background-color: var(--secondary-color);
    border: none;
}

@media (max-width: 991px) {
    .hr-item {
        display: block;
    }

    .our-hr-slider img {
        padding-right: unset;
    }

    .our-hr-slider .content-hr {
        margin: 32px 0 0 0;
        padding: unset;
    }

    .content-hr .btn-learn {
        text-align: center;
        display: block;
    }
}

.about-us-section, .our-service-section {
    background-color: #F3F9FB;
}

.about-item {
    display: flex;
}

.about-item img {
    padding-right: 32px;
}

.home-about-us-content, .smart-device-content, .our-service-section, .client-think-section {
    padding: 100px var(--padding-web);
}

.content-about .btn-learn {
    border: 1px solid var(--primary-color);
}

.about-img-mobile {
    display: none;
}

.about-img-web {
    display: flex;
    align-items: center;
}

.device-text-left {
    width: 60%;
    text-align: left;
}

.device-text-right {
    width: 40%;
    text-align: right;
}

@media (max-width: 991px) {
    .about-item, .about-img-mobile {
        display: block;
    }

    .about-item img {
        padding-right: unset;
    }

    .about-img-web {
        display: none;
    }

    .home-about-us-content img {
        padding-left: unset;
    }

    .content-about {
        padding: 32px 0 0 0;
    }

    .content-about .btn-learn, .content-smart .btn-learn {
        display: block;
        text-align: center;
    }

    .smart-device-content {
        padding: 48px var(--padding-web);
    }

    .smart-device-content img {
        padding-right: unset;
    }

    .content-smart {
        padding: 51px 0 0 0;
    }

    .device-text-left {
        width: 70%;
    }

    .device-text-right {
        width: 30%;
    }
}

.all-service {
    font-family: Montserrat-Medium;
    font-size: var(--font-14);
    color: var(--primary-color);
}

.all-service:after, .see-more:after {
    content: '\203A';
    margin-left: 5px;
    font-size: 19px;
    font-weight: 900;
}

.our-service-text, .client-think-text {
    text-transform: uppercase;
    font-size: 21px;
    font-family: Montserrat-Bold;
    color: var(--secondary-color);
    margin-bottom: 50px;
}

.our-service-large-text, .client-think-large-text {
    font-size: var(--font-36);
    font-family: Montserrat-ExtraBold;
    color: var(--primary-color);
    margin-bottom: 80px;
    text-transform: uppercase;
}

.service-item {
    -moz-box-shadow: 0 0 2px 2px #E4E4E4;
    -webkit-box-shadow: 0 0 2px 2px #E4E4E4;
    box-shadow: 0 0 2px 2px #E4E4E4;
    margin-bottom: 80px;
    background-color: white;
}

.service-item img {
    height: 300px;
}

.service-item .service_name {
    margin-top: 24px;
    margin-bottom: 16px;
}

.service-item .service_detail, .service-item .service_name {
    padding-left: 33px;
    padding-right: 33px;
}

.service-item .service_name {
    height: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.service-item p {
    margin-bottom: 0;
}

.service-item .service_detail {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 65px;
}

.see-more-section {
    width: 100%;
    text-align: right;
    padding: 56px 33px 33px 0;
}

.see-more {
    font-family: Montserrat-Medium;
    font-size: var(--font-14);
    color: var(--secondary-color);
}

.our-service-text {
    width: 60%;
    text-align: left;
}

.our-service-right {
    width: 40%;
    text-align: right;
}

@media (max-width: 767px) {
    .padding-service-item {
        padding: unset;
    }
}

@media (max-width: 991px) {
    .service-item .service_detail {
        height: 55px;
    }

    .our-service-section {
        padding: 32px var(--padding-web);
    }

    .our-service-text {
        margin-bottom: 24px;
    }

    .our-service-large-text {
        margin-bottom: 24px;
    }

    .service-item {
        margin-bottom: 54px;
    }

    .service-item img {
        height: 248px;
    }
}


/* CSS talk bubble */
.cmt-content {

}

.cmt-bubble {
    position: relative;
    background-color: #F2F9FB;
    max-height: 250px;
    padding: 20px 30px;
    display: inline-block;
    border: 1px solid #789FB0;
    border-radius: 5px;
}

.talktext {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    font-size: var(--font-14);
    color: var(--primary-color);
}


/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 80px;
    bottom: -40px;
    border: 20px solid;
    border-color: #789FB0 #789FB0 transparent transparent;
}

.tri-right.btm-right-in:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 79px;
    bottom: -38px;
    border: 20px solid;
    border-color: #F2F9FB #F2F9FB transparent transparent;
}

.client-think-text {
    margin-bottom: 32px;
}

.client-think-large-text {
    margin-bottom: 48px;
}

.review-item {
    max-width: 350px;
}

.info-client {
    margin-top: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-client {
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
    margin-right: 16px;
}

.client-name .name {
    font-family: Montserrat-Bold;
    font-size: var(--font-16);
    color: var(--primary-color);
}

.client-name .brand {
    font-family: Montserrat-SemiBold;
    font-size: var(--font-14);
    color: var(--secondary-color);
}

@media (max-width: 991px) {
    .client-think-text {
        margin-bottom: 36px;
    }

    .client-think-large-text {
        margin-bottom: 32px;
    }

    .client-think-section {
        padding: 48px var(--padding-web);
    }
}

.view-service {
    color: var(--secondary-color);
    font-family: Montserrat-SemiBold;
    font-size: var(--font-14);
}

.view-service:after {
    content: '\203A';
    margin-left: 5px;
    font-size: 19px;
    font-weight: 900;
}

.eb .about_detail {
    margin-bottom: 32px;
}

.our-customer-part {
    margin-bottom: 85px;
    position: relative;
}

.our-customer-section {
    padding: 0 var(--padding-web);
    position: absolute;
    width: 100%;
    z-index: 9999;
    top: -85px;
}

.our-customer-content {
    -moz-box-shadow: 0 0 2px 2px #E4E4E4;
    -webkit-box-shadow: 0 0 2px 2px #E4E4E4;
    box-shadow: 0 0 2px 2px #E4E4E4;
    display: flex;
    padding: 50px 12px;
    background: white;
}

.customer-item {
    display: flex;
    justify-content: center;
}

.customer-info {
    margin-left: 24px;
}

.customer-info .name {
    font-size: var(--font-16);
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    color: var(--primary-color);
}

.customer-info .number {
    font-size: var(--font-24);
    font-family: Montserrat-Bold;
    color: var(--secondary-color);
    position: relative;
    width: fit-content;
}

.customer-info .number:after {
    content: '+';
    color: var(--primary-color);
    position: absolute;
    top: 11px;
    font-size: var(--font-16);
}

.customer-end-border {
    border-right: 1px solid var(--secondary-color);
}

@media (max-width: 1200px) {
    .our-customer-content {
        padding: 50px 0;
    }

    .customer-info {
        margin-left: 5px;
    }

    .customer-item {
        align-items: center;
    }
}

@media (max-width: 991px) {
    .our-customer-content {
        flex-wrap: wrap;
    }

    .customer-item {
        justify-content: left;
        padding-left: 32px;
    }

    .customer-end-border {
        border: none;
        margin-bottom: 48px;
    }

    .customer-info .number:after {
        top: 6px;
    }

    .our-customer-part {
        margin-bottom: 350px;
    }
}

.contact-us-section {
    padding: 150px var(--padding-web);
    display: flex;
}

.contact-now {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.contact-title {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    color: var(--primary-color);
    padding: 32px 0;
    text-transform: uppercase;
}

.contact-content {
    font-size: var(--font-16);
    color: var(--primary-color);
}

.accept-policy {
    font-family: Montserrat-SemiBold;
    font-size: var(--font-14);
    color: var(--secondary-color);
    margin-top: 48px;
}

.accept-policy:after {
    content: '\203A';
    margin-left: 5px;
    font-size: 19px;
    font-weight: 900;
}

.form-section {
    display: flex;
    align-items: flex-end;
    padding: unset;
}

.form-contact {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
}

.contact-input {
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: 1px solid var(--secondary-color);
    font-family: Montserrat-Medium;
    font-size: var(--font-16);
    color: var(--secondary-color);
}

.form-contact .name {
    width: 80%;
}

.form-contact .message, .form-contact .email {
    width: 100%;
}

.form-contact .message {
    margin: 64px 0;
}

.contact-submit {
    padding: 10px 25px;
    font-size: var(--font-14);
    font-family: Montserrat-Bold;
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border: none;
}

.contact-left {
    padding-right: 150px;
}

@media (max-width: 991px) {
    .form-section {
        display: block;
    }

    .contact-us-section {
        padding: 80px var(--padding-web);
        display: block;
    }

    .form-contact .email {
        width: 80%;
        margin-top: 41px;
    }

    .form-contact .message {
        margin: 48px 0;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-left {
        padding-right: unset;
        padding-left: unset;
    }
}

.header-page-section {
    position: relative;
    background-color: black;
}

.header-banner {
    height: 300px;
    width: 100%;
    opacity: 0.5;
}

.header-page-content {
    position: absolute;
    top: 80px;
    left: var(--padding-web);
}

.title-page {
    font-family: Montserrat-Bold;
    font-size: var(--font-48);
    color: white;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.sub-title-page {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase
}

.detail-page {
    margin: 0 var(--padding-web);
}

@media (max-width: 768px) {
    .header-page-content {
        top: 32px;
    }

    .header-banner {
        height: 127px;
    }

    .title-page {
        margin-bottom: 16px;
        font-size: 21px;
    }
}

/*About us*/
.intro-section {
    margin-top: 80px;
}

.intro-text {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.intro-detail {
    display: flex;
}

.title-intro {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    color: var(--primary-color);
    margin: 32px 0;
}

.description_intro {
    font-size: var(--font-16);
    color: var(--primary-color);
}

.img-intro {
    display: flex;
    align-items: center;
}

.detail-page .our-customer-content {
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    margin-bottom: 130px;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .intro-section {
        margin-top: 32px;
    }

    .intro-detail {
        display: block;
    }

    .title-intro {
        margin: 24px 0;
    }

    .img-intro {
        padding: unset;
    }

    .detail-page .our-customer-content {
        margin-bottom: 100px;
    }
}

/*Career Page*/
.career-section {
    margin: 0 var(--padding-web);
    padding-bottom: 150px;
}

.career-item {
    margin-top: 60px;
}

.position {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.job-name {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 32px 0;
}

.job-description {
    display: flex;
}

.requirement-title {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--primary-color);
}

.job-detail, .requirement-detail {
    font-size: var(--font-16);
    color: var(--primary-color);
    margin-bottom: 32px;
}
.job-detail{
    padding-right: 60px;
}
.requirement-detail{
    margin-left: 20px;
}

.btn-apply {
    padding: 16px 50px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: Montserrat-Bold;
    font-size: var(--font-14);
    width: 200px;
    text-align: center;
}

.make-sure-requirement {
    margin-top: 16px;
    font-size: var(--font-14);
    font-family: Montserrat;
    color: var(--primary-color);
}

.bottom-border {
    border-top: 1px solid var(--secondary-color);
    margin-top: 40px;
}

.end-career {
    background-color: #F2F9FB;
    padding-top: 50px;
    padding-bottom: 150px;
}

.end-career-content {
    margin: 0 var(--padding-web);
    display: flex;
}

.end-left {
    padding: 48px;
    background-color: white;
    margin-right: 35px;
}

.end-left .contact-us {
    font-size: var(--font-24);
    font-family: Montserrat-Bold;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.end-left .get-in-touch {
    font-size: var(--font-36);
    font-family: Montserrat-ExtraBold;
    color: var(--primary-color);
    padding-top: 16px;
    padding-bottom: 50px;
}

.address-info {
    display: flex;
    flex-wrap: wrap;
    color: var(--primary-color);
    font-size: var(--font-16);
    font-family: Montserrat-Medium;
}
.address-info div{
    padding-bottom: 10px;
}
.text-right-custom {
    text-align: right;
}

.apply-form {
    display: flex;
    flex-wrap: wrap;
    background-color: transparent;
}

.apply-form .contact-input {
    background-color: transparent;
    font-family: Montserrat-Medium;
    font-size: var(--font-16);
    color: var(--primary-color);
    margin-bottom: 40px;
    width: 100%;
}
.state{
    padding-right: 20px!important;
}
.pr-custom {
    padding-right: 15px;
    padding-left: unset;
}

@media (max-width: 991px) {
    .job-description {
        display: block;
    }

    .btn-apply {
        width: 100%;
    }

    .job-detail, .job-requirement {
        padding: unset;
    }

    .end-career-content {
        display: block;
    }

    .end-left {
        margin-right: unset;
        padding: 40px 32px;
        margin-bottom: 60px;
    }

    .text-right-custom {
        text-align: left;
        margin-bottom: 16px;
    }
    .pr-custom {
        padding-right: unset;
        padding-left: unset;
    }
}

/*Contact us page*/
.location {
    margin-top: 40px;
    width: 100%;
    margin-bottom: 80px;
    padding: 0 var(--padding-web);
}

.location iframe {
    width: 100%;
    height: 600px;
}

.working-hour-section {
    padding-right: 20px;
}

.working-hour-section .sub-title, .info-contact-content .sub-title, .contact-form-section .sub-title {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    text-transform: uppercase;
    color: var(--secondary-color);
}

.working-hour-section .title, .info-contact-content .title, .contact-form-section .title {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    color: var(--primary-color);
    padding: 32px 0;
}

.working-hour-section .description {
    font-family: Montserrat;
    font-size: var(--font-16);
    color: var(--primary-color);
    padding-bottom: 32px;
}

.table-working {
    display: flex;
    flex-wrap: wrap;
}

.table-working .item, .item1 {
    width: 33%;
    text-align: left;
}

.table-working .item1 {
    padding: 20px 20px 20px 0;
}

.table-working .item {
    padding: 20px;
}

.table-border-right {
    border-right: 1px solid var(--secondary-color);
}

.table-border-bottom {
    border-bottom: 1px solid var(--secondary-color);
}

.row1 {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-16);
    font-family: Montserrat-Bold;
    width: 100%;
}

.info-contact-content {
    -moz-box-shadow: 0 0 2px 2px #E4E4E4;
    -webkit-box-shadow: 0 0 2px 2px #E4E4E4;
    box-shadow: 0 0 2px 2px #E4E4E4;
    padding: 48px;
    width: 85%;
    float: right;
}

.contact-info-company {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: var(--font-14);
}

.contact-info-company div {
    padding-left: unset;
}

.contact-info-company div {
    padding-bottom: 16px;
}

.contact-form-section {
    margin-top: 48px;
    margin-bottom: 150px;
}

.contact-form-section .form-contact {
    width: 50%;
}

@media (max-width: 1200px) {
    .our-contact-section {
        margin-top: 48px;
    }
}

@media (max-width: 991px) {
    .info-contact-content{
        width: 100%;
    }
    .location {
        margin-top: 0;
        padding: 0;
        margin-bottom: 32px;
    }

    .location iframe {
        height: 450px;
    }

    .working-hour-section .title, .info-contact-content .title, .contact-form-section .title {
        padding: 16px 0;
    }

    .our-contact-section {
        margin-top: 80px;
    }

    .info-contact-content {
        padding: 32px;
    }

    .contact-info-company div {
        padding-bottom: unset;
    }

    .contact-form-section {
        margin-top: 80px;
        margin-bottom: 100px;
    }

    .contact-form-section .form-contact {
        width: 100%;
    }

    .contact-form-section .form-contact .name, .contact-form-section .form-contact .email {
        width: 100%;
    }
}


@media (max-width: 767px) {
    .location {
        margin-top: 0;
        padding: 0;
        margin-bottom: 32px;
    }

    .location iframe {
        height: 300px;
    }

    .working-hour-section .title, .info-contact-content .title, .contact-form-section .title {
        padding: 16px 0;
    }

    .our-contact-section {
        margin-top: 80px;
    }

    .info-contact-content {
        padding: 32px;
    }

    .contact-info-company div {
        padding-bottom: unset;
    }

    .contact-form-section {
        margin-top: 80px;
        margin-bottom: 100px;
    }

    .contact-form-section .form-contact {
        width: 100%;
    }

    .contact-form-section .form-contact .name, .contact-form-section .form-contact .email {
        width: 100%;
    }
}

/*Smas page*/
.smas-detail-page {
    margin: 0 var(--padding-web) 150px var(--padding-web);
}

.title-smas {
    margin-top: 60px;
    margin-bottom: 40px;
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    color: var(--primary-color);
}

.img-smas {
    max-width: 100%;
    margin-bottom: 80px;
}
.smas-description ul{
    margin-left: 20px;
}
.general-text {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    margin-bottom: 32px;
}

.download-text {
    font-family: Montserrat-Bold;
    margin-top: 48px;
    margin-bottom: 24px;
}

.download-section {
    display: flex;
}

.btn-download {
    padding: 19px 12px;
    font-family: Montserrat-Bold;
    font-size: var(--font-14);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
}
.btn-download:hover{
    background-color: #E6F2F7;
}
.btn-download img {
    height: 18px;
    margin-left: 16px;
    margin-bottom: 5px;
}

.contact-now-text {
    margin-top: 120px;
    margin-bottom: 32px;
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.contact-here-text {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    color: var(--primary-color);
    margin-bottom: 50px;
}

.smas-contact-form .contact-input {
    width: 100%;
    margin-bottom: 50px;
}

.right-smas {
    padding-right: unset;
    padding-left: 90px;
}

.module {
    -moz-box-shadow: 0 0 2px 2px #E4E4E4;
    -webkit-box-shadow: 0 0 2px 2px #e4e4e4;
    box-shadow: 0 0 2px 2px #e4e4e4;
    padding: 48px;
    margin-bottom: 80px;
    width: 85%;
    float: right;
}

.solution {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    color: var(--secondary-color);
    text-transform: uppercase;
}

.module-text {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    margin-top: 16px;
    margin-bottom: 32px;
}

.module-content {
    display: grid;
}

.module-link {
    font-family: Montserrat-Medium;
    font-size: var(--font-14);
    color: var(--primary-color);
    margin-bottom: 16px;
}

.module-link-active {
    font-family: Montserrat-Bold;
}
.hide-mobile{
    display: block;
}
.hide-desktop{
    display: none;
}

@media (max-width: 1200px) {
    .right-smas {
        margin-top: 80px;
        padding-left: 40px;
    }
}

@media (max-width: 768px) {

    .module{
        width: 100%;
    }
    .btn-download {
        width: 100%;
        margin-bottom: 16px;
    }
    .right-smas {
        margin-top: 80px;
        padding-left: unset;
    }
    .download-section {
        display: block;
    }
    .title-smas{
        font-size: 21px;
    }
    .hide-mobile{
        display: none;
    }
    .hide-desktop{
        display: block;
    }
}

/*reader page*/
.reader-detail-page {
    margin: 60px var(--padding-web) 150px var(--padding-web);
}

.reader-describe {
    font-family: Montserrat-Bold;
    font-size: var(--font-36);
    text-transform: uppercase;
    text-align: center;
}

.reader-device-section {
    display: flex;
    flex-wrap: wrap;
}

.reader-device-section div {
    padding: unset;
}

.category-device {
    font-family: Montserrat-ExtraBold;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-top: 60px;
}

.device-name {
    font-family: Montserrat-ExtraBold;
    font-size: var(--font-36);
    margin: 48px 0 32px 0;
}

.img-device {
    text-align: center;
}

.img-device img {
    max-width: 50%;
}

.device-feature-text {
    font-family: Montserrat-Bold;
    font-size: var(--font-24);
    margin-bottom: 32px;
}

.device-description {
    margin-bottom: 32px;
    margin-left: 20px;
}

.reader-end-page {
    margin-top: 120px;
    display: flex;
    flex-wrap: wrap;
}

.reader-end-page .smas-contact-form {
    margin-right: 60px;
}

.reader-end-page .info-contact-content {
    margin-left: 60px;
}

.reader-end-page .contact-now-text {
    margin-top: unset;
}

.reader-text-right {
    text-align: right;
}

@media (max-width: 1199px) {
    .reader-text-right {
        text-align: left;
    }
}

@media (max-width: 991px) {
    .reader-end-page .smas-contact-form {
        margin-right: unset;
    }

    .reader-end-page .info-contact-content {
        margin-left: unset !important;
        margin-top: 40px;
    }
    .reader-describe{
        display: none;
    }
    .category-device{
        margin-top: 0;
        font-size: 18px;
    }
    .device-name{
        font-size: 18px;
    }
    .device-feature-text {
        margin-bottom: 30px;
    }
}