.sliding-cards-panel {}
.sliding-cards-panel .block-wrapper {display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
.sliding-cards-panel .block-wrapper .card {display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;}
.sliding-cards-panel .block-wrapper .card .heading {display:flex;flex-direction:row;gap:15px;padding:20px 30px 0px 30px;font-family:var(--primaryFont);font-size:20px;font-weight:bold;}
.sliding-cards-panel .block-wrapper .card .heading .icon {height:30px;width:30px;background-repeat:no-repeat;background-size:contain;background-position:center;}
.sliding-cards-panel .block-wrapper .card .content {padding:20px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:20px;}
.sliding-cards-panel .block-wrapper .card:nth-child(1) {background-color:var(--blue);color:#FFF;}
.sliding-cards-panel .block-wrapper .card:nth-child(2) {background-color:var(--teal);color:#000;}
.sliding-cards-panel .block-wrapper .card:nth-child(3) {background-color:var(--lightBlue);color:#000;}

.sliding-cards-panel.active .block-wrapper {grid-template-columns:1fr;padding-top:100px;}
.sliding-cards-panel.active .block-wrapper .card {grid-column:1;grid-row:1;z-index:3;transition:margin-top 0.4s ease;}
.sliding-cards-panel.active .block-wrapper .card[data-order="1"] {margin-top:0px;z-index:3;}
.sliding-cards-panel.active .block-wrapper .card[data-order="2"] {margin-top:-50px;z-index:2;}
.sliding-cards-panel.active .block-wrapper .card[data-order="3"] {margin-top:-100px;z-index:1;}

.sliding-cards-panel.active .block-wrapper .card.ani-out {transition:none !important;animation: cardSlideOut 0.4s linear forwards;z-index:4 !important;}
.sliding-cards-panel.active .block-wrapper .card.ani-in {transition:none !important; animation: cardSlideIn 0.4s linear forwards;}

@keyframes cardSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100% + 40px));
    }
}

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateX(calc(100% + 40px));
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@media (max-width:1000px)
{
    .sliding-cards-panel.active{overflow:hidden;}
    .sliding-cards-panel .block-wrapper .card .heading {padding:14px 20px 0px 20px;align-items:center;height:50px;}
    .sliding-cards-panel .block-wrapper .card .content {padding:20px;}
    .sliding-cards-panel .block-wrapper .card .heading .icon {height:20px;width:20px;}
    .sliding-cards-panel .block-wrapper .card .heading {font-size:18px;}
}