.blog-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08) !important;
}

.blog-img {
    transition: transform 0.35s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.05);
}

.blog-title {
    transition: color 0.2s ease;
}

.blog-card:hover .blog-title {
    color: var(--danger-color) !important;
}

/* Multiline text truncation */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* background sections - Lightweight Pure CSS Gradient */
.background-section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    
    /* Modern Slate Gray to Crimson Red Blend */
    background: 
        radial-gradient(circle at 80% 20%, rgba(220, 38, 38, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.15) 0%, transparent 45%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #450a0a 100%);
    background-size: 100% 100%;
}

@media (max-width: 768px) {
    .background-section {
        min-height: 85vh; /* Slightly shorter on mobile screens for better UX */
    }
    .background-section h1 {
        font-size: 2.25rem;
    }
}

/* Modern student card dynamics */
        .student-card {
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .student-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08) !important;
        }
        .student-avatar-wrapper {
            height: 260px;
            overflow: hidden;
            background-color: #f8f9fa;
        }
        .student-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            transition: transform 0.3s ease;
        }
        .student-card:hover .student-avatar {
            transform: scale(1.03);
        }
        /* Filter bar background */
        .filter-card {
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .profile-avatar-wrapper {
            width: 160px;
            height: 160px;
            margin: 0 auto;
            position: relative;
        }
        .profile-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 4px solid var(--white-color);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }
        .avatar-edit-badge {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .avatar-edit-badge:hover {
            transform: scale(1.1);
        }
        .leader-avatar {
            width: 44px;
            height: 44px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .student-avatar {
            background-position: center !important;
        }