.card-position {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card {
    margin-bottom: 2.2rem;
    border: none;

    &.card-statistic {
        box-shadow: 1px 2px 5px  rgba(#2FAAF4, .5);
        background: linear-gradient(to bottom, #25a6f1, #54b9ff);
        .card-title {
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.651);
            letter-spacing: .8px;
            font-weight: 400;
            font-size: 1.3rem;
            margin-bottom: 0;
            margin-top: 5px;
        }
        .card-right {
            p {
                font-size: 1.5rem;
                color: #fff;
                margin-bottom: 0;
            }
            span.green {
                color: rgb(111, 255, 111)
            }
            span.red {
                color: rgb(255, 121, 121)
            }
        }
        .chart-wrapper {
            height: 100px;
        }
    }
    .card-header {
        border: none;
        
        h4 {
            font-size: $card-title-font-size;
            font-weight: bold;
        }
        & ~ .card-body {
            padding-top: 0;
        }
    }
    .card-content {
        position: relative;
    }
    .card-body {
        padding: $card-cap-padding-y $card-cap-padding-x;
    }
    .card-heading {
        color: #555;
        font-size: 1.5rem;
    }
    .card-img-overlay {
        background-color: rgba(0,0,0,.6);

        p {
            color: #eee;
        }

        .card-title {
            color: #fff;
        }
    }
    

}
.pricing {
    .card {
        box-shadow: none;
        margin-bottom: 0;
        border-right: 1px  solid $gray-200;
        box-shadow: 0 10px 10px $gray-200;
    }
    h1 {
        text-align: center;
        font-size: 4rem;
        margin-bottom: 3rem;
    }
    .card-header {
        .card-title {
            font-size: 2rem !important;
            margin-bottom: 0;
        }
        p {
            font-size: .8rem;
        }
    }
    ul {
        li {
            list-style: none;
            margin-bottom: .5rem;
            i, svg {
                width: 1rem;
                color: map-get($theme-colors, 'success');
                font-size: 1rem;
                margin-right: 7px;
            }
        }
    }
    .card-highlighted {
        background-color: map-get($theme-colors, 'primary');
        padding-top: 20px;
        padding-bottom: 20px;
        .card-header, .card-body {
            background-color: map-get($theme-colors, 'primary');
            color: $card-bg;
        }
        ul {
            li {
                i, svg {
                    color: $teal-400;
                }
                color: #fff;
            }
        }
        .card-footer {
            background-color: map-get($theme-colors, 'primary');
        }
        .card-title {
            color: #fff;
            font-size: 1.8rem;
        }
    }
}

html[data-bs-theme="dark"] {
    .card {
        background-color: #232323 !important;
        color: #e0e0e0 !important;
        border-color: #333 !important;

        &.card-statistic {
            box-shadow: 1px 2px 5px rgba(#2FAAF4, .3);
            background: linear-gradient(to bottom, #1a1a1a, #232323);
            .card-title {
                color: rgba(255, 255, 255, 0.8);
            }
            .card-right {
                p {
                    color: #fff;
                }
                span.green {
                    color: #6fff6f;
                }
                span.red {
                    color: #ff7979;
                }
            }
        }

        .card-header {
            background-color: #232323 !important;
            color: #e0e0e0 !important;
            border-color: #333 !important;
        }
        .card-body {
            background-color: #232323 !important;
            color: #e0e0e0 !important;
        }
        .card-content {
            background-color: #232323 !important;
        }
        .card-heading {
            color: #e0e0e0 !important;
        }
        .card-img-overlay {
            background-color: rgba(0,0,0,.7);
            p {
                color: #ccc;
            }
            .card-title {
                color: #fff;
            }
        }
    }

    .pricing {
        .card {
            background-color: #232323 !important;
            color: #e0e0e0 !important;
            border-color: #333 !important;
            box-shadow: 0 10px 10px #222;
        }
        .card-header {
            background-color: #232323 !important;
            color: #e0e0e0 !important;
        }
        .card-highlighted {
            background-color: #1a1a1a !important;
            .card-header, .card-body, .card-footer {
                background-color: #1a1a1a !important;
                color: #fff !important;
            }
            ul {
                li {
                    i, svg {
                        color: $teal-400;
                    }
                    color: #fff;
                }
            }
            .card-title {
                color: #fff !important;
            }
        }
    }
}
