.card-pop,
.card-pop:hover {
    transition: .3s ease-in-out
}

.head-and-p a,
.head-and-p p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.c2card__footer,
.head-and-p a {
    font-weight: 500;
    display: -webkit-box
}

.c2card__calender,
.c2card__eye,
.pop-image {
    position: relative
}

.c2card__calender::before,
.c2card__eye::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 4px;
    color: var(--site-color)
}

.blog-card-2c {
    background: linear-gradient(135deg, #fff 21px, rgba(236, 236, 236, .62) 22px, rgba(236, 236, 236, .62) 24px, transparent 24px, transparent 67px, rgba(236, 236, 236, .62) 67px, rgba(236, 236, 236, .62) 69px, transparent 69px), linear-gradient(225deg, #fff 21px, rgba(236, 236, 236, .62) 22px, rgba(236, 236, 236, .62) 24px, transparent 24px, transparent 67px, rgba(236, 236, 236, .62) 67px, rgba(236, 236, 236, .62) 69px, transparent 69px) 0 64px;
    background-color: #fff;
    background-size: 64px 128px
}

.blog-card-2c-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--site-color);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}

.blog-card-2c-title {
    margin: 0 0 12px;
    display: block;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: #fff
}

.blog-card-2c-header p {
    color: #fff
}

.blog-card-2c-title a {
    text-decoration: none
}

.blog-card-2c-title a:hover {
    text-decoration: underline
}

.blog-card-2c-card-body {
    padding: 1.25rem;
    position: relative
}

.custom-row {
    display: flex;
    flex-wrap: wrap
}

.custom-col-pop {
    flex: 0 0 50%
}

.card-pop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 10px 40px rgb(82 85 90 / 10%);
    -moz-box-shadow: 0 10px 40px rgba(82, 85, 90, .1);
    box-shadow: 0 10px 40px rgb(82 85 90 / 10%);
    border-radius: .3rem;
    margin: 10px;
    padding: 10px
}

.card-pop:hover {
    cursor: pointer !important;
    border: 1px solid gray;
    box-shadow: 0 4px 10px rgba(255, 186, 186, .3)
}

.pop-image {
    width: 33%
}

.pop-image img {
    width: 100% !important;
    height: auto !important;
    vertical-align: middle;
    border-radius: 5px;
    aspect-ratio: 3/2 !important
}

.pop-desp {
    width: 65%
}

.head-and-p a {
    color: #000;
    font-size: .9rem;
    word-spacing: 2px;
    line-height: 1.5rem;
    margin-bottom: .7rem
}

.head-and-p a:hover {
    color: var(--site-color);
    text-decoration: none
}

.head-and-p p {
    color: #434244;
    font-size: .95rem;
    display: -webkit-box;
    margin-bottom: 1rem;
    line-height: 20px
}

.card-pop .card__footer {
    border-top: none;
    cursor: default
}

.c2card__footer {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: .775rem;
    padding: 10px;
    color: #505050
}

@media (max-width:768px) {
    .custom-col-pop {
        flex: 0 0 100%
    }
}

.c2card__calender::before {
    content: '\f073'
}

.card__eye::before {
    content: '\f06e'
}

[data-title]{
    position:relative;
}
[data-title]:after {
    content: attr(data-title);
    position: absolute;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    background-color: #fff;
    color: var(--date-color, #dc3545);
    font-size: 11px;
    padding: 3px 8px;
    bottom: 2em;
    transform: translateX(-50%);
    border: 1px solid var(--date-color, #dc3545)
}

[data-title]:hover:after {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out
}