/*
|--------------------------------------------------------------------------
| CTA SECTION
|--------------------------------------------------------------------------
*/

.dqmate-cta-section {

    margin-top: 40px;

    margin-bottom: 20px;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| BUTTON WRAPPER
|--------------------------------------------------------------------------
*/

.dqmate-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| PRIMARY BUTTON
|--------------------------------------------------------------------------
*/

.dqmate-primary-btn {

    min-width: 280px;

    height: 58px;

    padding: 0 32px;

    border: none;

    border-radius: 12px;

    background: #0f172a;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow:
        0 8px 20px rgba(15,23,42,0.15);
}

.dqmate-primary-btn:hover {

    background: #020617;

    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| SECONDARY BUTTON
|--------------------------------------------------------------------------
*/

.dqmate-secondary-btn {

    min-width: 280px;

    height: 58px;

    padding: 0 32px;

    border: 1px solid #dbe1ea;

    border-radius: 12px;

    background: #ffffff;

    color: #0f172a;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.25s ease;
}

.dqmate-secondary-btn:hover {

    background: #f8fafc;

    border-color: #94a3b8;

    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| CTA NOTE
|--------------------------------------------------------------------------
*/

.dqmate-cta-note {

    margin-top: 18px;

    text-align: center;

    font-size: 14px;

    color: #64748b;
}

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

@media (max-width: 768px) {

    .dqmate-cta-buttons {

        flex-direction: column;

        width: 100%;
    }

    .dqmate-primary-btn,
    .dqmate-secondary-btn {

        width: 100%;

        min-width: auto;
    }

}

/* === Tighter CTA section for short viewports === */
@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section {
        margin-top: 8px !important;
        padding-bottom: 12px !important;
    }
    .dqmate-cta-buttons {
        margin: 8px 0 6px !important;
    }
    .dqmate-cta-note {
        margin-top: 6px !important;
    }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section {
        margin-top: 2px !important;
        padding-bottom: 4px !important;
    }
    .dqmate-cta-buttons {
        margin: 2px 0 !important;
    }
    .dqmate-cta-note {
        margin: 2px 0 0 !important;
    }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section { padding-bottom: 2px !important; }
    .dqmate-cta-buttons { margin: 0 !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section { margin: 0 !important; padding: 0 0 4px !important; }
    .dqmate-cta-buttons { margin: 0 !important; }
    .dqmate-cta-note { margin: 0 !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section { margin: 0 !important; padding: 0 0 4px !important; }
    .dqmate-cta-buttons { margin: 0 !important; }
    .dqmate-cta-note { margin: 0 !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section,
    .dqmate-cta { padding-top: 10px !important; padding-bottom: 14px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section,
    .dqmate-cta { padding-top: 6px !important; padding-bottom: 10px !important; }
}

@media (min-width: 1024px) and (max-height: 850px) {
    .dqmate-cta-section,
    .dqmate-cta { padding-top: 4px !important; padding-bottom: 8px !important; }
}