.splide .blogs-card {
    border-radius: 8px;
    box-shadow: 0 0px 20px rgba(182, 182, 182, 0.25);
    margin-bottom: 20px;
    overflow: hidden;
}
.splide .blogs-card .btn-border-outline {
    padding: .2rem 2rem !important;
}
.blogs-card {
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.splide__track {
    padding-bottom: 5rem !important;
}

.splide__slide {
    opacity: 0.5 !important;
}

.splide__slide .border-underline-btn,
.splide__slide .blog-read-more {
    opacity: 0.5;
    pointer-events: none;
}

.splide__slide .share-btn {
    pointer-events: none !important;
}

.splide__slide.is-active {
    opacity: 1 !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.disabled .arrow {
    color: var(--primary-color) !important;
}

.splide__slide.is-active .border-underline-btn,
.splide__slide.is-active .blog-read-more,
.splide__slide.is-active .share-btn {
    opacity: 1;
    pointer-events: auto !important;
}

.splide__slide.is-active .blogs-card {
    z-index: 1;
    transform: scale(1.12);
    margin-top: 2em;
    /* margin-bottom: 5rem; */
    transition: all 0.2s ease;
}

.splide__slide .is-active .is-visible {
    transform: scale(1.05);
}

@media (min-width: 992px) {
    .splide__slide.is-active .slide-card {
        opacity: 1 !important;
        transform: scale(1.1);
        transition: all 0.2s ease;
        margin-top: 2.2rem;
        position: relative;
    }
    .splide__slide {
        margin-bottom: 5rem;
    }
}

.border-color {
    /* color:  rgba(33, 31, 95, 0.15); */
    color: var(--primary-color);
    margin: .5rem;
}

/*splide arrow*/
.splide__arrows {
    display: flex;
    justify-content: center;
}

.splide__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
    width: 2.78rem;
    height: 2.78rem;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.25rem !important;
    position: absolute;
    top: 90% !important;
    z-index: 10;
    opacity: 1 !important;
}

.list-blogs {
    padding: 2rem 0;
}

.splide__arrow svg {
    fill: var(--primary-color);
    height: 16px !important;
    width: 16px !important;
    opacity: 1 !important;
}

.splide__arrow:hover svg {
    fill: #fff;
    height: 1.2em;
    width: 1.2em;
    opacity: 1 !important;
}

.splide__arrow:hover {
    color: white !important;
    background-color: var(--primary-color) !important;
}

.splide__arrow--prev {
    inset-inline-start: 33% !important;
}

.splide__arrow--next {
    inset-inline-end: 33% !important;
}

[dir="rtl"] .splide__arrow--prev {
    inset-inline-start: 33%;
}

[dir="rtl"] .splide__arrow--next {
    inset-inline-end: 33%;
}

/* =====================pagination */
.pagination-arrow,
.pagination-numbers,
.number-active {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    cursor: pointer;
}

.pagination-arrow {
    color: white;
    background: var(--primary-color);
}

.pagination-numbers {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.number-active {
    background-color: var(--secondary-color);
    border: none;
    color: white;
}

/*------- media query ---------*/
@media (max-width: 576px) {
    .splide__arrow {
        top: 80% !important;
    }

    .splide__slide.is-active .blogs-card {
        z-index: 1;
        transform: scale(1.12);
        margin-top: 2rem;
        /* margin-bottom: 5rem; */

        /* padding-bottom: 3rem; */
        transition: all 0.2s ease;
    }

    .splide__arrow--prev {
        inset-inline-start: 3% !important;
    }

    .splide__arrow--next {
        inset-inline-end: 3% !important;
    }

    .title-select {
        display: flex;
        flex-direction: column;
    }

    .splide__track {
        padding-bottom: 5rem !important;
    }

    html[dir="rtl"] .splide__arrow--prev {
        inset-inline-start: 3%;
        margin-top: 3rem;
    }

    html[dir="rtl"] .splide__arrow--next {
        inset-inline-end: 3%;
        margin-top: 3rem;
    }
}

.list-of-blogs .blogs-card .shareBtnContainer {
    min-height: 2rem !important;
}

.list-of-blogs .blogs-card {
    margin-bottom: 0rem !important;
}

@media (min-width: 576.88px) and (max-width: 767.88px) {
    .splide__arrow--prev {
        inset-inline-start: 16% !important;
    }

    .splide__arrow--next {
        inset-inline-end: 16% !important;
    }

    .splide__arrow {
        top: 78% !important;
    }

    .splide__slide.is-active .blogs-card {
        z-index: 1;
        transform: scale(1.12);
        margin-top: 2.5rem;
        /* margin-bottom: 5rem; */

        /* padding-bottom: 3rem; */
        transition: all 0.2s ease;
    }
    .splide__track {
        padding-bottom: 8rem !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .splide__arrow--prev {
        inset-inline-start: 17% !important;
    }

    .splide__arrow--next {
        inset-inline-end: 17% !important;
    }

    .splide__slide.is-active .blogs-card {
        z-index: 1;
        transform: scale(1.1);
        margin-top: 2rem;
        /* margin-bottom: 5rem; */
        /* padding-bottom: 3rem; */
        transition: all 0.2s ease;
    }
    .splide__track {
        padding-bottom: 8rem !important;
    }

    .splide__arrow {
        top: 80% !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .splide__arrow--prev {
        inset-inline-start: 27% !important;
    }

    html[dir="rtl"] .splide__arrow--prev {
        inset-inline-start: 27% !important;
    }

    .splide__arrow--next {
        inset-inline-end: 27% !important;
    }

    html[dir="rtl"] .splide__arrow--next {
        inset-inline-end: 27% !important;
    }
}
.btn-border-outline {
    padding: 0.4rem 1.5rem;
}

.custom-border-blogs-top {
    border-top: 1px solid rgba(33, 31, 95, 0.3);
    padding: 0;
}
@media (max-width: 576px) {
    .custom-border-blogs-top {
        padding: 1rem;
    }
}
@media (min-width: 2000px) {
    .is-prev {
        padding-inline-end: 3.5rem;
    }
    .is-next {
        padding-inline-start: 3.5rem;
    }
}
@media (min-width: 2800px) {
    .is-prev {
        padding-inline-end: 4rem;
    }
    .is-next {
        padding-inline-start: 4rem;
    }
}
.media-center-slider .blogs-card {
    background-color: var(--soft-white);
}