/* ==================================================
   THREE BRANCHES LANDSCAPES
   SERVICES PAGE
================================================== */


/* ==================================================
   SERVICE SECTION
================================================== */

.services-detail-section {
    scroll-margin-top: var(--space-2xl);
}


/* ==================================================
   SECTION DIVIDER
================================================== */

.services-detail-section + .services-detail-section {
    border-top: 1px solid rgba(78, 78, 78, 0.18);
}


/* ==================================================
   SERVICE CARDS GRID
================================================== */

.services-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: var(--space-md);

    margin-top: var(--space-2xl);
}


/* ==================================================
   SERVICE CARD
================================================== */

.services-detail-card {
    flex: 0 1 calc(
        25% - (var(--space-md) * 3 / 4)
    );

    min-width: 0;
    min-height: 145px;

    padding: var(--space-lg);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: var(--white);

    box-shadow: 0 4px 4px 0 var(--primary);
}

.services-detail-card h3 {
    font-family: var(--script-font);
    font-weight: 400;
}

.services-detail-card h3 + p {
    margin-top: var(--space-md);
}


/* ==================================================
   SECTION ACTION
================================================== */

.services-section-action {
    display: flex;
    justify-content: center;

    margin-top: var(--space-xl);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 991px) {

    .services-detail-card {
        flex-basis: calc(
            50% - (var(--space-md) / 2)
        );
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 575px) {

    .services-card-grid {
        flex-direction: column;
    }

    .services-detail-card {
        flex-basis: auto;

        width: 100%;
        min-height: 0;
    }

}