@font-face {
    font-family: Sukhumvit;
    src: url(./assets/fonts/SukhumvitSet-Medium.ttf);
}

body {
    font-family: "Sukhumvit", sans-serif !important;
    font-weight: 500;
}

.bg-card {
    background-image: url("./assets/images/card-bg.png");
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.bg-comment {
    background-color: #1975fe;
}

.bg-intro {
    background-image: url("./assets/images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.bg-secure {
    background-color: #f4f4f4 !important;
}

.bg-yellow {
    background-color: #f9c01a !important;
}

.bottom-shadow {
    border-bottom: 0px solid #1f1209;
    box-shadow: 0 -5px 16px 0px #333;
    margin: 0px auto 1.5rem;
}

.c-logo {
    width: 100%;
}

.card-price {
    border-radius: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
    background-color: #fff;
}

.ci-creden::after {
    content: "eSign";
    color: #f9c01a;
}

.ci-creden::before {
    content: "Creden ";
    color: #0767b0;
}

.comment-company {
    font-family: "Sukhumvit", sans-serif !important;
    color: #0767b0 !important;
    font-weight: 700 !important;
}

.comment-company::before {
    content: "Company User";
}

.comment-individual {
    font-family: "Sukhumvit", sans-serif !important;
    color: #0767b0 !important;
    font-weight: 700 !important;
}

.comment-individual::before {
    content: "Individual User";
}

.cost-card {
    border: none !important;
    background: transparent !important;
    margin-bottom: 1rem;
}

.cost-card-body {
    border-radius: 2rem !important;
    background-image: url("./assets/images/card-bg.png");
    background-color: transparent !important;
    border: none !important;
    background-repeat: no-repeat !important;
    background-position: unset;
    background-size: cover;
}

.cost-no {
    color: #0c62a3;
    font-weight: 700;
}

.d-cost {
    background-image: url("./assets/images/bg-cost.png");
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.d-intro {
    flex-direction: column !important;
    display: flex !important;
    justify-content: center !important;
}

.d-secure {
    display: flex !important;
    align-items: center !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.decrease-percent {
    color: #0767b0;
}

.decrease-percent::before {
    content: "90%";
}

.footer {
    background-color: #0e4976;
    padding: 4rem 1.5rem;
}

.form-btn {
    background-color: #424b5a !important;
    color: #fff !important;
}

.nav-ct {
    width: 100%;
    background: transparent;
}

.table-responsive {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.table-responsive::-webkit-scrollbar {
    display: none;
}

.table-row {
    min-width: max-content !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.text-blue {
    color: #0767b0;
}

.text-price {
    color: #1567b1 !important;
}

.text-price-dc {
    color: #88c6ff !important;
    text-decoration: line-through;
}

.text-w-600 {
    font-weight: 600 !important;
}

.text-w-700 {
    font-weight: 700 !important;
}

.text-yellow {
    color: #f9c01a !important;
}

.vid-screen{
    background-image: url('./assets/images/bg-vid.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.white-opa-80 {
    background-color: rgba(255, 255, 255, 0.8);
}

.h-100 {
    height: 100vh;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .bg-card {
        height: 18vh !important;
    }

    .bg-intro {
        background-size: initial !important;
    }

    .c-logo {
        width: 36% !important;
    }

    .card-feature {
        padding: 2rem 1.5rem;
    }

    .card-price {
        min-width: 70vw !important;
    }

    .comment-card-rounded {
        border-radius: 1rem !important;
    }

    .comment-card-w {
        width: auto !important;
    }

    .comment-company {
        font-size: calc(13px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .comment-img {
        width: 4rem !important;
    }

    .comment-individual {
        font-size: calc(13px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .cost-card-body {
        height: 8rem !important;
        width: 22rem !important;
    }

    .cost-card-icon {
        width: 5rem !important;
    }

    .cost-display {
        display: block !important;
        text-align: center !important;
    }

    .cost-img {
        width: 15rem !important;
    }

    .cost-no {
        font-size: calc(55px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .cost-no-text {
        font-size: calc(18px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .cost-normal-text {
        font-size: calc(26px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .d-cost {
        padding-top: 3rem !important;
    }

    .d-secure {
        flex-direction: column !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .decrease-percent {
        font-size: calc(40px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .percen-200{
        font-size: calc(36px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .desktop-br {
        display: none;
    }

    .display-feature {
        display: block !important;
    }

    .display-hr-feature {
        display: none !important;
    }

    .flex-gap {
        gap: 0.5rem;
    }

    .font-btn {
        font-size: calc(20px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .footer-order-1 {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 2rem !important;
        justify-content: center !important;
        padding-right: 2rem !important;
        padding-top: 2rem !important;
        /* padding-bottom: 5rem !important; */
    }

    .form-btn {
        font-size: calc(16px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        padding: 0.75rem 3.5rem !important;
        margin-top: 3rem !important;
        margin-bottom: 1.5rem !important;
    }

    .heading-cost {
        font-size: 26px !important;
        font-weight: 700 !important;
    }

    .heading-customer {
        font-size: 26px !important;
        font-weight: 700 !important;
    }

    .heading-intro {
        font-size: 20px;
        font-weight: 700 !important;
    }

    .heading-second-intro {
        font-size: 26px !important;
        font-weight: 700 !important;
    }

    .intro-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .like-img {
        width: 1.5rem !important;
    }

    .line-h {
        line-height: 2.5rem;
    }

    .logo-section {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-around !important;
        gap: 0.5rem;
    }

    .logo-w {
        width: 40% !important;
    }

    .mobile-br {
        content: "\a";
        white-space: nowrap;
    }

    .nav-ct {
        background-color: #fff !important;
    }

    .p-card-comment {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .p-comment {
        padding: 3rem 1rem;
    }

    .py-second-intro {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .secure-text {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .st-height {
        height: 40vh !important;
    }

    .text-card-body {
        font-size: calc(20px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-card-header {
        font-size: calc(18px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-free {
        font-size: calc(30px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-h3 {
        font-size: calc(26px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-intro {
        font-size: calc(24px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-jumbo {
        font-size: calc(40px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-number {
        font-size: calc(55px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-remark {
        font-size: calc(12px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-second-card {
        font-size: 28px !important;
        font-weight: 600;
    }

    .vid-screen{
        height: 16rem;
    }
}

@media (min-width: 768px) {
    .bg-comment {
        background-image: url("./assets/images/bg-comment.png") !important;
        background-size: cover !important;
    }

    .c-logo {
        width: 100% !important;
    }

    .card-body-feature {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .card-feature {
        width: 100% !important;
    }

    .card-feature-heading {
        font-size: calc(20px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .card-feature-text {
        font-size: calc(12px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        line-height: 1.2;
    }

    .card-price {
        max-width: 32vw !important;
    }
    .comment-card-rounded {
        border-radius: 8rem !important;
    }

    .comment-card-w {
        width: 100% !important;
    }

    .comment-img {
        width: 6rem !important;
    }

    .cost-card-body {
        height: 8rem !important;
        width: 20rem !important;
    }

    .cost-card-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .cost-display-card {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .cost-img {
        width: 75% !important;
    }

    .cost-jumbo-text {
        font-size: calc(40px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .cost-no {
        font-size: calc(60px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .cost-no-text {
        font-size: calc(26px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .cost-normal-text {
        font-size: calc(32px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .cost-sm-text {
        font-size: calc(22px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700;
    }

    .d-comment-1 {
        display: block !important;
        /* margin-left: 16rem !important;
        margin-right: 16rem !important; */
    }

    .d-cost-col {
        width: 100% !important;
        display: flex !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .d-footer {
        display: flex !important;
    }
    .d-intro {
        padding-top: 4rem !important;
        padding-bottom: 6rem !important;
    }

    .d-secure {
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: flex-start !important;
    }

    .decrease-percent {
        font-size: calc(96px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .percen-200{
        font-size: calc(80px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }


    .display-feature {
        display: flex !important;
        flex-direction: initial !important;
    }

    .display-hr-feature {
        display: flex !important;
        flex-direction: initial !important;
    }

    .feature-card-img{
        width: 55% !important;   
    }

    .font-btn {
        font-size: calc(24px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .footer-order-1 {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 2rem !important;
        justify-content: center !important;
        padding-right: 2rem !important;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .footer-order-2 {
        display: flex !important;
        flex-direction: column !important;
        padding-right: 2rem !important;
        justify-content: center !important;
        padding-left: 2rem !important;
    }

    .form-btn {
        padding: 0.5rem 2rem !important;
    }

    .heading-cost {
        font-size: 40px !important;
        font-weight: 700 !important;
    }

    .heading-customer {
        font-size: 40px !important;
        font-weight: 700 !important;
    }

    .heading-intro {
        font-size: 40px;
        font-weight: 700 !important;
    }

    .heading-second-intro {
        font-size: 40px;
        font-weight: 700 !important;
    }

    .hr-feature {
        width: 100%;
        border-bottom: 0.5rem solid #1975fe !important;
        border-radius: 1rem;
    }

    .icon-space {
        display: flex !important;
        justify-content: space-evenly !important;
    }

    .like-img {
        width: 1.5rem !important;
    }

    .line-h {
        line-height: 4.5rem !important;
    }

    .logo-section {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(11vw, 1fr)) !important;
        row-gap: 1rem !important;
        column-gap: 2rem !important;
    }

    .logo-w {
        width: 50% !important;
    }

    .mobile-br {
        content: "\a";
        white-space: nowrap;
    }

    .nav-ct {
        padding-bottom: 2rem !important;
        padding-top: 2rem !important;
    }

    .p-card-comment {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .p-comment {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .p-large {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }

    .py-second-intro {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .secure-card {
        width: 40% !important;
    }

    .secure-text {
        font-size: 30px !important;
        font-weight: 700 !important;
    }

    .text-free {
        font-size: calc(42px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-footer{
        font-size: 12px;
    }

    .text-h3 {
        font-size: calc(40px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-second-card {
        font-size: 24px !important;
        font-weight: 600;
    }

    .vid-screen{
        height: 34rem;
    }
}

@media (min-width: 992px) {
    .bg-comment {
        background-image: url("./assets/images/bg-comment.png") !important;
        background-size: cover !important;
    }

    .card-body-feature {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .card-feature {
        width: 100% !important;
    }

    .card-feature-heading {
        font-size: calc(36px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .card-feature-text {
        font-size: calc(16px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        line-height: 1.2;
    }

    .card-price {
        max-width: 18vw !important;
    }

    .comment-card-rounded {
        border-radius: 8rem !important;
    }

    .comment-card-w {
        width: 100% !important;
    }

    .comment-img {
        width: 6rem !important;
    }

    .cost-card-body {
        height: 10rem !important;
        width: 28rem !important;
    }

    .cost-card-icon {
        width: 110px !important;
        height: 110px !important;
    }

    .cost-display-card {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .cost-img {
        width: 75% !important;
    }

    .cost-jumbo-text {
        font-size: calc(50px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .cost-no {
        font-size: calc(110px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .cost-no-text {
        font-size: calc(36px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .cost-normal-text {
        font-size: calc(36px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .cost-sm-text {
        font-size: calc(26px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .d-comment-1 {
        margin-left: 16rem !important;
        margin-right: 16rem !important;
    }

    .d-cost-col {
        width: 100% !important;
        display: flex !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .d-footer {
        display: flex !important;
    }
    .d-intro {
        padding-top: 4rem !important;
        padding-bottom: 6rem !important;
    }

    .d-secure {
        flex-direction: row !important;
        justify-content: space-evenly !important;
    }

    .decrease-percent {
        font-size: calc(96px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .percen-200{
        font-size: calc(80px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .display-feature {
        display: flex !important;
        flex-direction: initial !important;
    }

    .display-hr-feature {
        display: flex !important;
        flex-direction: initial !important;
    }

    .feature-card-img{
        width: 55% !important;   
    }

    .font-btn {
        font-size: calc(24px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
        font-weight: 700 !important;
    }

    .footer-order-1 {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 12rem !important;
        justify-content: center !important;
        padding-right: 6rem !important;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .footer-order-2 {
        display: flex !important;
        flex-direction: column !important;
        padding-right: 12rem !important;
        justify-content: center !important;
        padding-left: 1rem !important;
    }

    .form-btn {
        padding: 0.5rem 2rem !important;
    }

    .h-100 {
        height: 100vh;
    }

    .heading-cost {
        font-size: 50px !important;
        font-weight: 700 !important;
    }

    .heading-customer {
        font-size: 50px !important;
        font-weight: 700 !important;
    }

    .heading-intro {
        font-size: 40px;
        font-weight: 700 !important;
    }

    .heading-second-intro {
        font-size: 40px;
        font-weight: 700 !important;
    }

    .hr-feature {
        width: 100%;
        border-bottom: 0.5rem solid #1975fe !important;
        border-radius: 1rem;
    }

    .icon-space {
        display: flex !important;
        justify-content: space-evenly !important;
    }

    .like-img {
        width: 1.5rem !important;
    }

    .line-h {
        line-height: 4.5rem !important;
    }

    .logo-section {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(8vw, 1fr)) !important;
        row-gap: 3rem !important;
        column-gap: 6rem !important;
    }

    .logo-w {
        width: 50% !important;
    }

    .mobile-br {
        content: "\a";
        white-space: nowrap;
    }

    .nav-ct {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .p-card-comment {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .p-comment {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .p-large {
        padding-left: 10rem !important;
        padding-right: 10rem !important;
    }

    .py-second-intro {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .secure-card {
        width: 30% !important;
    }

    .secure-text {
        font-size: 36px !important;
        font-weight: 700 !important;
    }

    .text-free {
        font-size: calc(42px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-h3 {
        font-size: calc(40px + (12 - 10) * ((100vw - 300px) / (1600 - 300))) !important;
    }

    .text-second-card {
        font-size: 28px !important;
        font-weight: 600;
    }

    .vid-screen{
        height: 65rem;
    }
}

@media (min-width: 1200px){

}