/* =========================================
   1. CARD BASE STYLES
   ========================================= */
.card-bg {
    position: relative;
    min-height: 250px; 
    overflow: hidden;
    border: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Overlay (Darkens image) */
.card-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0); 
    z-index: 0;
    transition: background-color 0.4s ease;
}

/* Content (Hidden initially) */
.card-bg .card-body {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    z-index: 1;
    transition: opacity 0.4s ease;
}

/* Text Colors */
.card-bg .card-body * {
    color: white !important;
}

/* Button Fix */
.card-bg .card-body .btn {
    position: relative; 
    z-index: 2;
    margin-top: 10px;
    color: #212529 !important;
}

/* =========================================
   2. HOVER EFFECTS
   ========================================= */
.card-bg:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.card-bg:hover::before {
    background-color: rgba(0, 0, 0, 0.6); 
}

.card-bg:hover .card-body {
    opacity: 1;
}

/* =========================================
   3. BACKGROUND IMAGES
   ========================================= */
.forms-bg { background-image: url('/images/forms-bg.png'); }
.feedback-bg { background-image: url('/images/feedback-bg.png'); }
.links-bg { background-image: url('/images/links-bg.jpg'); }

/* Special fix for Notices to fit the image */
.notices-bg {
    background-image: url('/images/notices-bg.png');
    background-size: 100% 100%; 
}

/* =========================================
   4. SWIPER (CAROUSEL) CUSTOMIZATION
   ========================================= */
.citizen-swiper {
    width: 100%;
    padding: 20px 10px 50px 10px; /* Padding for hover lift & dots */
}

.swiper-slide {
    height: auto;
    display: flex;
    justify-content: center;
}

.swiper-slide .card {
    width: 100%;
}

/* Yellow Dots */
.swiper-pagination-bullet-active {
    background-color: #ffc107 !important; 
}