.banner-cards-container {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-gap-xs, 4px);
    align-self: stretch;
    flex-wrap: nowrap;
    /* make cards stay in a row */
    overflow-x: auto;
    /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch;
    /* smooth iOS scroll */
}


/* Card */
.gdrfa-banner-card {

    display: flex;
    min-height: 172px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    cursor: pointer;
    border-radius: var(--radius-md, 16px);

    /* elevation/3 */
    box-shadow: 0 8px 24px 0 var(--opacity-on-surface-opacity12, rgba(0, 0, 0, 0.12));

}

.gdrfa-banner-card-content {
    display: flex;
    width: 252.8px;
    min-height: 172px;
    padding: var(--padding-padding-md, 12px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-gap-sm, 8px);
    border-radius: var(--radius-md, 16px);
    border: 0 solid var(--surface-outline, #E4E2E6);
    background: var(--surface-surface, #FFF);
}

.banner-card-icon-container {
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
}

.banner-card-icon-container svg {
    display: flex;
    /*width: 56px;
height: 56px;*/
    justify-content: center;
    align-items: center;
    fill: var(--surface-on-surface-variant, #4B4545);
}

.banner-card-service-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.banner-card-service-text .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    color: var(--surface-on-surface, #000);
    text-overflow: ellipsis;

    /* H6/Regular */
    font-family: var(--font-family, Dubai);
    font-size: var(--font-size-h6, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-h6, 28px);
    /* 140% */
}

.banner-card-service-text .card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    align-self: stretch;
    overflow: hidden;
    color: var(--surface-on-surface-variant, #4B4545);
    text-overflow: ellipsis;

    /* Caption/Regular */
    font-family: var(--font-family, Dubai);
    font-size: var(--font-size-caption, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-caption, 20px);
    /* 142.857% */
    letter-spacing: 0.14px;

}

@media (min-width: 769px) and (max-width: 1024px) {
    .gdrfa-banner-card {
        width: 300px;
        flex: 0 0 auto;
        /* don’t let it shrink */

    }

    .gdrfa-banner-card-content {
        width: 300px;
        height: 172px;
        flex-shrink: 0;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .gdrfa-banner-card {
        width: 300px;
        flex: 0 0 auto;
        /* don’t let it shrink */

    }

    .gdrfa-banner-card-content {
        width: 300px;
        height: 172px;
        flex-shrink: 0;
    }
}

@media (max-width: 641px) {
    .gdrfa-banner-card {
        width: 300px;
        flex: 0 0 auto;
        /* don’t let it shrink */

    }

    .gdrfa-banner-card-content {
        width: 300px;
        height: 172px;
        flex-shrink: 0;
    }
}

.banner-cards-container::-webkit-scrollbar {
    display: none;
    /* hide scrollbar (Safari/Chrome) */
}

.banner-cards-container {
    scrollbar-width: none;
    /* hide scrollbar (Firefox) */
}

/* Focus & Keyboard Navigation */
.gdrfa-banner-card:focus {
    outline: 3px solid #007BFF;
}

/* Hover Effect (Only for Desktop) */
@media (hover: hover) {

    .gdrfa-banner-card:hover .banner-card-icon-container svg path {
        fill: var(--primary-primary40, #9d3f49);
    }

    .banner-cards-container {
        overflow: visible;
    }

    /* the cards */
    .gdrfa-banner-card {
        transition: transform .25s ease, box-shadow .25s ease;
        will-change: transform;
        position: relative;
        z-index: 0;
    }

    .gdrfa-banner-card:hover {
        transform: translateY(-26px);
        box-shadow: 0 25px 50px -12px rgba(16, 24, 40, .25);
        z-index: 1;
    }


}