/* Styling the cards */
.announcement-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.announcement-card img {
    width: 100%;
    max-height: 300px; /* Ensures the image doesn't grow too large */
    object-fit: cover;
    border-radius: 8px;
}

.announcement-card h5 {
    font-size: 18px;
    color: #333;
    margin-top: 10px;
}

.announcement-card p {
    font-size: 14px;
    color: #666;
}

.announcement-card small {
    font-size: 12px;
    color: #999;
}

/* Hover effect for the announcement cards */
.announcement-card:hover {
    transform: translateY(-5px);
}

/* Pagination styles */
.pagination .page-item {
    margin: 0 5px;
}

.pagination .page-link {
    color: #FFDD00 !important; /* Mustard color for pagination */
    border: 1px solid #FFDD00 !important;
}

.pagination .page-item.active .page-link {
    background-color: #FFDD00 !important;
    border-color: #FFDD00 !important;
    color: white !important;
}

.pagination .page-item.disabled .page-link {
    color: #ccc !important;
    pointer-events: none;
}

/* Container for announcements */
#announcement-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

#announcement-list > div {
    flex: 0 0 calc(33.333% - 20px); /* 3 cards per row */
    box-sizing: border-box;
}

/* Tablet: 2 cards per row */
@media (max-width: 768px) {
    #announcement-list > div {
        flex: 0 0 calc(50% - 20px);
    }
}

/* Mobile: 1 card per row */
@media (max-width: 576px) {
    #announcement-list > div {
        flex: 0 0 100%;
    }
}


/* Centering the pagination container */
#pagination-nav {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

    /* Section heading */
    .announcement-heading {
        font-size: 2.5rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 2rem;
        color: #343a40;
        position: relative;
    }

    .announcement-heading::after {
        content: '';
        width: 60px;
        height: 4px;
        background-color:#ff9900;
        display: block;
        margin: 10px auto 0;
        border-radius: 2px;
    }

    /* Card style */
    .card {
        border: none;
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Deeper base shadow */
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    .card:hover {
    transform: translateY(-8px) scale(1.01);
}


    .card-img-top {
        height: 220px;
        object-fit: cover;
        border-bottom: 1px solid #f1f1f1;
    }

    .card-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #222;
    }

    .card-text {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.5;
    }

    .card-body small {
        font-size: 0.85rem;
        color: #999;
    }



    /* Responsive adjustments */
    @media (max-width: 768px) {
        .card-img-top {
            height: 180px;
        }
    }

    @media (max-width: 576px) {
        .announcement-heading {
            font-size: 2rem;
        }
    }

    body {
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    body.page-loaded {
        opacity: 1;
    }

    @keyframes floatUpDown {
        0% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
        100% { transform: translateY(0); }
    }
    
    .card {
        animation: floatUpDown 3s ease-in-out infinite;
    }
    body {
        background-color: #f9f9f9; /* soft off-white */
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }