.row {
    margin: 0;
}

.home-banner {
    width: 100%;
    padding: 10px;
    background: var(--background-color);
    padding: 30px 15px;
    min-height: calc(100vh - 60px - 50px);
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-banner .banner-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-banner .banner-content h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0.02em;
    color: #1C1C1C;
    text-align: center;
    margin-bottom: 1px;
}

.home-banner .banner-content p {
    font-size: 18px;
    color: #6e6f73;
    margin-bottom: 26px;
}

.home-banner .banner-content .btn-trial {
     
    font-weight: 400;
    font-size: 20px;
    color: #F96A19;
    height: 56px;
    line-height: 56px;
    padding: 0;
    width: 175px;
    background: #fff;
    border: 0;
    border-radius: 40px;
    box-shadow: none;
}

.feature-list {
    width: 100%;
}

.feature-list>.row {
    max-width: 1730px;
    margin: 0 auto;
    justify-content: center;
}

.feature-list .card-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 10px;
    text-decoration: none;
    flex-direction: row;
    padding: 20px 30px;
    justify-content: space-between;
}
.feature-list .card-item.compress-card:hover {
    background-color: var(--compress-color);
}
/* .feature-list .card-item.compress-card:hover .feature-icon {
    background-color: var(--compress-hover-color) ;
} */

.feature-list .card-item.pdf-card:hover {
    background-color: var(--edit-color);
}
/* .feature-list .card-item.pdf-card:hover .feature-icon {
    background-color: var(--edit-hover-color);
} */

.feature-list .card-item.split-card:hover,
.feature-list .card-item.merge-card:hover {
    background-color: var(--split-color);
}
/* .feature-list .card-item.split-card:hover .feature-icon,
.feature-list .card-item.merge-card:hover .feature-icon {
    background-color: var(--split-hover-color) ;
} */

.feature-list .card-item.sign-card:hover {
    background-color: var(--security-color);
}
/* .feature-list .card-item.sign-card:hover .feature-icon {
    background-color: var(--security-hover-color);
} */

.feature-list .card-item.jpg-card:hover {
    
    background-color: var(--convert-color);
}
/* .feature-list .card-item.jpg-card:hover .feature-icon {
    background-color: var(--convert-hover-color);
} */

.feature-list .card-item:hover h2 {
    color: #fff;
}

.feature-list .card-item:hover p {
    color: #fff;
}


.feature-list .card-item.compress-card:hover path {
    fill: #fff;
}

.feature-list .card-item.split-card:hover path {
    fill: #fff;
}

.feature-list .card-item.merge-card:hover path {
    fill: #fff;
}

.feature-list .card-item.extract-card:hover path  {
    fill: #fff;
    stroke: #fff;
}

.feature-list .card-item.pdf-card:hover path {
    fill: #fff;
    stroke: #fff;
}
.feature-list .card-item.sign-card:hover path {
    fill: #fff;
}

.feature-list .card-item.jpg-card:hover path {
    fill: #fff;
}



.feature-list .card-item.compress-card {
    background-color: #E5F4FA;
}
/* .feature-list .card-item.compress-card .feature-icon {
    background: #C8E3F3;
} */

.feature-list .card-item.pdf-card {
    background-color: #F8F0E4;
}
/* .feature-list .card-item.pdf-card .feature-icon {
    background: #F1E2CC;
} */

.feature-list .card-item.split-card,
.feature-list .card-item.merge-card {
    background-color: #EBECF9;
}
/* .feature-list .card-item.split-card .feature-icon,
.feature-list .card-item.merge-card .feature-icon {
    background: #D9DAF3;
} */

.feature-list .card-item.sign-card {
    background-color: #E4F1E8 ;
}
/* .feature-list .card-item.sign-card .feature-icon {
    background-color: #D0E6D7      ;
} */

.feature-list .card-item.jpg-card {
    background-color: #F1E4E3;
}
/* .feature-list .card-item.jpg-card .feature-icon {
    background-color: #EAD5D3;
} */


.feature-list .feature-col {
    border-radius: 20px;
    height: 109px;
    width: 327px;
    padding: 0;
    margin: 10px;
}

.feature-list .card-item h2 {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.02em;
    color: #1C1C1C;
    margin-bottom: 6px;
    width: max-content;
}


.feature-list .card-item p {
    font-weight: 400;
    font-size: 14px;
    color: #5F637C;
    min-height: 40px;
    line-height: 20px;
    margin-bottom: 0;
}

.feature-list .card-item a.icon-link {
    display: block;
    margin: 15px auto 0;
    text-decoration: none;
     
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    width: 280px;
    height: 48px;
    line-height: 48px;
    padding: 0;
    background: #F33343;
    border-radius: 8px;
    box-shadow: none;
    border: 0;
    text-align: center;
}

.feature-list .feature-icon {
    min-width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.pdf-introduction {
    max-width: 1150px;
    margin: 0 auto;
    padding: 50px;
}

.introduction-part img {
    max-width: 100%;
}

.introduction-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.introduction-row h3 {
    font-size: 26px;
    line-height: 30px;
    color: #1C1C1C;
     font-weight: 700;
    margin-bottom: 50px;
}

.introduction-row p {
    font-size: 16px;
    line-height: 22px;
    color: #000000;
     
    max-width: 360px;
}

.premium-content {
    max-width: 1514px;
    height: 410px;
    margin: 0 auto;
    padding: 0 30px 70px;
}

.premium-section {
    height: 100%;
    background: url(../img/home/premium-bg.png) no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.premium-section h2 {
    font-weight: 600;
    font-size: 30px;
    line-height: 36px;
    color: #fff;
     font-weight: 700;
    margin-bottom: 20px;
}

.premium-section p {
     
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    max-width: 550px;
    padding: 0 5px;
}

.premium-content a {
    padding: 11px 24px;
    background: #fff;
    border-radius: 4px;
    color: #EA3C00 !important;
    font-size: 14px;
    line-height: 16px;
     
}

@media screen and (min-width: 2100px) {
    .home-banner .banner-content h1 {
        font-size: 36px;
    }

    .home-banner .banner-content p {
        font-size: 26px;
    }
    .feature-list .feature-col {
        border-radius: 20px;
        height: 159px;
        width: 387px;
        padding: 0;
        margin: 10px;
    }

    .feature-list .card-item h2 {
        font-size: 27px;
    }

    .feature-list .card-item p {
        font-size: 20px;
        line-height: 30px;
    }

    .feature-list .feature-icon svg {
        width: 50px;
        height: 50px;
    }
}