/*--------------------------------------------------------------
  22. Card
----------------------------------------------------------------*/
.cs_card.cs_style_1,
.cs_card.cs_style_4 {
    .cs_card_img {
        margin-bottom: 26px;
        img {
            width: 100%;
            @media (max-width: 991px) {
                object-fit: cover;
                max-height: 500px;
            }
        }
    }
    .cs_card_title {
        margin-bottom: 12px;
    }
    .cs_card_subtitle {
        margin-bottom: 24px;
    }
}
.cs_shining_item {
    position: relative;
    overflow: hidden;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        z-index: 2;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, transparent 0%, var(--white) 100%);
        transform: skewX(-25deg);
        z-index: 1;
        opacity: 0.2;
    }
    &.active,
    &:hover {
        &::before {
            animation: shine 1.3s;
        }
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}
.cs_card.cs_style_2 {
    padding: 45px;
    @media (max-width: 1199px) {
        padding: 30px;
    }
    .cs_card_in {
        position: relative;
        padding-bottom: 25px;
        &::before {
            content: "";
            position: absolute;
            height: 2px;
            width: 47px;
            bottom: 0;
            left: 0;
            background-color: var(--accent);
        }
    }
    .cs_card_thumb {
        margin-bottom: 22px;
        img {
            height: 220px;
        }
    }
    .cs_card_title {
        margin-bottom: 15px;
    }
}
.cs_card.cs_style_3 {
    .cs_card_title {
        padding-left: 40px;
        margin-bottom: 14px;
        &::before {
            content: "";
            height: 1px;
            width: 30px;
            background-color: currentColor;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -1px;
        }
    }
}
.cs_card.cs_style_4 {
    .cs_card_img {
        position: relative;
        border-radius: 50px 0px 0px 0px;
        overflow: hidden;
        &::before {
            content: "";
            border: 8px solid var(--white);
            opacity: 0.8;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            border-radius: inherit;
        }
    }
}
.cs_card.cs_style_5 {
    display: flex;
    padding: 75px 110px;
    width: 100%;
    gap: 130px;
    position: sticky;
    top: 150px;
    @media (max-width: 1400px) {
        padding: 50px;
        gap: 50px;
    }
    @media (max-width: 991px) {
        flex-direction: column;
        position: initial;
        padding: 40px 40px 50px;
        gap: 40px;
    }
    @media (max-width: 400px) {
        padding: 30px 25px 40px;
    }
    &:not(:first-child) {
        margin-top: 80px;
        @media (max-width: 991px) {
            margin-top: 30px;
        }
    }
    &:first-child {
        background-color: #5d7075;
    }
    &:nth-child(2) {
        background-color: #465b62;
    }
    &:nth-child(3) {
        background-color: #2f474e;
    }
    .cs_card_thumb {
        flex: none;
        width: 424px;
        @media (max-width: 991px) {
            width: 100%;
        }
    }
    .cs_card_number {
        margin-bottom: 6px;
    }
    .cs_card_title {
        margin-bottom: 22px;
    }
}