/* ============================================
   ANNOUNCEMENT SECTION - BLUE PURPLE THEME
   ============================================ */
#announcement {
    background: #f8f9fa;
    padding: 80px 0;
}

/* ========================================================== */
/* RESET BOOTSTRAP CARD STYLES FOR CUSTOM BORDERS             */
/* ========================================================== */
.announcement-card {
    transition: 0.3s;
    background: #ffffff !important;
    padding: 25px 20px !important;
    border-radius: 16px !important;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    /* Reset Bootstrap border so our custom one shows */
    border: 2px solid #e5e7eb !important; 
    border-top-width: 5px !important;
}

.announcement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================================== */
/* COLOR GRADIENT PER CARD (Darker to Lighter Purple)         */
/* ========================================================== */

/* URGENT - Darkest Purple */
.announcement-card.urgent {
    border-color: #4c1d95 !important;
    border-top-color: #4c1d95 !important;
}
.announcement-card.urgent .card-title {
    color: #4c1d95 !important;
}
.announcement-card.urgent .badge-custom {
    background: #4c1d95 !important;
    color: #fff !important;
}
.announcement-card.urgent .title-text {
    color: #4c1d95 !important;
}
.announcement-card.urgent .item-box {
    border-left-color: #4c1d95 !important;
}

/* IMPORTANT - Primary Portal Purple */
.announcement-card.important {
    border-color: #6366f1 !important;
    border-top-color: #6366f1 !important;
}
.announcement-card.important .card-title {
    color: #6366f1 !important;
}
.announcement-card.important .badge-custom {
    background: #6366f1 !important;
    color: #fff !important;
}
.announcement-card.important .title-text {
    color: #6366f1 !important;
}
.announcement-card.important .item-box {
    border-left-color: #6366f1 !important;
}

/* EVENT - Mid Lighter Purple */
.announcement-card.event {
    border-color: #8b5cf6 !important;
    border-top-color: #8b5cf6 !important;
}
.announcement-card.event .card-title {
    color: #8b5cf6 !important;
}
.announcement-card.event .badge-custom {
    background: #8b5cf6 !important;
    color: #fff !important;
}
.announcement-card.event .title-text {
    color: #8b5cf6 !important;
}
.announcement-card.event .item-box {
    border-left-color: #8b5cf6 !important;
}

/* INFO - Lightest Purple */
.announcement-card.info {
    border-color: #a78bfa !important;
    border-top-color: #a78bfa !important;
}
.announcement-card.info .card-title {
    color: #a78bfa !important;
}
.announcement-card.info .badge-custom {
    background: #a78bfa !important;
    color: #fff !important;
}
.announcement-card.info .title-text {
    color: #a78bfa !important;
}
.announcement-card.info .item-box {
    border-left-color: #a78bfa !important;
}

/* ========================================================== */
/* END COLOR GRADIENT                                         */
/* ========================================================== */

.announcement-card .border-line {
    border-bottom: 2px solid;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.announcement-card .badge-custom {
    font-size: 13px;
    font-weight: 600;
    border-radius: 50px;
    padding: 2px 14px;
    min-width: 28px;
    text-align: center;
}

/* THE GRAY BOXES INSIDE THE CARD */
.announcement-card .item-box {
    background: #f8f9fa !important;
    padding: 12px 15px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
    border-left: 4px solid;
    transition: 0.3s;
}
.announcement-card .item-box:last-child {
    margin-bottom: 0 !important;
}
.announcement-card .item-box:hover {
    background: #f0f0f0 !important;
}

.announcement-card .title-text {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
    display: block;
}

.announcement-card .date-text {
    color: #888;
    font-size: 13px;
}
.announcement-card .date-text i {
    margin-right: 5px;
}

/* "MORE ANNOUNCEMENTS" TEXT */
.announcement-card .more-text {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: #888;
    font-size: 13px;
    font-weight: 500;
}

/* ========================================================== */
/* BEAUTIFUL BUTTON STYLING                                   */
/* ========================================================== */
.btn-announce-wrapper {
    margin-top: 40px;
    text-align: center;
}

.btn-announce {
    background: linear-gradient(135deg, #4c1d95, #8b5cf6);
    color: #fff;
    padding: 14px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(76, 29, 149, 0.25);
}
.btn-announce:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(76, 29, 149, 0.4);
    color: #fff;
    background: linear-gradient(135deg, #3b0764, #7c3aed);
}

.btn-announce i {
    transition: transform 0.3s ease;
    margin-left: 8px;
}
.btn-announce:hover i {
    transform: translateX(5px);
}

/* ============================================
   ANNOUNCEMENT - RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    #announcement { padding: 60px 0; }
}

@media (max-width: 768px) {
    #announcement { padding: 50px 0; }
    .announcement-card { padding: 20px !important; margin-bottom: 20px; }
    .btn-announce { padding: 12px 30px; font-size: 14px; }
}

@media (max-width: 480px) {
    #announcement { padding: 40px 0; }
    .announcement-card { padding: 15px !important; }
    .announcement-card .title-text { font-size: 14px; }
}