/*
|--------------------------------------------------------------------------
| BENEFITS SECTION
|--------------------------------------------------------------------------
*/

.dqmate-benefits-section {

    margin-bottom: 40px;

    position: relative;

}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.dqmate-benefits-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 32px;

    align-items: stretch;

}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.dqmate-benefits-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 22px;

    box-shadow:
        0 12px 30px rgba(15,23,42,0.06);

}

.dqmate-benefits-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 50px rgba(15,23,42,0.10),
        0 30px 80px rgba(15,23,42,0.14);

}

/*
|--------------------------------------------------------------------------
| DARK CARD
|--------------------------------------------------------------------------
*/

.dqmate-benefits-card:last-child {

    background: linear-gradient(
        135deg,
        #020817 0%,
        #081226 100%
    );

    border: 1px solid rgba(56,189,248,0.15);

    box-shadow:
        0 20px 60px rgba(2,8,23,0.35);

}

.dqmate-benefits-card:last-child .dqmate-card-title {

    color: #ffffff;

}

.dqmate-benefits-card:last-child li {

    color: rgba(255,255,255,0.88);

}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.dqmate-card-title {

    margin: 0 0 18px 0;

    font-size: 22px;

    font-weight: 800;

    color: #0f172a;

}

/*
|--------------------------------------------------------------------------
| LIST
|--------------------------------------------------------------------------
*/

.dqmate-benefits-list {

    list-style: none;

    padding: 0;

    margin: 0;

}

/*
|--------------------------------------------------------------------------
| ITEM
|--------------------------------------------------------------------------
*/

.dqmate-benefits-list li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;

    font-size: 15px;

    line-height: 1.5;

    color: #334155;

}

.dqmate-benefits-list li:last-child {

    margin-bottom: 0;

}

/*
|--------------------------------------------------------------------------
| CHECK ICON
|--------------------------------------------------------------------------
*/

.dqmate-check {

    width: 24px;

    height: 24px;

    min-width: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #d1fae5;

    color: #059669;

    font-size: 12px;

    font-weight: 700;

}

.dqmate-benefits-card:last-child .dqmate-check {

    background: rgba(34,211,238,0.15);

    color: #22d3ee;

}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .dqmate-benefits-grid {

        gap: 20px;

    }

    .dqmate-benefits-card {

        padding: 24px;

    }

    .dqmate-card-title {

        font-size: 22px;

    }

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .dqmate-benefits-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

    .dqmate-benefits-card {

        padding: 20px;

        border-radius: 18px;

    }

    .dqmate-card-title {

        font-size: 20px;

        margin-bottom: 16px;

    }

    .dqmate-benefits-list li {

        font-size: 14px;

        margin-bottom: 12px;

    }

    .dqmate-check {

        width: 22px;

        height: 22px;

        min-width: 22px;

        font-size: 11px;

    }

/* === Spacing-only compression for short viewports === */
@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes,
    .dqmate-benefits-container {
        margin: 12px 0 !important;
        gap: 16px !important;
    }
    .dqmate-benefit-box,
    .dqmate-benefits-card {
        padding: 16px 20px !important;
    }
    .dqmate-benefit-list li {
        padding: 4px 0 !important;
    }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes {
        margin: 4px 0 !important;
        gap: 10px !important;
    }
    .dqmate-benefit-box,
    .dqmate-benefits-card {
        padding: 10px 16px !important;
    }
    .dqmate-benefit-list li { padding: 2px 0 !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { margin: 2px 0 !important; }
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 8px 14px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { margin: 0 !important; gap: 8px !important; }
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 6px 12px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { margin: 0 !important; gap: 8px !important; }
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 6px 12px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { margin: 0 !important; gap: 6px !important; }
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 4px 10px !important; }
    .dqmate-benefit-list li { padding: 0 !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 2px 8px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 10px 14px !important; }
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { gap: 14px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 14px 18px !important; }
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { gap: 18px !important; margin-top: 10px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 10px 14px !important; }
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { gap: 14px !important; margin-top: 6px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-benefit-box,
    .dqmate-benefits-card { padding: 8px 12px !important; }
    .dqmate-benefits-grid,
    .dqmate-benefit-boxes { gap: 12px !important; margin-top: 4px !important; }
}