body {
        background:
            radial-gradient(
                circle at top left,
                rgba(108, 63, 160, 0.08),
                transparent 35%
            ),
            #f8f7fb;
    }


    /* =========================================================
       HEADER
    ========================================================= */

    .announcement-page {
        padding: 70px 0;
    }


    .announcement-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        color: #633b87;
        font-size: .78rem;
        font-weight: 700;

        letter-spacing: .12em;
        text-transform: uppercase;
    }


    .announcement-heading {
        color: #2b173b;
        font-weight: 800;
    }


    .announcement-header-line {
        width: 70px;
        height: 3px;

        margin: 18px auto;

        border-radius: 50px;

        background:
            linear-gradient(
                90deg,
                #633b87,
                #9b6bc3
            );
    }


    /* =========================================================
       FILTER
    ========================================================= */

    .announcement-filter {
        margin-bottom: 45px;

        padding: 18px;

        border-radius: 22px;

        background: rgba(255, 255, 255, .65);

        border: 1px solid rgba(99, 59, 135, .13);

        box-shadow:
            0 15px 40px rgba(55, 30, 80, .08);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }


    .announcement-filter .form-control,
    .announcement-filter .form-select {
        border-radius: 13px;

        border: 1px solid rgba(99, 59, 135, .16);

        min-height: 45px;

        box-shadow: none;
    }


    .announcement-filter .form-control:focus,
    .announcement-filter .form-select:focus {
        border-color: #79509b;

        box-shadow:
            0 0 0 3px rgba(121, 80, 155, .10);
    }


    .announcement-filter-btn {
        min-height: 45px;

        border: 0;

        border-radius: 13px;

        background: #633b87;

        color: white;

        font-weight: 600;

        transition: .3s ease;
    }


    .announcement-filter-btn:hover {
        background: #4e2b6d;

        transform: translateY(-2px);
    }


    .announcement-reset {
        min-height: 45px;

        border-radius: 13px;

        border: 1px solid rgba(99, 59, 135, .2);

        color: #633b87;

        background: rgba(255,255,255,.5);
    }


    /* =========================================================
       CARD
    ========================================================= */

    .announcement-card {
        position: relative;

        height: 100%;

        overflow: hidden;

        border-radius: 22px;

        border: 1px solid rgba(255,255,255,.85);

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.88),
                rgba(245,240,250,.66)
            );

        box-shadow:
            0 12px 35px rgba(53, 28, 75, .09);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);

        transition:
            transform .4s cubic-bezier(.2,.8,.2,1),
            box-shadow .4s ease,
            border-color .4s ease;
    }


    .announcement-card::before {
        content: "";

        position: absolute;

        inset: 7px;

        border-radius: 17px;

        border: 1px solid rgba(99,59,135,.06);

        pointer-events: none;

        z-index: 5;
    }


    .announcement-card:hover {
        transform:
            translateY(-8px)
            rotate(-1deg)
            scale(1.015);

        box-shadow:
            0 25px 55px rgba(63, 33, 90, .17);

        border-color:
            rgba(99,59,135,.25);
    }


    /* =========================================================
       IMAGE
    ========================================================= */

    .announcement-image {
        position: relative;

        overflow: hidden;

        height: 175px;

        margin: 8px;

        border-radius: 17px;
    }


    .announcement-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;

        transition:
            transform .6s ease,
            filter .5s ease;
    }


    .announcement-card:hover .announcement-image img {
        transform: scale(1.08);

        filter: saturate(1.08);
    }


    .announcement-image-overlay {
        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                to top,
                rgba(30, 13, 45, .42),
                transparent 60%
            );

        pointer-events: none;
    }


    .announcement-pdf-badge {
        position: absolute;

        top: 12px;
        right: 12px;

        z-index: 3;

        padding: 6px 10px;

        border-radius: 50px;

        background: rgba(255,255,255,.9);

        color: #b42323;

        font-size: .72rem;

        font-weight: 700;

        box-shadow:
            0 5px 15px rgba(0,0,0,.12);
    }


    /* =========================================================
       CARD BODY
    ========================================================= */

    .announcement-card-body {
        padding: 13px 15px 17px;
    }


    .announcement-meta {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 8px;

        margin-bottom: 8px;

        color: #76548e;

        font-size: .72rem;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: .04em;
    }


    .announcement-title {
        margin: 0;

        color: #301744;

        font-size: 1rem;

        line-height: 1.45;

        font-weight: 750;
    }


    .announcement-description {
        margin-top: 8px;
        margin-bottom: 0;

        color: #6d6475;

        font-size: .82rem;

        line-height: 1.65;
    }


    .announcement-action {
        display: inline-flex;

        align-items: center;

        gap: 6px;

        margin-top: 13px;

        color: #633b87;

        font-size: .78rem;

        font-weight: 700;

        text-decoration: none;

        transition: .3s ease;
    }


    .announcement-action:hover {
        color: #43265c;

        gap: 10px;
    }


    /* =========================================================
       EMPTY
    ========================================================= */

    .announcement-empty {
        padding: 70px 20px;

        border-radius: 25px;

        background: rgba(255,255,255,.7);

        border: 1px solid rgba(99,59,135,.1);

        text-align: center;
    }


    .announcement-empty i {
        font-size: 3.5rem;

        color: #8a64a7;
    }


    /* =========================================================
       PAGINATION
    ========================================================= */

    .announcement-pagination {
        margin-top: 45px;
    }


    .announcement-pagination .pagination {
        gap: 5px;
    }


    .announcement-pagination .page-link {
        border-radius: 10px !important;

        border: 1px solid rgba(99,59,135,.12);

        color: #633b87;

        background: rgba(255,255,255,.8);
    }


    .announcement-pagination .page-item.active .page-link {
        background: #633b87;

        border-color: #633b87;

        color: #fff;
    }


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

    @media (max-width: 1199.98px) {

        .announcement-image {
            height: 160px;
        }

    }


    @media (max-width: 991.98px) {

        .announcement-page {
            padding: 50px 0;
        }

        .announcement-image {
            height: 190px;
        }

    }


    @media (max-width: 575.98px) {

        .announcement-filter {
            padding: 13px;
        }

        .announcement-image {
            height: 210px;
        }

        .announcement-card-body {
            padding: 14px 16px 18px;
        }

        .announcement-title {
            font-size: 1.05rem;
        }

    }