/* ========================================
   LATEST UPDATE COMPONENT
======================================== */

.c4elatestupdate-box {
    position: relative;

    margin: 25px 0;
    padding: 20px;

    overflow: hidden;

    border-radius: 10px;

    background: #ffffff;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Top gradient bar */

.c4elatestupdate-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        to right,
        #4a90e2,
        #6fcf97
    );
}

/* ========================================
   BADGE
======================================== */

.c4elatestupdate-badge {
    position: absolute;

    top: 15px;
    right: 15px;

    padding: 4px 10px;

    border-radius: 15px;

    background: #ff4d4f;

    color: #fff;

    animation: ti-update-blink 1.2s infinite;
}

/* ========================================
   TITLE
======================================== */

.c4elatestupdate-title {
    margin-bottom: 5px;

    color: #000;
}

/* ========================================
   DATE
======================================== */

.c4elatestupdate-date {
    display: inline-block;

    margin-bottom: 12px;
    padding: 3px 10px;

    border-radius: 12px;

    background: #eef5ff;

    color: #333;
}

/* ========================================
   CONTENT
======================================== */

.c4elatestupdate-content p {
    margin: 10px 0;

    color: #333;

    line-height: 1.6;
}

/* ========================================
   ANIMATION
======================================== */

@keyframes ti-update-blink {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 600px) {

    .c4elatestupdate-box {
        padding: 15px;
    }
}