/* profile */
.profile{display: flex; margin-top: 150px; justify-content: space-between;}
.profile .left{ width: 480px;}
.profile .left .title{ color: var(--color-orange); font-size: 60px; margin-top: -10px; margin-bottom: 100px;}
.profile .left .img img{ width: 100%; border-radius: 18px;}
.profile .right{ flex: 1; max-width: 650px; margin-left: 50px; font-size: 18px; line-height: 32px;}
.profile .right p{ margin-bottom: 50px;}

/* features */
.features{ margin-top: 150px;  padding: 150px 0; color: #FFF;}
.features-header{ font-size: 32px;}
.features .items{ display: flex; flex-wrap: wrap;}
.features .item{ width: 50%; display: flex; margin-top: 100px;}
.features .item .icon img{ display: inline-block; width: 56px; height: 56px;}

.features .item .desc{ max-width: 424px; margin-left: 30px;}
.features .item .desc p:nth-child(1){ font-size: 22px;}
.features .item .desc p:nth-child(2){ font-size: 18px; line-height: 32px;  margin-top: 10px;}

/* customers */
.customers{ padding: 150px 0;}
.customers-header{ font-size: 32px; margin-bottom: 60px;}
.customers-body{ margin: auto; font-size: 24px; line-height: 48px; position: relative; padding: 50px 100px;}
.customers-body::before, .customers-body::after{ content: ''; position: absolute; width: 76px; height: 76px; background-image: url(../img/vdna/quotation-marks.png); background-size: cover; }
.customers-body::before{ left: 0; top: 0;}
.customers-body::after{ right: 0; bottom: 0; transform: rotate(180deg);}

.customers-footer{ display: flex; justify-content: center; align-items: center; padding: 50px 0 50px;}
.customers-footer p:nth-child(1), .customers-footer p:nth-child(3){ width: 400px;}
.customers-footer p:nth-child(2){position: relative; width: 100px; height: 70px;}
.customers-footer p:nth-child(2)::after{ content: ''; position: absolute; border-left: 2px solid #ddd; height: 160%; top: -30%; left: 50%;}
.customers-footer p:nth-child(3) span{ display: block;}
.customers-footer p:nth-child(3) span:nth-child(1){ font-size: 24px;}
.customers-footer p:nth-child(3) span:nth-child(2){ font-size: 18px; margin-top: 10px;}
.customers-footer img{ display: inline-block !important;}


.customers .slick-dots{ text-align: center; list-style-type: none; margin-top: 40px;}
.customers .slick-dots li{ display: inline-block; margin: 0 18px;}
.customers .slick-dots li button{ cursor: pointer; border: none; background-color: #ccc; border-radius: 50%; width: 18px; height: 18px; overflow: hidden; text-indent: -999px;}
.customers .slick-dots li.slick-active button{ background-color: var(--color-orange);}


/* common */
.btn-sm{display: inline-block; font-size: 14px;  color: #FFF; height: 34px; line-height: 34px; padding:0 18px; border-radius: 34px;}
.btn-submit{ border: none; cursor: pointer; padding: 0 40px; display: inline-block; font-size: 14px;  color: #FFF; height: 34px; line-height: 34px;border-radius: 34px;}
.btn-submit[disabled="disabled"]{ background-color: #CCC !important;}
.btn-submit:hover{ opacity: .8;}

.orange .btn-sm, .orange .btn-submit{ background-color: var(--color-orange);}
.blue .btn-sm, .blue .btn-submit{ background-color: var(--color-blue);}
.btn-orange{ background-color: var(--color-orange);}
.btn-blue{ background-color: var(--color-blue);}


/* form*/
.form{ background-color: #f2f2f2; padding: 150px 0;}
.form .wrap{ display: flex; justify-content: space-between;}
.form .left{ flex: 1; max-width: 480px;}
.form .right{ width: 660px; background-color: #FFF; border-radius: 18px;}
.form-header p:nth-child(1){ font-size: 32px;}
.form-header p:nth-child(2){ font-size: 24px; line-height: 48px; margin-top: 50px;}
.form-img{ margin-top: 150px;}
.contact-form{ padding: 40px;}
.contact-form .row{ display: flex; justify-content: space-between;}
.contact-form .row>div{ width: 45%;}
.form-item{ margin-bottom: 40px;}
.form-item label{ display: block; font-size: 18px; margin-bottom: 18px; }
.form-input input, .form-input textarea{ background-color: #f2f2f2; width: 100%; border-radius: 12px; border: none; padding: 10px 18px; box-sizing: border-box;}
.form-input input{ height: 46px;}
.form-input textarea{ height: 100px;}

.form span.error{ display: block; color: #ec240a; margin-top: 10px;}
.form-input input.error, .form-input textarea.error{ outline: 1px solid #ec240a;}

.icon-mail{display: inline-block; width: 242px; height: 127px; background-size: cover;}
.text-bg{ font-size: 190px; position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; left: 0; top: 0;}
.text-bg.line-2{font-size: 120px; line-height: 1;}

/* blue */
.blue-style .icon-mail{ background-image: url(../img/digitalWatermark/icon-mail.png);}
.bg-blue { background-image: linear-gradient(to bottom, #3aa7e6, #3294de, #2f86d7)}
.blue-style .customers-body::before, .blue-style .customers-body::after{ background-image: url(../img/digitalWatermark/quotation-marks.png);}
.blue-style .text-bg{ color: rgba(1, 107, 206, 0.15);}
.blue-style .profile .left .title{ color: var(--color-blue);}
.blue-style .other-solutions-slider .slick-dots li.slick-active button { background-color: var(--color-blue);}


/* orange */
.orange-style .icon-mail{ background-image: url(../img/vdna/icon-mail.png);}
.bg-orange{background-image: linear-gradient(to bottom, #ffa841, #ff9e40, #ff8c41)}
.orange-style .customers-body::before, .orange-style .customers-body::after{ background-image: url(../img/vdna/quotation-marks.png);}
.orange-style .text-bg{color: rgba(255, 102, 0, 0.25);}
.orange-style .profile .left .title{ color: var(--color-orange);}
.orange-style .other-solutions-slider .slick-dots li.slick-active button { background-color: var(--color-orange);}

/* bg */
.bg-dark{ background-color: #EEE; color: var(--color-black);}


/* ---------vdna------ */
.vdna .kv{background-image: url(../img/vdna/kv.jpg);}

/* -------Digital Watermark--------*/
.watermark .kv{background-image: url(../img/digitalWatermark/kv.jpg);}
.watermark .kv .detail p:nth-child(2) {
    max-width: 680px;
}



/* video-tracker */
.video_tracker .kv{background-image: url(../img/products/banner/1.jpg);}

/* API Arithmetic */
.api_arithmetic .kv{background-image: url(../img/products/banner/2.jpg);}

/* rightID */
.rights_id .kv{background-image: url(../img/products/banner/3.jpg);}

/* ChannelID */
.channel_id .kv{background-image: url(../img/products/banner/4.jpg);}

/* Insights Service */
.insights_service .kv{background-image: url(../img/products/banner/5.jpg);}

/* Web3 Services */
.web3_services .kv{background-image: url(../img/products/banner/6.jpg);}

/*cash_distribution */
.cash_distribution .kv{background-image: url(../img/products/banner/7.jpg);}
.cash_distribution .kv .detail p:nth-child(1) {
    font-size: 80px;
    line-height: 100px;
}
.cash_distribution .profile .left .title{ font-size: 50px;}


/* dark model */
body.dark .customers{ background-color: #000;}
body.dark .form{ background-color: #111;}
body.dark .form .right{ background-color: #111;}
body.dark .other-solutions{ background-color: #000;}
body.dark .features.bg-dark{ background-color: #111; color: #FFF;}



@media screen and (max-width: 640px) {
    .mo-br{ display: block;}
    /* marquee */
    .marquee-logo {
        margin-top: 0;
    }
    /* profile */
    .profile {
        margin-top: 50px;
        flex-direction: column;
    }
    .profile .left {
        width: auto;
    }
    .profile .left .title {
        font-size: 30px;
        margin-top: 0;
        margin-bottom: 30px;
    }
    .profile .left .img img{ border-radius: 12px;}
    .profile .right {
        margin-left: 0;
        margin-top: 30px;
        font-size: 1rem;
        line-height: 24px;
    }
    .profile .right p {
        margin-bottom: 30px;
    }
    /* features */
    .features {
        margin-top: 50px;
        padding: 40px 15px;
    }
    .features .wrap{ padding: 0;}
    .features-header {
        font-size: 18px;
        font-family: 'Inter-Black';
    }
    .features .item {
        width: 100%;
        margin-top: 50px;
    }
    .features .item .icon img{
        width: 48px;
        height: 48px;
    }
    .features .item .desc {
        margin-left: 15px;
    }
    .features .item .desc p:nth-child(1) {
        font-size: 16px;
        font-family: 'Inter-Black';
    }
    .features .item .desc p:nth-child(2) {
        font-size: 1rem;
        line-height: 24px;
    }
    /* customers */
    .customers {
        padding: 50px 0;
    }
    .customers .wrap{ padding: 0;}
    .customers-header {
        font-size: 22px;
        margin-bottom: 30px;
        font-family: 'Inter-Black';
    }
    .customers-body {
        margin: 0 10px;
        padding: 20px 20px;
        font-size:1rem;
        line-height: 28px;
    }
    .customers-body::before, .customers-body::after {
        width: 32px;
        height: 32px;
    }
    .customers-body::before {
        left: 0;
        top: -18px;
    }
    .customers-body::after {
        right: 0;
        bottom: 0;
    }
    .customers-body .text-bg {
        font-size: 60px;
        font-family: 'Inter-Black';
    }
    .customers-footer {
        padding: 30px 10px 30px;
    }
    .customers-footer p:nth-child(1), .customers-footer p:nth-child(3) {
        width: auto;
    }
    .customers-footer p:nth-child(1) img{ width: 120px;}
    .customers-footer p:nth-child(2) {
        width: 40px;
        height: 50px;
    }
    .customers-footer p:nth-child(2)::after {
        border-left: 1px solid #ddd;
        height: 140%;
    }
    .customers-footer p:nth-child(3) span:nth-child(1) {
        font-size: 16px;
    }
    .customers-footer p:nth-child(3) span:nth-child(2) {
        font-size: 14px;
        margin-top: 10px;
    }
    .customers-btn {
        margin-top: 30px;
    }
    .customers .slick-dots li button {
        width: 10px;
        height: 10px;
        line-height: 10px;
        padding: 0;
    }

    /* form */
    .form {
        padding: 80px 0;
    }
    .form .wrap {
        flex-direction: column;
    }
    .form-header p:nth-child(1) {
        font-size: 28px;
        font-family: 'Inter-Black';
    }
    .form-header p:nth-child(2) {
        font-size: 1rem;
        line-height: 28px;
        margin-top: 30px;
    }
    .form-img {
        margin-top: 50px;
        text-align: right;
    }
    .form-img img{ width: 100px;}
    .form .right {
        width: auto;
        border-radius: 12px;
        margin-top: 30px;
    }
    .contact-form {
        padding: 18px;
    }
    .form-item label {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .form-input input {
        height: 40px;
    }
    .form-input input, .form-input textarea {
        border-radius: 8px;
        padding: 10px 10px;
    }
    .form-item {
        margin-bottom: 18px;
    }
    .icon-mail {
        width: 100px;
        height: 52px;
    }
    

    /* vdna */
    .vdna .kv{background-image: url(../img/vdna/kv-mo.jpg);}
    /* digital watermark */
    .kv .detail p:nth-child(1) {
        font-size: 50px;
        line-height: 60px;
    }
    .watermark .kv{background-image: url(../img/digitalWatermark/kv-mo.jpg);}
    .watermark .customers-body .text-bg {
        font-size: 56px;
        line-height: 80px;
    }

        /* video-tracker */
    .video_tracker .kv{background-image: url(../img/products/banner-m/1.jpg);}
    .video_tracker .customers-body .text-bg{ font-size: 50px;}
    .video_tracker .kv .detail p:nth-child(1) {
        font-size: 40px;
    }

    /* API Arithmetic */
    .api_arithmetic .kv{background-image: url(../img/products/banner-m/2.jpg);}

    /* rightID */
    .rights_id .kv{background-image: url(../img/products/banner-m/3.jpg);}

    /* ChannelID */
    .channel_id .kv{background-image: url(../img/products/banner-m/4.jpg);}

    /* Insights Service */
    .insights_service .kv{background-image: url(../img/products/banner-m/5.jpg);}

    /* Web3 Services */
    .web3_services .kv{background-image: url(../img/products/banner-m/6.jpg);}
    .web3_services .kv .detail p:nth-child(1){ font-size: 40px;}

    /* cash distribution */
    .cash_distribution .kv{background-image: url(../img/products/banner-m/7.jpg);}
    .cash_distribution .kv .detail p:nth-child(1){ font-size: 30px; line-height: 1.5;}
    .cash_distribution .profile .left .title {
        font-size: 30px;
    }





}