body {background-color: #f8f9fa;}
        .role-card {
            border: none;
            border-radius: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            height: 100%;
        }

        .role-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(140, 0, 1, 0.15);
            border-bottom: 5px solid #8c0001;
        }

        .icon-circle {
            width: 80px; height: 80px;
            border-radius: 50%;
            background-color: #f8f9fa;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px;
            color: #8c0001;
            font-size: 2rem;
            transition: background 0.3s, color 0.3s;
        }

        .role-card:hover .icon-circle {
            background-color: #8c0001;
            color: white;
        }

        .btn-custom {
            background-color: #8c0001; color: white; border-radius: 50px;
            padding: 10px 30px; font-weight: 600;
        }

        .btn-custom:hover {background-color: #6d0001; color: white;}