/* General Card Styles */

.wp-block-ws-card {
    overflow: hidden;
    position: relative;
    z-index: 0
}

.wp-block-ws-card.has-background {
    background: transparent
}

@media (min-width:768px) {
    .wp-block-ws-card.image-right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch
    }

    .wp-block-ws-card.image-right .object-fit-container {
        width: 40%;
        height: auto;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none
    }
}

@media (min-width:768px) {
    .wp-block-ws-card.image-right-wide {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch
    }

    .wp-block-ws-card.image-right-wide .object-fit-container {
        width: 60%;
        height: auto;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none
    }
}

@media (min-width:992px) {
    .wp-block-ws-card.extra-padding .card-body {
        padding: 80px 80px 50px
    }
}

.wp-block-ws-card.card-link {
    padding: 10px
}

.wp-block-ws-card.card-link .arrow-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px;
    background: #fff;
    padding: 10px;
    color: #f06f1f
}

.wp-block-ws-card.card-link .card-body {
    padding: 30px 10px 0
}

.wp-block-ws-card.card-link:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1)
}

/* Gradient Overlay Style */

.card.is-style-gradient-overlay {
    -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    border: none;
    transition: box-shadow .5s;
}
.card.is-style-gradient-overlay:hover {
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.card.is-style-gradient-overlay>.object-fit-container {
    height: 500px;
}

.wp-block-ws-card.is-style-gradient-overlay .card-body {
    position: absolute;
    padding: 20px 40px !important;
    background-image: linear-gradient(90deg, rgb(243, 115, 34) 0%, rgb(251, 175, 27) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    bottom: -500px;
    transition: all .5s;
    color: #FFF;
}

.wp-block-ws-card.is-style-gradient-overlay .card-body p {
    transition: all .5s;
    margin: 0;
}

.wp-block-ws-card.is-style-gradient-overlay .card-body :not(.first-card-element) {
    opacity: 0;
    transition: all .5s;
}

.wp-block-ws-card.is-style-gradient-overlay .card-body .first-card-element, .wp-block-ws-card.is-style-gradient-overlay .card-body .first-card-element * {
    opacity: 1;
}

.wp-block-ws-card.is-style-gradient-overlay .card-body a {
    text-decoration: none;
    color: #FFF;
}

.wp-block-ws-card.is-style-gradient-overlay:hover .card-body {
    padding: 80px 40px 20px !important;
    clip-path: polygon(0 50px, 100% 25px, 100% 100%, 0 100%);
    /* top: 300px; */
}

.wp-block-ws-card.is-style-gradient-overlay:hover .card-body * {
    opacity: 1;
}